Project import from github
This commit is contained in:
commit
0add58254d
GPG key ID:
6CDB37A4AD2C610C
179 changed files with 23756 additions and 0 deletions
43
app/layouts/Default.vue
Normal file
43
app/layouts/Default.vue
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<script setup lang="ts">
|
||||
import { useAuthStore } from "~/stores/auth";
|
||||
|
||||
import DefaultSidebar from "~/layouts/default/Sidebar.vue";
|
||||
import DefaultBreadcrumb from "~/layouts/default/Breadcrumb.vue";
|
||||
|
||||
import { SidebarInset, SidebarProvider, SidebarTrigger } from "~/components/ui/sidebar";
|
||||
|
||||
import { Separator } from "~/components/ui/separator";
|
||||
|
||||
import { useRuntimeConfig } from "#app";
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
const config = useRuntimeConfig();
|
||||
|
||||
const authStore = useAuthStore();
|
||||
await authStore.init();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<SidebarProvider>
|
||||
<DefaultSidebar :user="authStore.user" />
|
||||
<SidebarInset>
|
||||
<header class="flex h-12 shrink-0 items-center gap-2 border-b px-4">
|
||||
<SidebarTrigger class="-ml-1" />
|
||||
<Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
|
||||
<DefaultBreadcrumb />
|
||||
</header>
|
||||
<main class="flex flex-1 flex-col gap-4 p-4">
|
||||
<slot />
|
||||
</main>
|
||||
<footer class="flex h-12 shrink-0 items-center gap-2 border-b px-4" data-testid="footer">
|
||||
<div v-if="currentYear === 2025" class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
|
||||
Glowing Fiesta 2025 <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
|
||||
</div>
|
||||
<div v-else class="bg-muted/50 flex-1 rounded-xl p-2 text-center">
|
||||
Glowing Fiesta 2025 - {{ currentYear }} <span class="text-muted-foreground">({{ config.public.appVersion }})</span>
|
||||
</div>
|
||||
</footer>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
</template>
|
||||
35
app/layouts/default/Breadcrumb.vue
Normal file
35
app/layouts/default/Breadcrumb.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "~/components/ui/breadcrumb";
|
||||
|
||||
import { useBreadcrumbStore } from "~/stores/breadcrumbs";
|
||||
const breadcrumbStore = useBreadcrumbStore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<template v-for="i in breadcrumbStore.items.length - 1" :key="i">
|
||||
<BreadcrumbItem class="hidden md:block">
|
||||
<BreadcrumbLink :href="breadcrumbStore.items[i - 1]?.to || ''">
|
||||
{{ breadcrumbStore.items[i - 1]?.label }}
|
||||
</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator class="hidden md:block" />
|
||||
</template>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>
|
||||
{{ breadcrumbStore.items[breadcrumbStore.items.length - 1]?.label }}
|
||||
</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
153
app/layouts/default/Sidebar.vue
Normal file
153
app/layouts/default/Sidebar.vue
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { BookOpen, ChevronRight, HandCoins, Settings2, SquareTerminal } from "lucide-vue-next";
|
||||
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarGroup,
|
||||
SidebarHeader,
|
||||
SidebarMenu,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarRail,
|
||||
SidebarMenuSub,
|
||||
SidebarMenuSubButton,
|
||||
SidebarMenuSubItem,
|
||||
type SidebarProps,
|
||||
} from "~/components/ui/sidebar";
|
||||
|
||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
|
||||
|
||||
import AppSidebarFooter from "~/layouts/default/SidebarFooter.vue";
|
||||
|
||||
import type { User } from "better-auth";
|
||||
|
||||
const data = {
|
||||
user: {
|
||||
name: "Liviu",
|
||||
email: "x.liviu@gmail.com",
|
||||
avatar: "https://git.burcusel.nl/avatars/bcc51c59d08174c798ba7db59631df6cb820e042679af9098cc03ef68330f486?size=200",
|
||||
},
|
||||
navMain: [
|
||||
{
|
||||
title: "Playground",
|
||||
url: "#",
|
||||
icon: SquareTerminal,
|
||||
isActive: true,
|
||||
items: [
|
||||
{ title: "History", url: "#" },
|
||||
{ title: "Starred", url: "#" },
|
||||
{ title: "Settings", url: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Documentation",
|
||||
url: "#",
|
||||
icon: BookOpen,
|
||||
isActive: true,
|
||||
items: [
|
||||
{ title: "Introduction", url: "#" },
|
||||
{ title: "Get Started", url: "#" },
|
||||
{ title: "Tutorials", url: "#" },
|
||||
{ title: "Changelog", url: "#" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Settings",
|
||||
url: "#",
|
||||
icon: Settings2,
|
||||
isActive: true,
|
||||
items: [
|
||||
{ title: "General", url: "#" },
|
||||
{ title: "Billing", url: "#" },
|
||||
{ title: "Limits", url: "#" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
interface NavItem {
|
||||
title: string;
|
||||
url: string;
|
||||
icon?: any;
|
||||
isActive?: boolean;
|
||||
items?: { title: string; url: string }[];
|
||||
}
|
||||
|
||||
interface SidebarLayoutProps extends /* @vue-ignore */ SidebarProps {
|
||||
navItems?: NavItem[];
|
||||
user?: User | null | undefined;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<SidebarLayoutProps>(), {
|
||||
collapsible: "icon",
|
||||
});
|
||||
|
||||
const navMain = computed(() => props.navItems || data.navMain);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Sidebar v-bind="props">
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" as-child>
|
||||
<NuxtLink to="/">
|
||||
<div
|
||||
class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground"
|
||||
>
|
||||
<HandCoins class="size-4" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5 leading-none">
|
||||
<span class="font-bold text-primary">Glowing Fiesta</span>
|
||||
<span>v1.0.0</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarMenu>
|
||||
<Collapsible
|
||||
v-for="item in navMain"
|
||||
:key="item.title"
|
||||
as-child
|
||||
:default-open="item.isActive"
|
||||
class="group/collapsible"
|
||||
>
|
||||
<SidebarMenuItem>
|
||||
<CollapsibleTrigger as-child>
|
||||
<SidebarMenuButton :tooltip="item.title">
|
||||
<component :is="item.icon" v-if="item.icon" class="text-primary" />
|
||||
<span class="font-bold text-primary">{{ item.title }}</span>
|
||||
<ChevronRight
|
||||
class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90 text-primary"
|
||||
/>
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
<SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
|
||||
<SidebarMenuSubButton as-child>
|
||||
<NuxtLink :to="subItem.url">
|
||||
<span>{{ subItem.title }}</span>
|
||||
</NuxtLink>
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</SidebarMenuItem>
|
||||
</Collapsible>
|
||||
</SidebarMenu>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
|
||||
<AppSidebarFooter :user="user" />
|
||||
|
||||
<SidebarRail></SidebarRail>
|
||||
</Sidebar>
|
||||
</template>
|
||||
149
app/layouts/default/SidebarFooter.vue
Normal file
149
app/layouts/default/SidebarFooter.vue
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { SidebarFooter, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "~/components/ui/sidebar";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "~/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "~/components/ui/dropdown-menu";
|
||||
|
||||
import { BadgeCheck, Bell, ChevronsUpDown, CreditCard, LogIn, LogOut } from "lucide-vue-next";
|
||||
|
||||
import type { User } from "better-auth";
|
||||
|
||||
const { isMobile } = useSidebar();
|
||||
|
||||
const props = defineProps<{ user?: User | null | undefined }>();
|
||||
|
||||
const userInititials = computed(() => {
|
||||
if (!props.user) return "";
|
||||
return props.user.name
|
||||
.split(" ")
|
||||
.map((name) => name.charAt(0).toUpperCase())
|
||||
.join("");
|
||||
});
|
||||
|
||||
const handleLogout = () => {
|
||||
navigateTo("/auth/logout");
|
||||
};
|
||||
|
||||
const handleLogin = () => {
|
||||
navigateTo("/auth/login");
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ClientOnly>
|
||||
<SidebarFooter>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<DropdownMenu v-if="user">
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar class="h-8 w-8 rounded-lg">
|
||||
<AvatarImage :src="user?.image || ''" :alt="user?.name" />
|
||||
<AvatarFallback class="rounded-lg">{{ userInititials }}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-medium">{{ user?.name }}</span>
|
||||
<span class="truncate text-xs">{{ user?.email }}</span>
|
||||
</div>
|
||||
<ChevronsUpDown class="ml-auto size-4" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
:side="isMobile ? 'bottom' : 'right'"
|
||||
align="end"
|
||||
:side-offset="4"
|
||||
>
|
||||
<DropdownMenuLabel class="p-0 font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar class="h-8 w-8 rounded-lg">
|
||||
<AvatarImage :src="user?.image || ''" :alt="user?.name" />
|
||||
<AvatarFallback class="rounded-lg">{{ userInititials }}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-semibold">{{ user.name }}</span>
|
||||
<span class="truncate text-xs">{{ user.email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>
|
||||
<BadgeCheck />
|
||||
Account
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<CreditCard />
|
||||
Billing
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Bell />
|
||||
Notifications
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="handleLogout">
|
||||
<LogOut />
|
||||
Log out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu v-else>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<SidebarMenuButton
|
||||
size="lg"
|
||||
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
>
|
||||
<Avatar class="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src="/images/human.png" alt="Anonymous" />
|
||||
<AvatarFallback class="rounded-lg">Anon</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-medium">Anonymous</span>
|
||||
<span class="truncate text-xs">No email</span>
|
||||
</div>
|
||||
<ChevronsUpDown class="ml-auto size-4" />
|
||||
</SidebarMenuButton>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
class="w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg"
|
||||
:side="isMobile ? 'bottom' : 'right'"
|
||||
align="end"
|
||||
:side-offset="4"
|
||||
>
|
||||
<DropdownMenuLabel class="p-0 font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
|
||||
<Avatar class="h-8 w-8 rounded-lg">
|
||||
<AvatarImage src="/images/human.png" alt="Anonymous" />
|
||||
<AvatarFallback class="rounded-lg">Anon</AvatarFallback>
|
||||
</Avatar>
|
||||
<div class="grid flex-1 text-left text-sm leading-tight">
|
||||
<span class="truncate font-semibold">Anonymous</span>
|
||||
<span class="truncate text-xs">No email</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem @click="handleLogin">
|
||||
<LogIn />
|
||||
Log in
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
Loading…
Add table
Add a link
Reference in a new issue