diff options
4 files changed, 32 insertions, 48 deletions
diff --git a/apps/web/components/dashboard/header/Header.tsx b/apps/web/components/dashboard/header/Header.tsx index 11e3b3c3..b145683d 100644 --- a/apps/web/components/dashboard/header/Header.tsx +++ b/apps/web/components/dashboard/header/Header.tsx @@ -1,18 +1,10 @@ -import React from "react"; import Link from "next/link"; import { redirect } from "next/navigation"; import GlobalActions from "@/components/dashboard/GlobalActions"; import ProfileOptions from "@/components/dashboard/header/ProfileOptions"; import { SearchInput } from "@/components/dashboard/search/SearchInput"; import HoarderLogo from "@/components/HoarderIcon"; -import { Button } from "@/components/ui/button"; -import { - Tooltip, - TooltipContent, - TooltipTrigger, -} from "@/components/ui/tooltip"; import { getServerAuthSession } from "@/server/auth"; -import { Settings, Shield } from "lucide-react"; export default async function Header() { const session = await getServerAuthSession(); @@ -20,26 +12,6 @@ export default async function Header() { redirect("/"); } - const adminItem = - session.user.role == "admin" - ? [ - { - name: "Admin", - icon: <Shield size={18} />, - path: "/dashboard/admin", - }, - ] - : []; - - const headerItems = [ - ...adminItem, - { - name: "Settings", - icon: <Settings size={18} />, - path: "/dashboard/settings", - }, - ]; - return ( <header className="sticky left-0 right-0 top-0 z-50 flex h-16 items-center justify-between overflow-x-auto overflow-y-hidden bg-background p-4 shadow"> <div className="hidden items-center sm:flex"> @@ -51,19 +23,7 @@ export default async function Header() { <SearchInput className="min-w-40 bg-muted" /> <GlobalActions /> </div> - <div className="hidden items-center sm:flex"> - {headerItems.map((item) => ( - <Tooltip key={item.name} delayDuration={0}> - <TooltipTrigger asChild> - <Button variant="ghost"> - <Link href={item.path} className="flex items-center"> - {item.icon} - </Link> - </Button> - </TooltipTrigger> - <TooltipContent side="bottom">{item.name}</TooltipContent> - </Tooltip> - ))} + <div className="flex items-center"> <ProfileOptions /> </div> </header> diff --git a/apps/web/components/dashboard/header/ProfileOptions.tsx b/apps/web/components/dashboard/header/ProfileOptions.tsx index df31171c..ea8c7d12 100644 --- a/apps/web/components/dashboard/header/ProfileOptions.tsx +++ b/apps/web/components/dashboard/header/ProfileOptions.tsx @@ -10,7 +10,8 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { LogOut, Moon, Paintbrush, Sun } from "lucide-react"; +import { Separator } from "@/components/ui/separator"; +import { LogOut, Moon, Paintbrush, Settings, Shield, Sun } from "lucide-react"; import { signOut, useSession } from "next-auth/react"; import { useTheme } from "next-themes"; @@ -49,7 +50,32 @@ export default function SidebarProfileOptions() { {session.user.name?.charAt(0) ?? "U"} </Button> </DropdownMenuTrigger> - <DropdownMenuContent className="w-fit"> + <DropdownMenuContent className="mr-2 min-w-64 p-2"> + <div className="flex gap-2"> + <div className="border-new-gray-200 flex aspect-square size-11 items-center justify-center rounded-full border-4 bg-black p-0 text-white"> + {session.user.name?.charAt(0) ?? "U"} + </div> + <div className="flex flex-col"> + <p>{session.user.name}</p> + <p className="text-sm text-gray-400">{session.user.email}</p> + </div> + </div> + <Separator className="my-2" /> + <DropdownMenuItem asChild> + <Link href="/dashboard/settings"> + <Settings className="mr-2 size-4" /> + User Settings + </Link> + </DropdownMenuItem> + {session.user.role == "admin" && ( + <DropdownMenuItem asChild> + <Link href="/dashboard/admin"> + <Shield className="mr-2 size-4" /> + Admin Settings + </Link> + </DropdownMenuItem> + )} + <Separator className="my-2" /> <DropdownMenuItem asChild> <Link href="/dashboard/cleanups"> <Paintbrush className="mr-2 size-4" /> @@ -59,6 +85,7 @@ export default function SidebarProfileOptions() { <DropdownMenuItem onClick={toggleTheme}> <DarkModeToggle /> </DropdownMenuItem> + <Separator className="my-2" /> <DropdownMenuItem onClick={() => signOut({ diff --git a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx index 1117dd61..7ccf6b8d 100644 --- a/apps/web/components/dashboard/sidebar/ModileSidebar.tsx +++ b/apps/web/components/dashboard/sidebar/ModileSidebar.tsx @@ -1,6 +1,5 @@ -import ProfileOptions from "@/components/dashboard/header/ProfileOptions"; import HoarderLogoIcon from "@/public/icons/logo-icon.svg"; -import { ClipboardList, Search, Settings, Tag } from "lucide-react"; +import { ClipboardList, Search, Tag } from "lucide-react"; import MobileSidebarItem from "./ModileSidebarItem"; @@ -15,8 +14,6 @@ export default async function MobileSidebar() { <MobileSidebarItem logo={<Search />} path="/dashboard/search" /> <MobileSidebarItem logo={<ClipboardList />} path="/dashboard/lists" /> <MobileSidebarItem logo={<Tag />} path="/dashboard/tags" /> - <MobileSidebarItem logo={<Settings />} path="/dashboard/settings" /> - <ProfileOptions /> </ul> </aside> ); diff --git a/apps/web/components/dashboard/sidebar/Sidebar.tsx b/apps/web/components/dashboard/sidebar/Sidebar.tsx index 13260e07..14d019ff 100644 --- a/apps/web/components/dashboard/sidebar/Sidebar.tsx +++ b/apps/web/components/dashboard/sidebar/Sidebar.tsx @@ -66,7 +66,7 @@ export default async function Sidebar() { </div> <Separator /> <AllLists initialData={lists} /> - <div className="mt-auto flex items-center border-t pt-2"> + <div className="mt-auto flex items-center border-t pt-2 text-sm text-gray-400"> Hoarder v{serverConfig.serverVersion} </div> </aside> |