fix(ui): gate app sidebar to md+ and use onSelect for logout (keyboard path)
This commit is contained in:
@@ -57,10 +57,8 @@ export function AppShell() {
|
|||||||
<DropdownMenuContent align="end">
|
<DropdownMenuContent align="end">
|
||||||
<DropdownMenuLabel>{user?.username}{isAdmin ? " · admin" : ""}</DropdownMenuLabel>
|
<DropdownMenuLabel>{user?.username}{isAdmin ? " · admin" : ""}</DropdownMenuLabel>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem asChild>
|
<DropdownMenuItem onSelect={logout}>
|
||||||
<span className="cursor-pointer" onClick={logout}>
|
<LogOut /> 退出登录
|
||||||
<LogOut /> 退出登录
|
|
||||||
</span>
|
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
@@ -69,7 +67,7 @@ export function AppShell() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full">
|
<div className="flex h-full">
|
||||||
{/* 桌面/平板侧栏;lg 全文标签,md 图标栏 */}
|
{/* 桌面/平板侧栏;lg 全文标签,md 图标栏 */}
|
||||||
<aside className="flex w-14 shrink-0 flex-col gap-1 border-r bg-card/60 p-2 lg:w-60">
|
<aside className="hidden w-14 shrink-0 flex-col gap-1 border-r bg-card/60 p-2 md:flex lg:w-60">
|
||||||
<Brand compact />
|
<Brand compact />
|
||||||
<nav aria-label="主导航" className="flex flex-col gap-1">
|
<nav aria-label="主导航" className="flex flex-col gap-1">
|
||||||
<NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" />
|
<NavItem to="/" icon={<BookOpen className="size-4 shrink-0" />} label="书架" />
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ export function ThemeToggle() {
|
|||||||
return (
|
return (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" size="icon" aria-label="切换主题" aria-pressed="false">
|
<Button variant="ghost" size="icon" aria-label="切换主题">
|
||||||
{theme === "dark" ? <Moon className="size-4" /> : theme === "light" ? <Sun className="size-4" /> : <Monitor className="size-4" />}
|
{theme === "dark" ? <Moon className="size-4" /> : theme === "light" ? <Sun className="size-4" /> : <Monitor className="size-4" />}
|
||||||
</Button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
|
|||||||
Reference in New Issue
Block a user