feature: Introduce a separate sidebar for the mobile

5 files changed, 64 insertions, 5 deletions

diff --git a/packages/web/app/dashboard/components/ModileSidebar.tsx b/packages/web/app/dashboard/components/ModileSidebar.tsx
new file mode 100644
index 00000000..74cbacba
--- /dev/null
+++ b/packages/web/app/dashboard/components/ModileSidebar.tsx
@@ -0,0 +1,24 @@
+import MobileSidebarItem from "./ModileSidebarItem";
+import { Archive, Star, Tag, PackageOpen, Settings } from "lucide-react";
+import SidebarProfileOptions from "./SidebarProfileOptions";
+
+export default async function MobileSidebar() {
+  return (
+    <aside className="w-full">
+      <ul className="flex justify-between space-x-2 border-b-black bg-gray-100 px-5 py-2 pt-5">
+        <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" />
+        <MobileSidebarItem
+          logo={<Star />}
+          path="/dashboard/bookmarks/favourites"
+        />
+        <MobileSidebarItem
+          logo={<Archive />}
+          path="/dashboard/bookmarks/archive"
+        />
+        <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" />
+        <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" />
+        <SidebarProfileOptions />
+      </ul>
+    </aside>
+  );
+}
diff --git a/packages/web/app/dashboard/components/ModileSidebarItem.tsx b/packages/web/app/dashboard/components/ModileSidebarItem.tsx
new file mode 100644
index 00000000..9389d2e4
--- /dev/null
+++ b/packages/web/app/dashboard/components/ModileSidebarItem.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export default function MobileSidebarItem({
+  logo,
+  path,
+}: {
+  logo: React.ReactNode;
+  path: string;
+}) {
+  const currentPath = usePathname();
+  return (
+    <li
+      className={cn(
+        "flex w-full rounded-lg hover:bg-gray-50",
+        path == currentPath ? "bg-gray-50" : "",
+      )}
+    >
+      <Link href={path} className="mx-auto px-3 py-2">
+        {logo}
+      </Link>
+    </li>
+  );
+}
diff --git a/packages/web/app/dashboard/components/Sidebar.tsx b/packages/web/app/dashboard/components/Sidebar.tsx
index 6cf90121..b8b7fc56 100644
--- a/packages/web/app/dashboard/components/Sidebar.tsx
+++ b/packages/web/app/dashboard/components/Sidebar.tsx
@@ -45,7 +45,7 @@ export default async function Sidebar() {
           />
         </ul>
       </div>
-      <div className="mt-auto flex justify-between">
+      <div className="mt-auto flex justify-between justify-self-end">
         <div className="my-auto"> {session.user.name} </div>
         <SidebarProfileOptions />
       </div>
diff --git a/packages/web/app/dashboard/components/SidebarItem.tsx b/packages/web/app/dashboard/components/SidebarItem.tsx
index e6a00d72..74d20bc0 100644
--- a/packages/web/app/dashboard/components/SidebarItem.tsx
+++ b/packages/web/app/dashboard/components/SidebarItem.tsx
@@ -18,7 +18,7 @@ export default function SidebarItem({
     <li
       className={cn(
         "rounded-lg  hover:bg-slate-100",
-        path == currentPath ? "bg-slate-100" : "",
+        path == currentPath ? "bg-gray-50" : "",
       )}
     >
       <Link href={path} className="flex w-full space-x-2 px-3 py-2">
diff --git a/packages/web/app/dashboard/layout.tsx b/packages/web/app/dashboard/layout.tsx
index 9d3568a5..393ad8bb 100644
--- a/packages/web/app/dashboard/layout.tsx
+++ b/packages/web/app/dashboard/layout.tsx
@@ -1,3 +1,5 @@
+import { Separator } from "@/components/ui/separator";
+import MobileSidebar from "./components/ModileSidebar";
 import Sidebar from "./components/Sidebar";
 
 export default async function Dashboard({
@@ -6,11 +8,17 @@ export default async function Dashboard({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="flex h-screen w-screen">
-      <div className="flex-none">
+    <div className="flex h-screen w-screen flex-col sm:flex-row">
+      <div className="hidden flex-none sm:flex">
         <Sidebar />
       </div>
-      <main className="flex-1 overflow-y-auto bg-gray-100">{children}</main>
+      <main className="flex-1 overflow-y-auto bg-gray-100">
+        <div className="block w-full sm:hidden">
+          <MobileSidebar />
+          <Separator />
+        </div>
+        {children}
+      </main>
     </div>
   );
 }