fix: layouting

iqbalpa · Jul 20, 2024 · b137fde · b137fde
1 parent eb2fd4b
commit b137fde
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 48 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,14 +22,14 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${inter.className} flex h-screen flex-col overflow-hidden bg-gray-800 text-slate-200`}
+        className={`${inter.className} flex h-screen flex-col bg-gray-800 text-slate-200`}
       >
         <Header />
-        <div className="flex flex-1 flex-row overflow-hidden">
+        <div className="flex flex-1 flex-row">
           <main className="flex-1 overflow-y-hidden">{children}</main>
-          <ScrollArea className="flex-shrink-0 bg-slate-900">
+          <div className="flex max-h-screen flex-shrink-0 overflow-hidden overflow-y-auto bg-slate-900 pb-4 pt-16">
             <Sidebar />
-          </ScrollArea>
+          </div>
         </div>
         <GoTopButton />
         <BackButton />

diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 const Header: React.FC = () => {
   return (
-    <div className="flex flex-row items-center justify-between bg-gray-900 p-5">
+    <div className="fixed z-10 inset-x-0 flex flex-row items-center justify-between bg-gray-900 p-5">
       <Link href="/" className="text-xl font-bold">
         Al - Quran
       </Link>

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -5,6 +5,7 @@ import { ISurah } from '@/constant/surah.constant';
 import Link from 'next/link';
 import React, { useEffect, useState } from 'react';
 import { usePathname } from 'next/navigation';
+import { ScrollArea } from '../ui/scroll-area';
 
 const Sidebar: React.FC = () => {
   const [surahs, setSurahs] = useState<ISurah[]>([]);
@@ -28,58 +29,60 @@ const Sidebar: React.FC = () => {
   }
 
   return (
-    <div className="hidden flex-col gap-2 md:flex p-4">
-      {surahs.map((surah) => {
-        const isActive = pathname === `/${surah.nomor}`;
+    <ScrollArea>
+      <div className="hidden flex-col gap-2 p-4 md:flex">
+        {surahs.map((surah) => {
+          const isActive = pathname === `/${surah.nomor}`;
 
-        return (
-          <Link
-            href={`/${surah.nomor}`}
-            key={surah.nomor}
-            className={`group flex w-[250px] flex-row justify-between rounded-md border-[1px] border-slate-400 bg-slate-700 p-4 duration-200 hover:cursor-pointer ${
-              isActive ? 'border-teal-300' : 'hover:border-teal-300'
-            }`}
-          >
-            <div className="flex flex-row items-center gap-3">
-              <div
-                className={`flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 ${
-                  isActive ? 'bg-teal-300' : 'group-hover:bg-teal-300'
-                }`}
-              >
-                <p
-                  className={`font-bold ${
-                    isActive ? 'text-slate-900' : 'group-hover:text-slate-900'
+          return (
+            <Link
+              href={`/${surah.nomor}`}
+              key={surah.nomor}
+              className={`group flex w-[250px] flex-row justify-between rounded-md border-[1px] border-slate-400 bg-slate-700 p-4 duration-200 hover:cursor-pointer ${
+                isActive ? 'border-teal-300' : 'hover:border-teal-300'
+              }`}
+            >
+              <div className="flex flex-row items-center gap-3">
+                <div
+                  className={`flex h-10 w-10 items-center justify-center rounded-full bg-slate-900 ${
+                    isActive ? 'bg-teal-300' : 'group-hover:bg-teal-300'
                   }`}
                 >
-                  {surah.nomor}
-                </p>
-              </div>
+                  <p
+                    className={`font-bold ${
+                      isActive ? 'text-slate-900' : 'group-hover:text-slate-900'
+                    }`}
+                  >
+                    {surah.nomor}
+                  </p>
+                </div>
 
-              <div>
-                <p className="font-semibold">{surah.namaLatin}</p>
+                <div>
+                  <p className="font-semibold">{surah.namaLatin}</p>
+                  <p
+                    className={`text-sm text-slate-400 ${
+                      isActive ? 'text-teal-300' : 'group-hover:text-teal-300'
+                    }`}
+                  >
+                    {surah.arti}
+                  </p>
+                </div>
+              </div>
+              <div className="text-right">
+                <p>{surah.nama}</p>
                 <p
                   className={`text-sm text-slate-400 ${
                     isActive ? 'text-teal-300' : 'group-hover:text-teal-300'
                   }`}
                 >
-                  {surah.arti}
+                  {surah.jumlahAyat} ayat
                 </p>
               </div>
-            </div>
-            <div className="text-right">
-              <p>{surah.nama}</p>
-              <p
-                className={`text-sm text-slate-400 ${
-                  isActive ? 'text-teal-300' : 'group-hover:text-teal-300'
-                }`}
-              >
-                {surah.jumlahAyat} ayat
-              </p>
-            </div>
-          </Link>
-        );
-      })}
-    </div>
+            </Link>
+          );
+        })}
+      </div>
+    </ScrollArea>
   );
 };
 

diff --git a/src/modules/detailSurah/detailSurah.tsx b/src/modules/detailSurah/detailSurah.tsx
@@ -30,7 +30,7 @@ const DetailSurahPage: React.FC = () => {
   }
 
   return (
-    <div className="flex h-full max-h-screen flex-col overflow-y-auto pb-20">
+    <div className="flex h-full max-h-screen flex-col overflow-y-auto pt-16 pb-4">
       <div className="flex flex-col items-center pt-20 md:pt-10">
         <h1 className="text-xl font-bold">
           {surah.namaLatin} - {surah.nama}

diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from 'react';
 import { getAllSurah } from '@/api/api';
 import { ISurah } from '@/constant/surah.constant';
 import Link from 'next/link';
+import { ScrollArea } from '@/components/ui/scroll-area';
 
 const HomeModule: React.FC = () => {
   const [surahs, setSurahs] = useState<ISurah[]>([]);
@@ -22,7 +23,7 @@ const HomeModule: React.FC = () => {
   }, []);
 
   return (
-    <div className="mt-20 md:mt-10 max-w-screen m-10 flex min-h-screen flex-col items-center">
+    <div className="max-w-screen mt-36 flex min-h-screen flex-col items-center md:mt-28">
       <h1 className="text-2xl font-bold">Baca Al-Quran Online</h1>
       <div className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
         {surahs.map((surah, _index) => (