fix: overflow in sidebar

iqbalpa · Jul 20, 2024 · 80539f3 · 80539f3
1 parent cf9014c
commit 80539f3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/src/app/[id]/layout.tsx b/src/app/[id]/layout.tsx
@@ -1,4 +1,3 @@
-import Sidebar from '@/components/sidebar/sidebar';
 import { ScrollArea } from '@/components/ui/scroll-area';
 
 export default function DetailLayout({
@@ -7,10 +6,9 @@ export default function DetailLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="max-w-screen flex max-h-screen flex-row justify-between overflow-hidden">
-      <ScrollArea className="flex-1">{children}</ScrollArea>
-      <ScrollArea className="flex-shrink-0 bg-slate-900 p-4">
-        <Sidebar />
+    <div className="flex h-screen overflow-hidden">
+      <ScrollArea className="flex-1 overflow-y-auto bg-pink-800">
+        {children}
       </ScrollArea>
     </div>
   );

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import './globals.css';
 import Header from '@/components/header/header';
 import GoTopButton from '@/components/goTopButton/goTopButton';
 import BackButton from '@/components/backButton/backButton';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import Sidebar from '@/components/sidebar/sidebar';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -20,10 +22,15 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${inter.className} flex max-h-screen flex-col bg-gray-800 text-slate-200`}
+        className={`${inter.className} flex h-screen flex-col overflow-hidden bg-gray-800 text-slate-200`}
       >
         <Header />
-        <main className="flex-1 overflow-auto">{children}</main>
+        <div className="flex flex-1 flex-row overflow-hidden">
+          <main className="flex-1 overflow-y-auto">{children}</main>
+          <ScrollArea className="flex-shrink-0 bg-teal-900 p-4">
+            <Sidebar />
+          </ScrollArea>
+        </div>
         <GoTopButton />
         <BackButton />
       </body>

diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -23,6 +23,10 @@ const Sidebar: React.FC = () => {
     fetchData();
   }, []);
 
+  if (pathname === '/') {
+    return null;
+  }
+
   return (
     <div className="flex flex-col gap-2">
       {surahs.map((surah) => {