Skip to content

Commit 9cae9f9

Browse files
fabplfabpl
committed
ui: add components and sidebar layout
1 parent 4afe2af commit 9cae9f9

File tree

120 files changed

+2676
-16
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

120 files changed

+2676
-16
lines changed

‎app/Http/Middleware/HandleInertiaRequests.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ public function share(Request $request): array
3636
'user' => $request->user(),
3737
],
3838
'name' => config('app.name'),
39+
'sidebarOpen' => ! $request->hasCookie('sidebar_state') || $request->cookie('sidebar_state') === 'true',
3940
'ziggy' => [
4041
...(new Ziggy)->toArray(),
4142
'location' => $request->url(),

‎resources/js/components/app/Header.vue‎ renamed to ‎resources/js/components/AppHeader.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
2-
import Breadcrumbs from '@/components/app/Breadcrumbs.vue';
3-
import Logo from '@/components/app/Logo.vue';
4-
import LogoIcon from '@/components/app/LogoIcon.vue';
2+
import AppLogo from '@/components/AppLogo.vue';
3+
import AppLogoIcon from '@/components/AppLogoIcon.vue';
4+
import Breadcrumbs from '@/components/Breadcrumbs.vue';
55
import { Button } from '@/components/ui/button';
66
import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
77
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
@@ -53,7 +53,7 @@ const rightNavItems: NavItem[] = [];
5353
<SheetContent side="left" class="w-[300px] p-6">
5454
<SheetTitle class="sr-only">Navigation Menu</SheetTitle>
5555
<SheetHeader class="flex justify-start text-left">
56-
<LogoIcon class="size-6 fill-current text-black dark:text-white" />
56+
<AppLogoIcon class="size-6 fill-current text-black dark:text-white" />
5757
</SheetHeader>
5858
<div class="flex h-full flex-1 flex-col justify-between space-y-4 py-6">
5959
<nav class="-mx-3 space-y-1">
@@ -86,8 +86,8 @@ const rightNavItems: NavItem[] = [];
8686
</Sheet>
8787
</div>
8888

89-
<Link href="/" class="flex items-center gap-x-2">
90-
<Logo />
89+
<Link href="/public" class="flex items-center gap-x-2">
90+
<AppLogo />
9191
</Link>
9292

9393
<!-- Desktop Menu -->

‎resources/js/components/app/Logo.vue‎ renamed to ‎resources/js/components/AppLogo.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import LogoIcon from '@/components/app/LogoIcon.vue';
2+
import AppLogoIcon from '@/components/AppLogoIcon.vue';
33
import type { SharedData } from '@/types';
44
import { usePage } from '@inertiajs/vue3';
55
import { computed } from 'vue';
@@ -11,7 +11,7 @@ const appName = computed(() => page.props.name);
1111

1212
<template>
1313
<div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-md">
14-
<LogoIcon class="size-5 fill-current text-white dark:text-black" />
14+
<AppLogoIcon class="size-5 fill-current text-white dark:text-black" />
1515
</div>
1616
<div class="ml-1 grid flex-1 text-left text-sm">
1717
<span class="mb-0.5 truncate leading-none font-semibold">{{ appName }}</span>

‎resources/js/components/app/LogoIcon.vue‎ renamed to ‎resources/js/components/AppLogoIcon.vue‎

File renamed without changes.

‎resources/js/components/AppSidebar.vue‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<script setup lang="ts">
2+
import {
3+
Sidebar,
4+
SidebarContent,
5+
SidebarFooter,
6+
SidebarGroup,
7+
SidebarGroupContent,
8+
SidebarGroupLabel,
9+
SidebarHeader,
10+
SidebarMenu,
11+
SidebarMenuButton,
12+
SidebarMenuItem,
13+
} from '@/components/ui/sidebar';
14+
import { NavGroup, type NavItem, SharedData } from '@/types';
15+
import { Link, usePage } from '@inertiajs/vue3';
16+
import { House } from 'lucide-vue-next';
17+
import { computed } from 'vue';
18+
import AppLogo from './AppLogo.vue';
19+
20+
const page = usePage<SharedData>();
21+
22+
const isCurrentRoute = computed(() => (url: string) => page.url === url);
23+
24+
const mainNavItems: NavGroup[] = [
25+
{
26+
title: 'Menu',
27+
items: [
28+
{
29+
title: 'Home',
30+
href: '/',
31+
icon: House,
32+
},
33+
],
34+
},
35+
];
36+
37+
const footerNavItems: NavItem[] = [];
38+
</script>
39+
40+
<template>
41+
<Sidebar collapsible="icon">
42+
<SidebarHeader>
43+
<SidebarMenu>
44+
<SidebarMenuItem>
45+
<SidebarMenuButton size="lg" as-child>
46+
<Link href="/">
47+
<AppLogo />
48+
</Link>
49+
</SidebarMenuButton>
50+
</SidebarMenuItem>
51+
</SidebarMenu>
52+
</SidebarHeader>
53+
54+
<SidebarContent>
55+
<SidebarGroup v-for="group in mainNavItems" :key="group.title" class="px-2 py-0">
56+
<SidebarGroupLabel>{{ group.title }}</SidebarGroupLabel>
57+
<SidebarMenu>
58+
<SidebarMenuItem v-for="item in group.items" :key="item.title">
59+
<SidebarMenuButton as-child :is-active="isCurrentRoute(item.href)" :tooltip="item.title">
60+
<Link :href="item.href">
61+
<component :is="item.icon" />
62+
<span>{{ item.title }}</span>
63+
</Link>
64+
</SidebarMenuButton>
65+
</SidebarMenuItem>
66+
</SidebarMenu>
67+
</SidebarGroup>
68+
</SidebarContent>
69+
70+
<SidebarFooter>
71+
<SidebarGroup class="group-data-[collapsible=icon]:p-0">
72+
<SidebarGroupContent>
73+
<SidebarMenu>
74+
<SidebarMenuItem v-for="item in footerNavItems" :key="item.title">
75+
<SidebarMenuButton
76+
class="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
77+
as-child
78+
>
79+
<Link :href="item.href">
80+
<component :is="item.icon" />
81+
<span>{{ item.title }}</span>
82+
</Link>
83+
</SidebarMenuButton>
84+
</SidebarMenuItem>
85+
</SidebarMenu>
86+
</SidebarGroupContent>
87+
</SidebarGroup>
88+
</SidebarFooter>
89+
</Sidebar>
90+
91+
<slot />
92+
</template>

‎resources/js/components/AppSidebarHeader.vue‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<script setup lang="ts">
2+
import Breadcrumbs from '@/components/Breadcrumbs.vue';
3+
import { SidebarTrigger } from '@/components/ui/sidebar';
4+
import type { BreadcrumbItem } from '@/types';
5+
6+
interface Props {
7+
breadcrumbs?: BreadcrumbItem[];
8+
}
9+
10+
withDefaults(defineProps<Props>(), {
11+
breadcrumbs: () => [],
12+
});
13+
</script>
14+
15+
<template>
16+
<header
17+
class="border-sidebar-border/70 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4"
18+
>
19+
<div class="flex items-center gap-2">
20+
<SidebarTrigger class="-ml-1" />
21+
22+
<template v-if="breadcrumbs && breadcrumbs.length > 0">
23+
<Breadcrumbs :breadcrumbs="breadcrumbs" />
24+
</template>
25+
</div>
26+
</header>
27+
</template>

‎resources/js/components/app/Breadcrumbs.vue‎ renamed to ‎resources/js/components/Breadcrumbs.vue‎

File renamed without changes.

‎resources/js/components/ui/Heading.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
interface Props {
3+
title: string;
4+
description?: string;
5+
}
6+
7+
defineProps<Props>();
8+
</script>
9+
10+
<template>
11+
<div class="mb-8 space-y-0.5">
12+
<h2 class="text-xl font-semibold tracking-tight">{{ title }}</h2>
13+
<p v-if="description" class="text-muted-foreground text-sm">
14+
{{ description }}
15+
</p>
16+
</div>
17+
</template>

‎resources/js/components/ui/HeadingSmall.vue‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<script setup lang="ts">
2+
interface Props {
3+
title: string;
4+
description?: string;
5+
}
6+
7+
defineProps<Props>();
8+
</script>
9+
10+
<template>
11+
<header>
12+
<h3 class="mb-0.5 text-base font-medium">{{ title }}</h3>
13+
<p v-if="description" class="text-muted-foreground text-sm">
14+
{{ description }}
15+
</p>
16+
</header>
17+
</template>

‎resources/js/components/ui/InputError.vue‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
message?: string;
4+
}>();
5+
</script>
6+
7+
<template>
8+
<div v-show="message">
9+
<p class="text-sm text-red-600 dark:text-red-500">
10+
{{ message }}
11+
</p>
12+
</div>
13+
</template>

0 commit comments

Comments
 (0)