diff options
Diffstat (limited to 'apps/web/components/dashboard/sidebar')
5 files changed, 35 insertions, 8 deletions
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({ |