feat: implement palette toggle component and update layout for dynamic theme support
This commit is contained in:
mlogclub
@@ -33,7 +33,7 @@ export default function DashboardLayout({
|
||||
|
||||
if (!ready || !session) {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f4f6_0%,#fff7ed_45%,#ecfeff_100%)] p-6">
|
||||
<div className="flex min-h-screen items-center justify-center bg-[linear-gradient(160deg,#f3f1e8_0%,#f8faf5_46%,#e8f7f2_100%)] p-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary">
|
||||
<Loader2Icon className="size-5 animate-spin" />
|
||||
@@ -61,7 +61,7 @@ export default function DashboardLayout({
|
||||
>
|
||||
<NotificationProvider>
|
||||
<AppSidebar variant="inset" />
|
||||
<SidebarInset>
|
||||
<SidebarInset className="overflow-hidden border border-border/65 shadow-[0_18px_50px_rgba(20,83,69,0.09)] dark:shadow-none">
|
||||
<SiteHeader />
|
||||
<div className="@container/main flex min-h-0 flex-1 flex-col gap-2 overflow-auto">
|
||||
{children}
|
||||
|
||||
+197
-61
@@ -49,71 +49,207 @@
|
||||
|
||||
:root {
|
||||
--radius: 0.65rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.488 0.243 264.376);
|
||||
--primary-foreground: oklch(0.97 0.014 254.604);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.809 0.105 251.813);
|
||||
--chart-2: oklch(0.623 0.214 259.815);
|
||||
--chart-3: oklch(0.546 0.245 262.881);
|
||||
--chart-4: oklch(0.488 0.243 264.376);
|
||||
--chart-5: oklch(0.424 0.199 265.638);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.546 0.245 262.881);
|
||||
--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
--background: oklch(0.973 0.011 112);
|
||||
--foreground: oklch(0.22 0.021 210);
|
||||
--card: oklch(0.996 0.004 105);
|
||||
--card-foreground: oklch(0.22 0.021 210);
|
||||
--popover: oklch(0.996 0.004 105);
|
||||
--popover-foreground: oklch(0.22 0.021 210);
|
||||
--primary: oklch(0.475 0.118 178);
|
||||
--primary-foreground: oklch(0.985 0.012 170);
|
||||
--secondary: oklch(0.94 0.018 124);
|
||||
--secondary-foreground: oklch(0.255 0.035 178);
|
||||
--muted: oklch(0.942 0.012 115);
|
||||
--muted-foreground: oklch(0.49 0.026 205);
|
||||
--accent: oklch(0.91 0.028 169);
|
||||
--accent-foreground: oklch(0.245 0.045 178);
|
||||
--destructive: oklch(0.59 0.225 25);
|
||||
--border: oklch(0.872 0.018 116);
|
||||
--input: oklch(0.872 0.018 116);
|
||||
--ring: oklch(0.56 0.115 178);
|
||||
--chart-1: oklch(0.52 0.13 178);
|
||||
--chart-2: oklch(0.61 0.14 220);
|
||||
--chart-3: oklch(0.72 0.15 78);
|
||||
--chart-4: oklch(0.62 0.15 330);
|
||||
--chart-5: oklch(0.58 0.12 262);
|
||||
--sidebar: oklch(0.925 0.018 118);
|
||||
--sidebar-foreground: oklch(0.245 0.03 190);
|
||||
--sidebar-primary: oklch(0.475 0.118 178);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.012 170);
|
||||
--sidebar-accent: oklch(0.89 0.032 156);
|
||||
--sidebar-accent-foreground: oklch(0.235 0.048 178);
|
||||
--sidebar-border: oklch(0.835 0.022 118);
|
||||
--sidebar-ring: oklch(0.56 0.115 178);
|
||||
}
|
||||
|
||||
:root[data-palette="blue"] {
|
||||
--background: oklch(0.982 0.007 250);
|
||||
--foreground: oklch(0.205 0.018 255);
|
||||
--card: oklch(0.998 0.002 250);
|
||||
--card-foreground: oklch(0.205 0.018 255);
|
||||
--popover: oklch(0.998 0.002 250);
|
||||
--popover-foreground: oklch(0.205 0.018 255);
|
||||
--primary: oklch(0.548 0.19 257);
|
||||
--primary-foreground: oklch(0.985 0.006 248);
|
||||
--secondary: oklch(0.948 0.013 250);
|
||||
--secondary-foreground: oklch(0.245 0.02 252);
|
||||
--muted: oklch(0.95 0.01 250);
|
||||
--muted-foreground: oklch(0.49 0.024 245);
|
||||
--accent: oklch(0.922 0.026 255);
|
||||
--accent-foreground: oklch(0.255 0.044 254);
|
||||
--destructive: oklch(0.59 0.225 25);
|
||||
--border: oklch(0.888 0.014 250);
|
||||
--input: oklch(0.888 0.014 250);
|
||||
--ring: oklch(0.61 0.15 252);
|
||||
--chart-1: oklch(0.59 0.18 255);
|
||||
--chart-2: oklch(0.62 0.13 178);
|
||||
--chart-3: oklch(0.72 0.16 82);
|
||||
--chart-4: oklch(0.61 0.17 333);
|
||||
--chart-5: oklch(0.56 0.13 285);
|
||||
--sidebar: oklch(0.94 0.016 250);
|
||||
--sidebar-foreground: oklch(0.245 0.024 252);
|
||||
--sidebar-primary: oklch(0.548 0.19 257);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.006 248);
|
||||
--sidebar-accent: oklch(0.908 0.025 252);
|
||||
--sidebar-accent-foreground: oklch(0.245 0.038 254);
|
||||
--sidebar-border: oklch(0.858 0.018 250);
|
||||
--sidebar-ring: oklch(0.61 0.15 252);
|
||||
}
|
||||
|
||||
:root[data-palette="gray"] {
|
||||
--background: oklch(0.974 0.006 170);
|
||||
--foreground: oklch(0.205 0.018 255);
|
||||
--card: oklch(0.998 0.001 106);
|
||||
--card-foreground: oklch(0.205 0.018 255);
|
||||
--popover: oklch(0.998 0.001 106);
|
||||
--popover-foreground: oklch(0.205 0.018 255);
|
||||
--primary: oklch(0.538 0.183 257);
|
||||
--primary-foreground: oklch(0.985 0.006 248);
|
||||
--secondary: oklch(0.944 0.011 175);
|
||||
--secondary-foreground: oklch(0.245 0.018 250);
|
||||
--muted: oklch(0.948 0.008 180);
|
||||
--muted-foreground: oklch(0.49 0.024 245);
|
||||
--accent: oklch(0.925 0.018 218);
|
||||
--accent-foreground: oklch(0.255 0.033 250);
|
||||
--destructive: oklch(0.59 0.225 25);
|
||||
--border: oklch(0.886 0.012 178);
|
||||
--input: oklch(0.886 0.012 178);
|
||||
--ring: oklch(0.61 0.15 252);
|
||||
--chart-1: oklch(0.59 0.18 255);
|
||||
--chart-2: oklch(0.62 0.13 178);
|
||||
--chart-3: oklch(0.72 0.16 82);
|
||||
--chart-4: oklch(0.61 0.17 333);
|
||||
--chart-5: oklch(0.56 0.13 285);
|
||||
--sidebar: oklch(0.94 0.011 170);
|
||||
--sidebar-foreground: oklch(0.255 0.022 250);
|
||||
--sidebar-primary: oklch(0.538 0.183 257);
|
||||
--sidebar-primary-foreground: oklch(0.985 0.006 248);
|
||||
--sidebar-accent: oklch(0.904 0.017 190);
|
||||
--sidebar-accent-foreground: oklch(0.245 0.028 250);
|
||||
--sidebar-border: oklch(0.86 0.014 176);
|
||||
--sidebar-ring: oklch(0.61 0.15 252);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.488 0.243 264.376);
|
||||
--primary-foreground: oklch(0.97 0.014 254.604);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--background: oklch(0.18 0.016 190);
|
||||
--foreground: oklch(0.94 0.009 155);
|
||||
--card: oklch(0.225 0.018 190);
|
||||
--card-foreground: oklch(0.94 0.009 155);
|
||||
--popover: oklch(0.225 0.018 190);
|
||||
--popover-foreground: oklch(0.94 0.009 155);
|
||||
--primary: oklch(0.67 0.13 174);
|
||||
--primary-foreground: oklch(0.16 0.024 185);
|
||||
--secondary: oklch(0.285 0.019 185);
|
||||
--secondary-foreground: oklch(0.94 0.009 155);
|
||||
--muted: oklch(0.285 0.019 185);
|
||||
--muted-foreground: oklch(0.72 0.02 165);
|
||||
--accent: oklch(0.33 0.032 174);
|
||||
--accent-foreground: oklch(0.955 0.011 155);
|
||||
--destructive: oklch(0.68 0.19 25);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.809 0.105 251.813);
|
||||
--chart-2: oklch(0.623 0.214 259.815);
|
||||
--chart-3: oklch(0.546 0.245 262.881);
|
||||
--chart-4: oklch(0.488 0.243 264.376);
|
||||
--chart-5: oklch(0.424 0.199 265.638);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.623 0.214 259.815);
|
||||
--sidebar-primary-foreground: oklch(0.97 0.014 254.604);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.67 0.13 174);
|
||||
--chart-1: oklch(0.68 0.13 174);
|
||||
--chart-2: oklch(0.68 0.13 220);
|
||||
--chart-3: oklch(0.75 0.15 78);
|
||||
--chart-4: oklch(0.68 0.16 333);
|
||||
--chart-5: oklch(0.67 0.13 262);
|
||||
--sidebar: oklch(0.16 0.019 185);
|
||||
--sidebar-foreground: oklch(0.93 0.01 155);
|
||||
--sidebar-primary: oklch(0.67 0.13 174);
|
||||
--sidebar-primary-foreground: oklch(0.16 0.024 185);
|
||||
--sidebar-accent: oklch(0.27 0.028 178);
|
||||
--sidebar-accent-foreground: oklch(0.955 0.011 155);
|
||||
--sidebar-border: oklch(1 0 0 / 9%);
|
||||
--sidebar-ring: oklch(0.67 0.13 174);
|
||||
}
|
||||
|
||||
.dark[data-palette="blue"] {
|
||||
--background: oklch(0.178 0.012 245);
|
||||
--foreground: oklch(0.948 0.006 230);
|
||||
--card: oklch(0.226 0.014 245);
|
||||
--card-foreground: oklch(0.948 0.006 230);
|
||||
--popover: oklch(0.226 0.014 245);
|
||||
--popover-foreground: oklch(0.948 0.006 230);
|
||||
--primary: oklch(0.66 0.16 252);
|
||||
--primary-foreground: oklch(0.168 0.015 250);
|
||||
--secondary: oklch(0.285 0.014 245);
|
||||
--secondary-foreground: oklch(0.94 0.006 230);
|
||||
--muted: oklch(0.285 0.014 245);
|
||||
--muted-foreground: oklch(0.72 0.015 238);
|
||||
--accent: oklch(0.32 0.022 225);
|
||||
--accent-foreground: oklch(0.955 0.006 230);
|
||||
--destructive: oklch(0.68 0.19 25);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.66 0.16 252);
|
||||
--chart-1: oklch(0.69 0.15 252);
|
||||
--chart-2: oklch(0.68 0.12 178);
|
||||
--chart-3: oklch(0.75 0.15 82);
|
||||
--chart-4: oklch(0.68 0.16 333);
|
||||
--chart-5: oklch(0.67 0.13 285);
|
||||
--sidebar: oklch(0.158 0.012 248);
|
||||
--sidebar-foreground: oklch(0.93 0.006 230);
|
||||
--sidebar-primary: oklch(0.66 0.16 252);
|
||||
--sidebar-primary-foreground: oklch(0.168 0.015 250);
|
||||
--sidebar-accent: oklch(0.255 0.017 245);
|
||||
--sidebar-accent-foreground: oklch(0.955 0.006 230);
|
||||
--sidebar-border: oklch(1 0 0 / 9%);
|
||||
--sidebar-ring: oklch(0.66 0.16 252);
|
||||
}
|
||||
|
||||
.dark[data-palette="gray"] {
|
||||
--background: oklch(0.178 0.012 245);
|
||||
--foreground: oklch(0.948 0.006 230);
|
||||
--card: oklch(0.226 0.014 245);
|
||||
--card-foreground: oklch(0.948 0.006 230);
|
||||
--popover: oklch(0.226 0.014 245);
|
||||
--popover-foreground: oklch(0.948 0.006 230);
|
||||
--primary: oklch(0.66 0.16 252);
|
||||
--primary-foreground: oklch(0.168 0.015 250);
|
||||
--secondary: oklch(0.285 0.014 245);
|
||||
--secondary-foreground: oklch(0.94 0.006 230);
|
||||
--muted: oklch(0.285 0.014 245);
|
||||
--muted-foreground: oklch(0.72 0.015 238);
|
||||
--accent: oklch(0.32 0.022 225);
|
||||
--accent-foreground: oklch(0.955 0.006 230);
|
||||
--destructive: oklch(0.68 0.19 25);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 14%);
|
||||
--ring: oklch(0.66 0.16 252);
|
||||
--chart-1: oklch(0.69 0.15 252);
|
||||
--chart-2: oklch(0.68 0.12 178);
|
||||
--chart-3: oklch(0.75 0.15 82);
|
||||
--chart-4: oklch(0.68 0.16 333);
|
||||
--chart-5: oklch(0.67 0.13 285);
|
||||
--sidebar: oklch(0.158 0.012 248);
|
||||
--sidebar-foreground: oklch(0.93 0.006 230);
|
||||
--sidebar-primary: oklch(0.66 0.16 252);
|
||||
--sidebar-primary-foreground: oklch(0.168 0.015 250);
|
||||
--sidebar-accent: oklch(0.255 0.017 245);
|
||||
--sidebar-accent-foreground: oklch(0.955 0.006 230);
|
||||
--sidebar-border: oklch(1 0 0 / 9%);
|
||||
--sidebar-ring: oklch(0.66 0.16 252);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
|
||||
@@ -22,6 +22,15 @@ const geistMono = Geist_Mono({
|
||||
subsets: ["latin"],
|
||||
})
|
||||
|
||||
const paletteScript = `
|
||||
try {
|
||||
var palette = window.localStorage.getItem("dashboard_palette");
|
||||
document.documentElement.dataset.palette = palette === "blue" || palette === "gray" ? palette : "green";
|
||||
} catch (_) {
|
||||
document.documentElement.dataset.palette = "green";
|
||||
}
|
||||
`
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "AI 客服后台管理系统",
|
||||
description: "AI 客服后台管理系统",
|
||||
@@ -37,6 +46,7 @@ export default function RootLayout({
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<script dangerouslySetInnerHTML={{ __html: paletteScript }} />
|
||||
<ThemeProvider>
|
||||
<AuthProvider>
|
||||
<ConfirmProvider>
|
||||
|
||||
@@ -29,7 +29,7 @@ export function DashboardToolbar({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col gap-3 rounded-lg border bg-card p-3 lg:flex-row lg:items-center lg:justify-between",
|
||||
"flex flex-col gap-3 rounded-lg border border-border/70 bg-card/95 p-3 shadow-[0_1px_2px_rgba(15,23,42,0.04)] lg:flex-row lg:items-center lg:justify-between dark:shadow-none",
|
||||
className
|
||||
)}
|
||||
>
|
||||
@@ -54,7 +54,7 @@ export function DashboardTableShell({
|
||||
}) {
|
||||
return (
|
||||
<div className={cn("space-y-4", className)}>
|
||||
<div className="overflow-hidden rounded-lg border bg-card text-card-foreground">
|
||||
<div className="overflow-hidden rounded-lg border border-border/70 bg-card text-card-foreground shadow-[0_1px_2px_rgba(15,23,42,0.035)] dark:shadow-none">
|
||||
{children}
|
||||
</div>
|
||||
{pagination ? <div>{pagination}</div> : null}
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
"use client"
|
||||
|
||||
import { useEffect, useState } from "react"
|
||||
import { DropletsIcon, PaletteIcon } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuRadioGroup,
|
||||
DropdownMenuRadioItem,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
|
||||
type PaletteMode = "blue" | "green" | "gray"
|
||||
|
||||
const PALETTE_STORAGE_KEY = "dashboard_palette"
|
||||
const DEFAULT_PALETTE: PaletteMode = "green"
|
||||
|
||||
const paletteOptions: Array<{
|
||||
value: PaletteMode
|
||||
label: string
|
||||
swatch: string
|
||||
}> = [
|
||||
{
|
||||
value: "green",
|
||||
label: "温润服务绿",
|
||||
swatch: "bg-teal-700",
|
||||
},
|
||||
{
|
||||
value: "gray",
|
||||
label: "中性精密灰",
|
||||
swatch: "bg-slate-500",
|
||||
},
|
||||
{
|
||||
value: "blue",
|
||||
label: "清透科技蓝",
|
||||
swatch: "bg-blue-600",
|
||||
},
|
||||
]
|
||||
|
||||
function readPalette(): PaletteMode {
|
||||
if (typeof window === "undefined") {
|
||||
return DEFAULT_PALETTE
|
||||
}
|
||||
|
||||
const stored = window.localStorage.getItem(PALETTE_STORAGE_KEY)
|
||||
return stored === "blue" || stored === "green" || stored === "gray"
|
||||
? stored
|
||||
: DEFAULT_PALETTE
|
||||
}
|
||||
|
||||
function applyPalette(value: PaletteMode) {
|
||||
document.documentElement.dataset.palette = value
|
||||
window.localStorage.setItem(PALETTE_STORAGE_KEY, value)
|
||||
}
|
||||
|
||||
export function PaletteToggle() {
|
||||
const [palette, setPalette] = useState<PaletteMode>(DEFAULT_PALETTE)
|
||||
|
||||
useEffect(() => {
|
||||
const storedPalette = readPalette()
|
||||
setPalette(storedPalette)
|
||||
applyPalette(storedPalette)
|
||||
}, [])
|
||||
|
||||
function handleChange(value: string) {
|
||||
const nextPalette: PaletteMode =
|
||||
value === "blue" || value === "gray" ? value : "green"
|
||||
setPalette(nextPalette)
|
||||
applyPalette(nextPalette)
|
||||
}
|
||||
|
||||
const ActiveIcon = palette === "green" ? DropletsIcon : PaletteIcon
|
||||
|
||||
return (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger
|
||||
render={<Button variant="outline" size="sm" />}
|
||||
aria-label="切换主题色"
|
||||
>
|
||||
<ActiveIcon />
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="w-52 min-w-52">
|
||||
<DropdownMenuRadioGroup value={palette} onValueChange={handleChange}>
|
||||
{paletteOptions.map((option) => (
|
||||
<DropdownMenuRadioItem key={option.value} value={option.value}>
|
||||
<span className={`size-2.5 rounded-full ${option.swatch}`} />
|
||||
<span className="flex-1">{option.label}</span>
|
||||
</DropdownMenuRadioItem>
|
||||
))}
|
||||
</DropdownMenuRadioGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import { usePathname } from "next/navigation"
|
||||
import { RealtimeConnectionStatus } from "@/components/realtime-connection-status"
|
||||
import { getPageTitle } from "@/lib/navigation"
|
||||
import { useAgentConversationsStore } from "@/lib/stores/agent-conversations"
|
||||
import { PaletteToggle } from "@/components/palette-toggle"
|
||||
import { ThemeToggle } from "@/components/theme-toggle"
|
||||
import {
|
||||
Breadcrumb,
|
||||
@@ -50,7 +51,7 @@ export function SiteHeader() {
|
||||
}, [isMobile, open])
|
||||
|
||||
return (
|
||||
<header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
|
||||
<header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b border-border/70 bg-background/82 backdrop-blur supports-[backdrop-filter]:bg-background/72 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
|
||||
<div className="flex w-full items-center justify-between gap-3 px-4 lg:px-6">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SidebarTrigger className="-ml-1" />
|
||||
@@ -73,7 +74,8 @@ export function SiteHeader() {
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-end gap-3">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
<PaletteToggle />
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user