4 files changed, 53 insertions, 2 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">