fix(sidebar): center notify icon and add user menu text when collapsed
This commit is contained in:
parent
368b10d4e0
commit
915c68e8e2
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user