projects/linker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated sidebar

Browse Source
This commit is contained in:
Taken
2025-06-26 20:25:07 +02:00
parent be221f3e1c
commit 9b377a83ec
3 changed files with 236 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
src/app/globals.css
View File

@@ -42,72 +42,150 @@
} }
:root { :root {
--radius: 0.625rem; --background: oklch(0.9689 0.009 314.7819);
--background: oklch(1 0 0); --foreground: oklch(0.3729 0.0306 259.7328);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0); --card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0); --card-foreground: oklch(0.3729 0.0306 259.7328);
--popover: oklch(1 0 0); --popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0); --popover-foreground: oklch(0.3729 0.0306 259.7328);
--primary: oklch(0.205 0 0); --primary: oklch(0.709 0.1592 293.5412);
--primary-foreground: oklch(0.985 0 0); --primary-foreground: oklch(1 0 0);
--secondary: oklch(0.97 0 0); --secondary: oklch(0.9073 0.053 306.0902);
--secondary-foreground: oklch(0.205 0 0); --secondary-foreground: oklch(0.4461 0.0263 256.8018);
--muted: oklch(0.97 0 0); --muted: oklch(0.9464 0.0327 307.1745);
--muted-foreground: oklch(0.556 0 0); --muted-foreground: oklch(0.551 0.0234 264.3637);
--accent: oklch(0.97 0 0); --accent: oklch(0.9376 0.026 321.9388);
--accent-foreground: oklch(0.205 0 0); --accent-foreground: oklch(0.3729 0.0306 259.7328);
--destructive: oklch(0.577 0.245 27.325); --destructive: oklch(0.8077 0.1035 19.5706);
--border: oklch(0.922 0 0); --destructive-foreground: oklch(1 0 0);
--input: oklch(0.922 0 0); --border: oklch(0.9073 0.053 306.0902);
--ring: oklch(0.708 0 0); --input: oklch(0.9073 0.053 306.0902);
--chart-1: oklch(0.646 0.222 41.116); --ring: oklch(0.709 0.1592 293.5412);
--chart-2: oklch(0.6 0.118 184.704); --chart-1: oklch(0.709 0.1592 293.5412);
--chart-3: oklch(0.398 0.07 227.392); --chart-2: oklch(0.6056 0.2189 292.7172);
--chart-4: oklch(0.828 0.189 84.429); --chart-3: oklch(0.5413 0.2466 293.009);
--chart-5: oklch(0.769 0.188 70.08); --chart-4: oklch(0.4907 0.2412 292.5809);
--sidebar: oklch(0.985 0 0); --chart-5: oklch(0.432 0.2106 292.7591);
--sidebar-foreground: oklch(0.145 0 0); --sidebar: oklch(0.9073 0.053 306.0902);
--sidebar-primary: oklch(0.205 0 0); --sidebar-foreground: oklch(0.3729 0.0306 259.7328);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.709 0.1592 293.5412);
--sidebar-accent: oklch(0.97 0 0); --sidebar-primary-foreground: oklch(1 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-accent: oklch(0.9376 0.026 321.9388);
--sidebar-border: oklch(0.922 0 0); --sidebar-accent-foreground: oklch(0.3729 0.0306 259.7328);
--sidebar-ring: oklch(0.708 0 0); --sidebar-border: oklch(0.9073 0.053 306.0902);
--sidebar-ring: oklch(0.709 0.1592 293.5412);
--radius: 0.55rem;
--shadow-2xs: 0px 8px 16px -4px hsl(0 0% 0% / 0.1);
--shadow-xs: 0px 8px 16px -4px hsl(0 0% 0% / 0.1);
--shadow-sm: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 1px 2px -5px hsl(0 0% 0% / 0.2);
--shadow: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 1px 2px -5px hsl(0 0% 0% / 0.2);
--shadow-md: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 2px 4px -5px hsl(0 0% 0% / 0.2);
--shadow-lg: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 4px 6px -5px hsl(0 0% 0% / 0.2);
--shadow-xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 8px 10px -5px hsl(0 0% 0% / 0.2);
--shadow-2xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.5);
} }
.dark { .dark {
--background: oklch(0.145 0 0); --background: oklch(0.2161 0.0061 56.0434);
--foreground: oklch(0.985 0 0); --foreground: oklch(0.9299 0.0334 272.7879);
--card: oklch(0.205 0 0); --card: oklch(0.2805 0.0309 307.2326);
--card-foreground: oklch(0.985 0 0); --card-foreground: oklch(0.9299 0.0334 272.7879);
--popover: oklch(0.205 0 0); --popover: oklch(0.2805 0.0309 307.2326);
--popover-foreground: oklch(0.985 0 0); --popover-foreground: oklch(0.9299 0.0334 272.7879);
--primary: oklch(0.922 0 0); --primary: oklch(0.7874 0.1179 295.7538);
--primary-foreground: oklch(0.205 0 0); --primary-foreground: oklch(0.2161 0.0061 56.0434);
--secondary: oklch(0.269 0 0); --secondary: oklch(0.3416 0.0444 308.8496);
--secondary-foreground: oklch(0.985 0 0); --secondary-foreground: oklch(0.8717 0.0093 258.3382);
--muted: oklch(0.269 0 0); --muted: oklch(0.2805 0.0309 307.2326);
--muted-foreground: oklch(0.708 0 0); --muted-foreground: oklch(0.7137 0.0192 261.3246);
--accent: oklch(0.269 0 0); --accent: oklch(0.3858 0.0509 304.6383);
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.8717 0.0093 258.3382);
--destructive: oklch(0.704 0.191 22.216); --destructive: oklch(0.8077 0.1035 19.5706);
--border: oklch(1 0 0 / 10%); --destructive-foreground: oklch(0.2161 0.0061 56.0434);
--input: oklch(1 0 0 / 15%); --border: oklch(0.3416 0.0444 308.8496);
--ring: oklch(0.556 0 0); --input: oklch(0.3416 0.0444 308.8496);
--chart-1: oklch(0.488 0.243 264.376); --ring: oklch(0.7874 0.1179 295.7538);
--chart-2: oklch(0.696 0.17 162.48); --chart-1: oklch(0.7874 0.1179 295.7538);
--chart-3: oklch(0.769 0.188 70.08); --chart-2: oklch(0.709 0.1592 293.5412);
--chart-4: oklch(0.627 0.265 303.9); --chart-3: oklch(0.6056 0.2189 292.7172);
--chart-5: oklch(0.645 0.246 16.439); --chart-4: oklch(0.5413 0.2466 293.009);
--sidebar: oklch(0.205 0 0); --chart-5: oklch(0.4907 0.2412 292.5809);
--sidebar-foreground: oklch(0.985 0 0); --sidebar: oklch(0.3416 0.0444 308.8496);
--sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-foreground: oklch(0.9299 0.0334 272.7879);
--sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.7874 0.1179 295.7538);
--sidebar-accent: oklch(0.269 0 0); --sidebar-primary-foreground: oklch(0.2161 0.0061 56.0434);
--sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.3858 0.0509 304.6383);
--sidebar-border: oklch(1 0 0 / 10%); --sidebar-accent-foreground: oklch(0.8717 0.0093 258.3382);
--sidebar-ring: oklch(0.556 0 0); --sidebar-border: oklch(0.3416 0.0444 308.8496);
--sidebar-ring: oklch(0.7874 0.1179 295.7538);
--radius: 0.55rem;
--shadow-2xs: 0px 8px 16px -4px hsl(0 0% 0% / 0.1);
--shadow-xs: 0px 8px 16px -4px hsl(0 0% 0% / 0.1);
--shadow-sm: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 1px 2px -5px hsl(0 0% 0% / 0.2);
--shadow: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 1px 2px -5px hsl(0 0% 0% / 0.2);
--shadow-md: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 2px 4px -5px hsl(0 0% 0% / 0.2);
--shadow-lg: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 4px 6px -5px hsl(0 0% 0% / 0.2);
--shadow-xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.2),
0px 8px 10px -5px hsl(0 0% 0% / 0.2);
--shadow-2xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.5);
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
} }
@layer base { @layer base {

95
src/components/dashboard/sidebar-theme-toggle.tsx Normal file
View File

@@ -0,0 +1,95 @@
"use client"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"
import { ChevronDown, Monitor, Moon, Sun } from "lucide-react"
import { useTheme } from "next-themes"
import { useEffect, useState } from "react"
export function SidebarThemeToggle() {
const { theme, setTheme } = useTheme()
const [mounted, setMounted] = useState(false)
// Prevent hydration mismatch
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) {
return (
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton disabled tooltip="Theme">
<Sun className="h-4 w-4" />
<span>Theme</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
)
}
const getIcon = () => {
switch (theme) {
case "light":
return <Sun className="h-4 w-4" />
case "dark":
return <Moon className="h-4 w-4" />
default:
return <Monitor className="h-4 w-4" />
}
}
const getThemeLabel = () => {
switch (theme) {
case "light":
return "Light"
case "dark":
return "Dark"
default:
return "System"
}
}
const cycleTheme = () => {
if (theme === "light") {
setTheme("dark")
} else if (theme === "dark") {
setTheme("system")
} else {
setTheme("light")
}
}
return (
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<SidebarMenuButton
tooltip={`Theme: ${getThemeLabel()}`}
className="pl-4"
>
{getIcon()}
<span>Theme ({getThemeLabel()})</span>
<ChevronDown className="ml-auto h-4 w-4" />
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="top">
<DropdownMenuItem onClick={() => setTheme("light")}>
<Sun className="h-4 w-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<Moon className="h-4 w-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<Monitor className="h-4 w-4 mr-2" />
System
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</SidebarMenuItem>
</SidebarMenu>
)
}

2
src/components/dashboard/sidebar.tsx
View File

@@ -17,6 +17,7 @@ import {
SidebarMenuItem, SidebarMenuItem,
useSidebar useSidebar
} from "@/components/ui/sidebar" } from "@/components/ui/sidebar"
import { SidebarThemeToggle } from "./sidebar-theme-toggle"
import { SidebarUserDropdown } from "./sidebar-user-dropdown" import { SidebarUserDropdown } from "./sidebar-user-dropdown"
const items = [ const items = [
@@ -82,6 +83,7 @@ export function DashboardSidebar() {
</SidebarGroup> </SidebarGroup>
</SidebarContent> </SidebarContent>
<SidebarFooter> <SidebarFooter>
<SidebarThemeToggle />
<SidebarUserDropdown /> <SidebarUserDropdown />
</SidebarFooter> </SidebarFooter>
</Sidebar> </Sidebar>