dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update sidebar trigger icon and enhance header styling in AdminLayout

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-27 20:51:43 +07:00
parent 4fb137d57d
commit 2b51f42a7a
2 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/ui/sidebar/SidebarTrigger.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts">
import type { HTMLAttributes } from "vue"
import { PanelLeft } from "@lucide/vue"
import { Menu } from "@lucide/vue"
import { cn } from "@/lib/utils"
import { Button } from '@/components/ui/button'
import { useSidebar } from "./utils"
@ -21,7 +21,7 @@ const { toggleSidebar } = useSidebar()
:class="cn('h-7 w-7', props.class)"
@click="toggleSidebar"
>
<PanelLeft />
<Menu />
<span class="sr-only">Toggle Sidebar</span>
</Button>
</template>

6
resources/js/layouts/AdminLayout.vue
View File

@ -1,13 +1,13 @@
<script setup lang="ts">
import { usePage } from '@inertiajs/vue3';
import AppSidebar from '@/components/AppSidebar.vue';
import MobileBottomNav from '@/components/MobileBottomNav.vue';
import { Separator } from '@/components/ui/separator';
import {
SidebarInset,
SidebarProvider,
SidebarTrigger,
} from '@/components/ui/sidebar';
import MobileBottomNav from '@/components/MobileBottomNav.vue';
import UserNav from '@/components/UserNav.vue';
defineProps<{
@ -21,7 +21,7 @@ const page = usePage();
<SidebarProvider :default-open="page.props.sidebarOpen">
<AppSidebar />
<SidebarInset>
<header class="flex h-16 shrink-0 items-center gap-2 border-b px-4">
<header class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
<SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" />
<h1 v-if="title" class="text-lg font-semibold">
@ -31,7 +31,7 @@ const page = usePage();
<UserNav />
</div>
</header>
<div class="flex min-w-0 flex-1 flex-col gap-4 p-4 pb-24 lg:pb-4">
<div class="flex min-w-0 flex-1 flex-col gap-4 overflow-y-auto p-4 pb-24 lg:pb-4">
<slot />
</div>
</SidebarInset>