diff options
| author |   NtskwK <natsukawa247@outlook.com> | 2026-03-17 17:40:05 +0800 |
|---|---|---|
| committer | NtskwK <natsukawa247@outlook.com> | 2026-03-17 17:40:05 +0800 |
| commit | 1812ca8974aee347b61bd415c1e2b63a205137dd (patch) | |
| tree | 9691205659cd39d8641bc5c1db0d801a7d3fbf2f /packages/ui/src/components/sidebar.tsx | |
| parent | e51e6ef36721b8e3915cd3053b6218e2d5c88cb2 (diff) | |
| parent | e356ab996ad3ef4ad5fb9c90d4a4b4e61ff3342d (diff) | |
| download | DropOut-1812ca8974aee347b61bd415c1e2b63a205137dd.tar.gz DropOut-1812ca8974aee347b61bd415c1e2b63a205137dd.zip | |
Merge branch 'main' of https://github.com/HydroRoll-Team/DropOut
Diffstat (limited to 'packages/ui/src/components/sidebar.tsx')
| -rw-r--r-- | packages/ui/src/components/sidebar.tsx | 27 |
1 files changed, 24 insertions, 3 deletions
diff --git a/packages/ui/src/components/sidebar.tsx b/packages/ui/src/components/sidebar.tsx index 0147b0a..d81156f 100644 --- a/packages/ui/src/components/sidebar.tsx +++ b/packages/ui/src/components/sidebar.tsx @@ -49,12 +49,33 @@ function NavItem({ Icon, label, to }: NavItemProps) { export function Sidebar() { const authStore = useAuthStore(); + const renderUserAvatar = () => { + return ( + <div className="w-full flex flex-col items-center hover:bg-accent/90 transition-colors cursor-pointer"> + <div className="lg:hidden"> + <UserAvatar /> + </div> + <div className="w-full hidden lg:flex bg-accent/90 p-3 flex-row space-x-3"> + <UserAvatar /> + <div className=""> + <p className="text-sm font-medium text-white"> + {authStore.account?.username} + </p> + <p className="text-xs text-zinc-400"> + {authStore.account?.type === "microsoft" ? "Online" : "Offline"} + </p> + </div> + </div> + </div> + ); + }; + return ( <aside className={cn( "flex flex-col items-center lg:items-start", "bg-sidebar transition-all duration-300", - "w-20 lg:w-64 shrink-0 py-6 h-full", + "w-20 lg:w-64 shrink-0 pt-6 pb-6 lg:pb-3 h-full", )} > {/* Logo Area */} @@ -162,9 +183,9 @@ export function Sidebar() { <NavItem Icon={Settings} label="Settings" to="/settings" /> </nav> - <div className="flex-1 flex flex-col justify-end"> + <div className="w-full lg:px-3 flex-1 flex flex-col justify-end"> <DropdownMenu> - <DropdownMenuTrigger render={<UserAvatar />}> + <DropdownMenuTrigger render={renderUserAvatar()} className="w-full"> Open </DropdownMenuTrigger> <DropdownMenuContent align="end" side="right" sideOffset={20}> |