fix: made the sidebar fixed and the content scrollable

hngprojects · Aug 24, 2024 · 0c66fdc · 0c66fdc
1 parent e1196a0
commit 0c66fdc
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 11 deletions.
diff --git a/src/app/dashboard/(admin)/admin/(overview)/layout.tsx b/src/app/dashboard/(admin)/admin/(overview)/layout.tsx
@@ -8,9 +8,9 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen">
+    <div className="flex h-screen">
       <Sidebar />
-      <main className="flex-1 overflow-auto p-6">
+      <main className="h-full flex-1 overflow-y-auto p-6">
         <Suspense>{children}</Suspense>
       </main>
     </div>

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/_components/layout/sidebar/index.tsx
@@ -103,7 +103,7 @@ const SettingsSidebar: FC<Iproperties> = ({ sideNavitems = sideItems }) => {
   );
 
   return (
-    <div className="h-screen w-[50px] flex-col items-center justify-center bg-[#FAFAFA] pt-6 md:block md:w-[304px] md:justify-start md:px-4">
+    <div className="hide_scrollbar h-screen w-[50px] flex-col items-center justify-center overflow-y-auto bg-[#FAFAFA] py-6 md:block md:w-[304px] md:justify-start md:px-4">
       <div className="mb-6 flex items-center justify-center md:justify-start md:gap-2">
         <ChevronLeft className="h-5 w-5 text-neutral-dark-2" />
         <h2 className="hidden text-xl text-neutral-dark-2 md:block">

diff --git a/src/app/dashboard/(admin)/admin/(settings)/settings/layout.tsx b/src/app/dashboard/(admin)/admin/(settings)/settings/layout.tsx
@@ -7,9 +7,11 @@ interface Iproperties {
 }
 const layout: FC<Iproperties> = ({ children }) => {
   return (
-    <div className="grid grid-cols-[auto_1fr]">
+    <div className="grid h-screen grid-cols-[auto_1fr]">
       <SettingsSidebar />
-      <div className="mt-7">{children}</div>
+      <div className="hide_scrollbar mt-7 h-full overflow-y-auto">
+        {children}
+      </div>
     </div>
   );
 };

diff --git a/src/app/dashboard/(admin)/layout.tsx b/src/app/dashboard/(admin)/layout.tsx
@@ -9,10 +9,10 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="min-h-screen w-full">
+    <div className="h-screen w-full">
       <DashboardNavbar />
       <Providers />
-      <div className="">
+      <div className="h-full">
         <main className="mt-12 p-3 pt-6 md:p-5 md:pt-8">
           <Suspense>{children}</Suspense>
         </main>

diff --git a/src/app/dashboard/(user-dashboard)/layout.tsx b/src/app/dashboard/(user-dashboard)/layout.tsx
@@ -10,13 +10,13 @@ export default function AdminLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="grid min-h-screen w-full grid-rows-[auto_1fr]">
+    <div className="grid h-screen w-full grid-rows-[auto_1fr] overflow-y-hidden">
       <Providers />
       <UserNavbar />
-      <div className="relative mx-auto w-full bg-white max-lg:overflow-hidden xl:px-4">
-        <div className="flex">
+      <div className="relative mx-auto h-full w-full overflow-y-hidden bg-white max-lg:overflow-hidden xl:px-4">
+        <div className="flex h-full">
           <SettingsSidebar />
-          <div className="w-full p-4">
+          <div className="w-full overflow-y-auto p-4">
             <Suspense>{children}</Suspense>
           </div>
         </div>{" "}