Skip to content

Commit c6fff86

Browse files
tnyleatnylea
committed
cleaning up layout file
1 parent 5a01092 commit c6fff86

File tree

4 files changed

+93
-73
lines changed

4 files changed

+93
-73
lines changed

‎resources/js/components/AppHeader.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
3+
import { Separator } from '@/components/ui/separator';
4+
import { SidebarTrigger } from '@/components/ui/sidebar';
5+
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
6+
7+
interface Props {
8+
breadcrumbs?: BreadcrumbItemType[];
9+
}
10+
11+
const props = withDefaults(defineProps<Props>(), {
12+
breadcrumbs: () => [],
13+
});
14+
</script>
15+
16+
<template>
17+
<header class="flex h-16 w-full shrink-0 items-center justify-between gap-2 border-b px-4">
18+
<div class="flex items-center gap-2">
19+
<SidebarTrigger class="-ml-1" />
20+
<template v-if="breadcrumbs.length > 0">
21+
<Separator orientation="vertical" class="mr-2 h-4" />
22+
<Breadcrumb>
23+
<BreadcrumbList>
24+
<template v-for="(item, index) in breadcrumbs" :key="index">
25+
<BreadcrumbItem>
26+
<template v-if="index === breadcrumbs.length - 1">
27+
<BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
28+
</template>
29+
<template v-else>
30+
<BreadcrumbLink :href="item.href">
31+
{{ item.title }}
32+
</BreadcrumbLink>
33+
</template>
34+
</BreadcrumbItem>
35+
<BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
36+
</template>
37+
</BreadcrumbList>
38+
</Breadcrumb>
39+
</template>
40+
</div>
41+
</header>
42+
</template>

‎resources/js/components/AppSidebar.vue‎

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<script setup lang="ts">
22
import NavMain from '@/components/NavMain.vue';
33
import NavUser from '@/components/NavUser.vue';
4+
import NavFooter from '@/components/NavFooter.vue';
45
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
56
import { type NavItem } from '@/types';
67
import { BookOpenText, FolderGit2, LayoutDashboard } from 'lucide-vue-next';
78
import ApplicationLogo from './ApplicationLogo.vue';
9+
import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar';
10+
import { ref } from 'vue';
811
912
const mainNavItems: NavItem[] = [
1013
{
@@ -26,36 +29,51 @@ const footerNavItems: NavItem[] = [
2629
icon: BookOpenText,
2730
},
2831
];
32+
33+
const isOpen = ref(typeof window !== 'undefined' ? localStorage.getItem('sidebar') !== 'false' : true);
34+
35+
const handleSidebarChange = (open: boolean) => {
36+
isOpen.value = open;
37+
if (typeof window !== 'undefined') {
38+
localStorage.setItem('sidebar', String(open));
39+
}
40+
};
2941
</script>
3042

3143
<template>
32-
<Sidebar variant="sidebar" collapsible="icon">
33-
<SidebarHeader>
34-
<SidebarMenu>
35-
<SidebarMenuItem>
36-
<SidebarMenuButton size="lg" as-child>
37-
<a href="#" class="flex items-center gap-3">
38-
<div
39-
class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
40-
>
41-
<ApplicationLogo class="size-5 fill-current text-white" />
42-
</div>
43-
<div class="grid flex-1 text-left text-sm leading-tight">
44-
<span class="truncate font-semibold">Laravel</span>
45-
<span class="truncate text-xs">Starter Kit</span>
46-
</div>
47-
</a>
48-
</SidebarMenuButton>
49-
</SidebarMenuItem>
50-
</SidebarMenu>
51-
</SidebarHeader>
44+
<SidebarProvider :default-open="isOpen" :open="isOpen" @update:open="handleSidebarChange">
45+
<Sidebar variant="sidebar" collapsible="icon">
46+
<SidebarHeader>
47+
<SidebarMenu>
48+
<SidebarMenuItem>
49+
<SidebarMenuButton size="lg" as-child>
50+
<a href="#" class="flex items-center gap-3">
51+
<div
52+
class="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground"
53+
>
54+
<ApplicationLogo class="size-5 fill-current text-white" />
55+
</div>
56+
<div class="grid flex-1 text-left text-sm leading-tight">
57+
<span class="truncate font-semibold">Laravel</span>
58+
<span class="truncate text-xs">Starter Kit</span>
59+
</div>
60+
</a>
61+
</SidebarMenuButton>
62+
</SidebarMenuItem>
63+
</SidebarMenu>
64+
</SidebarHeader>
5265

53-
<SidebarContent>
54-
<NavMain :items="mainNavItems" />
55-
</SidebarContent>
66+
<SidebarContent>
67+
<NavMain :items="mainNavItems" />
68+
</SidebarContent>
5669

57-
<SidebarFooter>
58-
<NavUser />
59-
</SidebarFooter>
60-
</Sidebar>
70+
<SidebarFooter>
71+
<NavFooter :items="footerNavItems" />
72+
<NavUser />
73+
</SidebarFooter>
74+
</Sidebar>
75+
<SidebarInset>
76+
<slot />
77+
</SidebarInset>
78+
</SidebarProvider>
6179
</template>

‎resources/js/layouts/AppLayout.vue‎

Lines changed: 5 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<script setup lang="ts">
22
import AppSidebar from '@/components/AppSidebar.vue';
3-
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
4-
import { Separator } from '@/components/ui/separator';
5-
import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/sidebar';
6-
import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
7-
import { ref } from 'vue';
3+
import AppHeader from '@/components/AppHeader.vue';
84
95
interface Props {
106
breadcrumbs?: BreadcrumbItemType[];
@@ -13,47 +9,11 @@ interface Props {
139
const props = withDefaults(defineProps<Props>(), {
1410
breadcrumbs: () => [],
1511
});
16-
17-
const isOpen = ref(typeof window !== 'undefined' ? localStorage.getItem('sidebar') !== 'false' : true);
18-
19-
const handleSidebarChange = (open: boolean) => {
20-
isOpen.value = open;
21-
if (typeof window !== 'undefined') {
22-
localStorage.setItem('sidebar', String(open));
23-
}
24-
};
2512
</script>
2613

2714
<template>
28-
<SidebarProvider :default-open="isOpen" :open="isOpen" @update:open="handleSidebarChange">
29-
<AppSidebar />
30-
<SidebarInset>
31-
<header class="flex h-16 w-full shrink-0 items-center justify-between gap-2 border-b px-4">
32-
<div class="flex items-center gap-2">
33-
<SidebarTrigger class="-ml-1" />
34-
<template v-if="breadcrumbs.length > 0">
35-
<Separator orientation="vertical" class="mr-2 h-4" />
36-
<Breadcrumb>
37-
<BreadcrumbList>
38-
<template v-for="(item, index) in breadcrumbs" :key="index">
39-
<BreadcrumbItem>
40-
<template v-if="index === breadcrumbs.length - 1">
41-
<BreadcrumbPage>{{ item.title }}</BreadcrumbPage>
42-
</template>
43-
<template v-else>
44-
<BreadcrumbLink :href="item.href">
45-
{{ item.title }}
46-
</BreadcrumbLink>
47-
</template>
48-
</BreadcrumbItem>
49-
<BreadcrumbSeparator v-if="index !== breadcrumbs.length - 1" />
50-
</template>
51-
</BreadcrumbList>
52-
</Breadcrumb>
53-
</template>
54-
</div>
55-
</header>
56-
<slot />
57-
</SidebarInset>
58-
</SidebarProvider>
15+
<AppSidebar>
16+
<AppHeader :breadcrumbs="props.breadcrumbs" />
17+
<slot />
18+
</AppSidebar>
5919
</template>

‎routes/web.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
Route::patch('settings/profile', [ProfileController::class, 'update'])->name('profile.update');
2828
Route::delete('settings/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
2929

30-
Route::get('settings/password', [PasswordController::class, 'edit'])->name('password.edit')->middleware('password.confirm');
30+
Route::get('settings/password', [PasswordController::class, 'edit'])->name('password.edit');
3131
Route::put('settings/password', [PasswordController::class, 'update'])->name('password.update');
3232

3333
Route::get('settings/appearance', function () {

0 commit comments

Comments
 (0)