versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Reimplement Notes

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-11-30 02:19:32 +01:00
parent 9ced2c98e4
commit d29f181000
No known key found for this signature in database
21 changed files with 335 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/sidebars/sidebar.vue
View file

@ -121,7 +121,7 @@ const instance = useInstance();
<SidebarHeader>
<SidebarMenu>
<SidebarMenuItem>
<DropdownMenu>
<NuxtLink href="/">
<SidebarMenuButton size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
<Avatar shape="square" class="size-8">
@ -135,7 +135,7 @@ const instance = useInstance();
</div>
<!-- <ChevronsUpDown class="ml-auto" /> -->
</SidebarMenuButton>
</DropdownMenu>
</NuxtLink>
</SidebarMenuItem>
</SidebarMenu>
</SidebarHeader>
@ -180,12 +180,6 @@ const instance = useInstance();
</NuxtLink>
</SidebarMenuButton>
</SidebarMenuItem>
<SidebarMenuItem>
<SidebarMenuButton class="text-sidebar-foreground/70">
<MoreHorizontal class="text-sidebar-foreground/70" />
<span>More</span>
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
</SidebarGroup>
</SidebarContent>
@ -270,7 +264,7 @@ const instance = useInstance();
</Breadcrumb>
</div>
</header>
<div class="flex flex-1 flex-col gap-4 pt-0 overflow-auto">
<div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto">
<slot />
</div>
</SidebarInset>

21
components/sidebars/theme-switcher.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { Moon, Sun } from "lucide-vue-next";
import { Moon, Sun, Wrench } from "lucide-vue-next";
import { Button } from "../ui/button";
import {
DropdownMenu,
@ -9,25 +9,34 @@ import {
} from "../ui/dropdown-menu";
const colorMode = useColorMode();
const themeNames = {
light: "Light",
dark: "Dark",
system: "System",
} as Record<string, string>;
</script>
<template>
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button variant="ghost">
<Sun class="size-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon class="absolute size-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
<span class="sr-only">Toggle theme</span>
<Button variant="outline" class="w-full justify-start">
<Sun class="size-[1.2rem] scale-100 transition-all dark:scale-0 dark:hidden inline" />
<Moon class="size-[1.2rem] scale-0 transition-all dark:scale-100 hidden dark:inline" />
{{ themeNames[colorMode.preference] }}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent align="start" >
<DropdownMenuItem @click="colorMode.preference = 'light'">
<Sun class="size-4 mr-2" />
Light
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'dark'">
<Moon class="size-4 mr-2" />
Dark
</DropdownMenuItem>
<DropdownMenuItem @click="colorMode.preference = 'system'">
<Wrench class="size-4 mr-2" />
System
</DropdownMenuItem>
</DropdownMenuContent>