From 47bd449fbe50a7b423db860ee6a34a7a3f7c3bb4 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Sat, 23 Mar 2024 14:33:28 +0000
Subject: feature(web): Add dark mode support

---
 .../components/dashboard/sidebar/ModileSidebar.tsx |  2 +-
 .../dashboard/sidebar/ModileSidebarItem.tsx        |  4 +--
 apps/web/components/dashboard/sidebar/Sidebar.tsx  |  4 +--
 .../components/dashboard/sidebar/SidebarItem.tsx   |  4 +--
 .../dashboard/sidebar/SidebarProfileOptions.tsx    | 29 +++++++++++++++++++++-
 5 files changed, 35 insertions(+), 8 deletions(-)

(limited to 'apps/web/components/dashboard/sidebar')

diff --git a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
index 3c68433a..7306308d 100644
--- a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx
@@ -12,7 +12,7 @@ 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">
+      <ul className="flex justify-between space-x-2 border-b-black px-5 py-2 pt-5">
         <MobileSidebarItem logo={<PackageOpen />} path="/dashboard/bookmarks" />
         <MobileSidebarItem logo={<Search />} path="/dashboard/search" />
         <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" />
diff --git a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx b/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
index d2b4aad3..3382f47b 100644
--- a/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
+++ b/apps/web/components/dashboard/sidebar/ModileSidebarItem.tsx
@@ -15,8 +15,8 @@ export default function MobileSidebarItem({
   return (
     <li
       className={cn(
-        "flex w-full rounded-lg hover:bg-gray-50",
-        path == currentPath ? "bg-gray-50" : "",
+        "flex w-full rounded-lg hover:bg-background",
+        path == currentPath ? "bg-background" : "",
       )}
     >
       <Link href={path} className="mx-auto px-3 py-2">
diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx
index 0351b889..1c18e90c 100644
--- a/apps/web/components/dashboard/sidebar/Sidebar.tsx
+++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx
@@ -22,12 +22,12 @@ export default async function Sidebar() {
   return (
     <aside className="flex h-screen w-60 flex-col gap-5 border-r p-4">
       <Link href={"/dashboard/bookmarks"}>
-        <div className="flex items-center rounded-lg px-1 text-slate-900">
+        <div className="flex items-center rounded-lg px-1 text-foreground">
           <PackageOpen />
           <span className="ml-2 text-base font-semibold">Hoarder</span>
         </div>
       </Link>
-      <hr />
+      <Separator />
       <div>
         <ul className="space-y-2 text-sm font-medium">
           <SidebarItem
diff --git a/apps/web/components/dashboard/sidebar/SidebarItem.tsx b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
index 75a1f6ba..7e5eb3bd 100644
--- a/apps/web/components/dashboard/sidebar/SidebarItem.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarItem.tsx
@@ -19,8 +19,8 @@ export default function SidebarItem({
   return (
     <li
       className={cn(
-        "rounded-lg px-3 py-2 hover:bg-slate-100",
-        path == currentPath ? "bg-gray-50" : "",
+        "rounded-lg px-3 py-2 hover:bg-accent",
+        path == currentPath ? "bg-accent/50" : "",
         className,
       )}
     >
diff --git a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
index f931b63e..bf56b805 100644
--- a/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
+++ b/apps/web/components/dashboard/sidebar/SidebarProfileOptions.tsx
@@ -7,8 +7,32 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { LogOut, MoreHorizontal } from "lucide-react";
+import { Slot } from "@radix-ui/react-slot";
+import { LogOut, Moon, MoreHorizontal, Sun } from "lucide-react";
 import { signOut } from "next-auth/react";
+import { useTheme } from "next-themes";
+
+function DarkModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  let comp;
+  if (theme == "dark") {
+    comp = (
+      <button onClick={() => setTheme("light")}>
+        <Sun className="size-4" />
+        <p>Light Mode</p>
+      </button>
+    );
+  } else {
+    comp = (
+      <button onClick={() => setTheme("dark")}>
+        <Moon className="size-4" />
+        <p>Dark Mode</p>
+      </button>
+    );
+  }
+  return <Slot className="flex flex-row gap-2">{comp}</Slot>;
+}
 
 export default function SidebarProfileOptions() {
   return (
@@ -19,6 +43,9 @@ export default function SidebarProfileOptions() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-fit">
+        <DropdownMenuItem>
+          <DarkModeToggle />
+        </DropdownMenuItem>
         <DropdownMenuItem
           onClick={() =>
             signOut({
-- 
cgit v1.2.3-70-g09d2