lunanting/lovart3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: move nav to left rail and slim width

Browse Source 
Shift the vertical navigation to the left, narrow the rail, and sync light/dark styling with layout offsets.
This commit is contained in:
Your Name 2026-02-03 15:21:02 +08:00
parent 28d0f445c5
commit 04706deb17
5 changed files with 12 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/(admin)/layout.tsx
View File

@ -43,7 +43,7 @@ export default async function AdminLayout({
tutorialEnabled={siteSettings.tutorialEnabled ?? false}
rankingEnabled={siteSettings.rankingEnabled ?? true}
/>
<div className="flex-1 pr-20">{children}</div>
<div className="flex-1 pl-16">{children}</div>
</div>
);
}

2
app/(chat)/layout.tsx
View File

@ -63,7 +63,7 @@ async function SidebarWrapper({ children }: { children: React.ReactNode }) {
tutorialEnabled={siteSettings.tutorialEnabled ?? false}
rankingEnabled={siteSettings.rankingEnabled ?? true}
/>
<div className="flex h-svh w-full overflow-hidden pr-20">
<div className="flex h-svh w-full overflow-hidden pl-16 [--sidebar-offset:4rem]">
<AppSidebar user={session?.user} />
<SidebarInset className="h-full">{children}</SidebarInset>
</div>

2
app/canvas/[id]/layout.tsx
View File

@ -59,7 +59,7 @@ async function CanvasLayoutWrapper({ children }: { children: React.ReactNode })
tutorialEnabled={siteSettings.tutorialEnabled ?? false}
rankingEnabled={siteSettings.rankingEnabled ?? true}
/>
<div className="h-full pr-20">
<div className="h-full pl-16">
{children}
</div>
</div>

14
components/top-navbar.tsx
View File

@ -140,8 +140,8 @@ export function TopNavbar({
};
const navItemBaseClass =
"flex h-14 w-14 flex-col items-center justify-center gap-1 rounded-xl text-white hover:bg-white/10 transition-colors";
const navLabelClass = "text-[10px] leading-none font-medium";
"flex h-12 w-12 flex-col items-center justify-center gap-1 rounded-xl text-gray-800 hover:bg-black/5 transition-colors dark:text-white dark:hover:bg-white/10";
const navLabelClass = "text-[10px] leading-none font-medium text-gray-700 dark:text-white/90";
// 打开图片编辑器 - 直接打开，不触发上传
const handleOpenImageEditor = () => {
@ -201,7 +201,7 @@ export function TopNavbar({
};
const navContent = (
<nav className="fixed right-0 top-0 bottom-0 z-[100] flex w-20 flex-col items-center bg-black/90 backdrop-blur-sm text-white border-l border-white/10 shadow-sm">
<nav className="fixed left-0 top-0 bottom-0 z-[100] flex w-16 flex-col items-center bg-white/90 backdrop-blur-sm text-gray-900 border-r border-gray-200 shadow-sm dark:bg-black/90 dark:text-white dark:border-white/10">
{/* 顶部：LOGO + 网站名称 */}
<a
href="/"
@ -238,7 +238,7 @@ export function TopNavbar({
<span className={navLabelClass}>{getShortLabel(toolbox1Name)}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
<DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
<div className="grid grid-cols-2 gap-2">
{customLinks
.filter(l => (l.toolboxGroup || 1) === 1)
@ -276,7 +276,7 @@ export function TopNavbar({
<span className={navLabelClass}>{getShortLabel(toolbox2Name)}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
<DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
<div className="grid grid-cols-2 gap-2">
{customLinks
.filter(l => l.toolboxGroup === 2)
@ -328,7 +328,7 @@ export function TopNavbar({
<span className={navLabelClass}>{getShortLabel("功能教程")}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="left" align="center" className="w-[320px] p-2">
<DropdownMenuContent side="right" align="center" className="w-[320px] p-2">
<div className="space-y-1 max-h-[400px] overflow-y-auto">
{tutorialVideos
.sort((a, b) => a.order - b.order)
@ -387,7 +387,7 @@ export function TopNavbar({
<span className={navLabelClass}>{getShortLabel("精选榜")}</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent side="left" align="center" className="w-[280px] p-3">
<DropdownMenuContent side="right" align="center" className="w-[280px] p-3">
<div className="flex items-center gap-2 mb-3 pb-2 border-b">
<Trophy className="h-5 w-5 text-orange-500" />
<span className="font-semibold">精选榜单 TOP5</span>

4
components/ui/sidebar.tsx
View File

@ -245,8 +245,8 @@ const Sidebar = React.forwardRef<
className={cn(
"fixed inset-y-0 z-10 hidden h-svh w-[var(--sidebar-width)] transition-[left,right,width] duration-200 ease-linear md:flex",
side === "left"
? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
? "left-[var(--sidebar-offset,0px)] group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-offset,0px)_-_var(--sidebar-width))]"
: "right-[var(--sidebar-offset,0px)] group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-offset,0px)_-_var(--sidebar-width))]",
// Adjust the padding for floating and inset variants.
variant === "floating" || variant === "inset"
? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"