From 0c66fdcafdf36b574927c068342e2b4d89204f44 Mon Sep 17 00:00:00 2001
From: Abdulmalik Yusuf <31839174+abdulmalikyusuf@users.noreply.github.com>
Date: Sat, 24 Aug 2024 19:37:52 +0100
Subject: [PATCH] fix: made the sidebar fixed and the content scrollable

---
 src/app/dashboard/(admin)/admin/(overview)/layout.tsx     | 4 ++--
 .../settings/_components/layout/sidebar/index.tsx         | 2 +-
 .../(admin)/admin/(settings)/settings/layout.tsx          | 6 ++++--
 src/app/dashboard/(admin)/layout.tsx                      | 4 ++--
 src/app/dashboard/(user-dashboard)/layout.tsx             | 8 ++++----
 5 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/dashboard/(admin)/admin/(overview)/layout.tsx b/src/app/dashboard/(admin)/admin/(overview)/layout.tsx
index e1b6d7de3..0132a4415 100644
--- 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
index 48d8aabe8..60778a2a1 100644
--- 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
index 7a435a806..68038be43 100644
--- 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
index 9d4b79dfe..ea8dc3b4a 100644
--- 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
index 54b35b55a..d1699fdfa 100644
--- 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>{" "}