fix(sidebar): center notify icon and add user menu text when collapsed

This commit is contained in:
ZhenYi 2026-04-27 18:19:46 +08:00
parent 368b10d4e0
commit 915c68e8e2

View File

@ -12,7 +12,6 @@ import {useUser} from '@/contexts';
import {cn} from '@/lib/utils'; import {cn} from '@/lib/utils';
import {UserPlus, Bell} from 'lucide-react'; import {UserPlus, Bell} from 'lucide-react';
import {useNavigate} from 'react-router-dom'; import {useNavigate} from 'react-router-dom';
import {NotificationDrawer} from '@/components/notify/NotificationDrawer';
const btnClass = 'flex w-full h-9 justify-start items-center rounded-md font-medium hover:bg-muted cursor-pointer bg-transparent border-0 text-left text-sm'; const btnClass = 'flex w-full h-9 justify-start items-center rounded-md font-medium hover:bg-muted cursor-pointer bg-transparent border-0 text-left text-sm';
@ -39,9 +38,12 @@ export function SidebarUser({collapsed}: { collapsed: boolean }) {
<span className="text-sm leading-none">Notify</span> <span className="text-sm leading-none">Notify</span>
</button> </button>
) : ( ) : (
<div className="flex justify-center"> <button type="button" className={cn(btnClass, 'justify-center px-0')}
<NotificationDrawer /> onClick={() => navigate('/notify')}>
</div> <span className="flex h-6 items-center shrink-0 w-6 justify-center">
<Bell className="h-4 w-4"/>
</span>
</button>
)} )}
{user && ( {user && (
@ -85,12 +87,24 @@ export function SidebarUser({collapsed}: { collapsed: boolean }) {
<> <>
<DropdownMenuItem onClick={() => { <DropdownMenuItem onClick={() => {
navigate(`/user/${user.username}`); navigate(`/user/${user.username}`);
}}/> }}>
<span className="flex h-6 items-center shrink-0">
Profile
</span>
</DropdownMenuItem>
<DropdownMenuItem onClick={() => { <DropdownMenuItem onClick={() => {
navigate('/settings'); navigate('/settings');
}}/> }}>
<span className="flex h-6 items-center shrink-0">
Settings
</span>
</DropdownMenuItem>
<DropdownMenuSeparator/> <DropdownMenuSeparator/>
<DropdownMenuItem className="text-red-600 focus:text-red-600" onClick={() => logout()}/> <DropdownMenuItem className="text-red-600 focus:text-red-600" onClick={() => logout()}>
<span className="flex h-6 items-center shrink-0">
Log out
</span>
</DropdownMenuItem>
</> </>
)} )}
</DropdownMenuContent> </DropdownMenuContent>