dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance AppSidebar: Update sidebar button to display "Zoë" with new styling and icon

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-09 21:56:35 +01:00
parent eb1413322f
commit c73aaca45a
3 changed files with 77 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/app-icon.svg" type="image/svg+xml" />
<title>React Flow + shadcn Canvas</title> <title>React Flow + shadcn Canvas</title>
</head> </head>
<body> <body>

58
frontend/public/app-icon.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

22
frontend/src/app/platform/AppSidebar.tsx
View File

@@ -52,11 +52,25 @@ export function AppSidebar({
<SidebarHeader> <SidebarHeader>
<SidebarMenu> <SidebarMenu>
<SidebarMenuItem> <SidebarMenuItem>
<SidebarMenuButton size="lg" tooltip="Zui" className="font-semibold"> <SidebarMenuButton size="lg" tooltip="Zoë" className="font-semibold font-serif">
<span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground text-xs"> <span className="flex size-8 min-w-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground dark:bg-white dark:text-black">
Zo <span
className="size-6 shrink-0 rounded-[2px] opacity-90"
style={{
maskImage: 'url(/app-icon.svg)',
maskRepeat: 'no-repeat',
maskPosition: 'center',
maskSize: 'contain',
WebkitMaskImage: 'url(/app-icon.svg)',
WebkitMaskRepeat: 'no-repeat',
WebkitMaskPosition: 'center',
WebkitMaskSize: 'contain',
backgroundColor: 'currentColor',
}}
aria-hidden
/>
</span> </span>
<span className="group-data-[collapsible=icon]:hidden">Zui</span> <span className="font-serif group-data-[collapsible=icon]:hidden uppercase tracking-wide">ZOË</span>
</SidebarMenuButton> </SidebarMenuButton>
</SidebarMenuItem> </SidebarMenuItem>
</SidebarMenu> </SidebarMenu>