refactor: update AppShell and sidebar components for improved design consistency
Removed unused utility functions from the AppShell component and updated the sidebar width to a fixed value for better layout control. Revised the UI design documentation to clarify the shared App Shell chrome specifications and ensure alignment with design standards. Enhanced the sidebar configuration to reflect the new width and styling guidelines.
This commit is contained in:
@@ -20,7 +20,7 @@ import {
|
||||
} from '@/lib/app-switcher-config'
|
||||
import { useAppSwitcherConfig } from '@/hooks/use-app-switcher'
|
||||
|
||||
/** Sidebar app switcher — same chrome as CFDM / vps-tracker. @see https://reui.io/preview/base/app-shell-12 */
|
||||
/** Sidebar app switcher — shared chrome etalon EvoBGP. @see https://reui.io/preview/base/app-shell-12 */
|
||||
export function AppSwitcher() {
|
||||
const { isMobile } = useSidebar()
|
||||
const { config, isLoading } = useAppSwitcherConfig()
|
||||
|
||||
@@ -38,7 +38,6 @@ import {
|
||||
} from '@evobgp/ui/components/breadcrumb'
|
||||
import { Separator } from '@evobgp/ui/components/separator'
|
||||
import { TooltipProvider } from '@evobgp/ui/components/tooltip'
|
||||
import { cn } from '@evobgp/ui/lib/utils'
|
||||
|
||||
import { Link, useRouterState } from '@tanstack/react-router'
|
||||
import type { ComponentType, CSSProperties, ReactNode } from 'react'
|
||||
@@ -122,7 +121,7 @@ const COMMAND_ITEMS: CommandPaletteItem[] = ALL_NAV_ITEMS.map((item) => ({
|
||||
}))
|
||||
|
||||
/**
|
||||
* Shared ops chrome — tokens match CFDM / vps-tracker.
|
||||
* Shared ops chrome etalon for CFDM / vps-tracker.
|
||||
* @see https://reui.io/preview/base/app-shell-12
|
||||
* @see docs/ui-design-contract.md — Shared App Shell chrome
|
||||
*/
|
||||
@@ -142,12 +141,6 @@ export function AppShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<TooltipProvider delay={0}>
|
||||
<SidebarProvider
|
||||
className={cn(
|
||||
'[--sidebar:color-mix(in_oklab,var(--color-sidebar)_60%,transparent)]',
|
||||
'[--sidebar-border:transparent]',
|
||||
'[--sidebar-accent:color-mix(in_oklab,var(--color-primary)_14%,transparent)]',
|
||||
'[--sidebar-accent-foreground:var(--color-primary)]',
|
||||
)}
|
||||
style={
|
||||
{
|
||||
'--sidebar-width': '240px',
|
||||
|
||||
Reference in New Issue
Block a user