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

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

@ -1,13 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { usePage } from '@inertiajs/vue3'; import { usePage } from '@inertiajs/vue3';
import AppSidebar from '@/components/AppSidebar.vue'; import AppSidebar from '@/components/AppSidebar.vue';
import MobileBottomNav from '@/components/MobileBottomNav.vue';
import { Separator } from '@/components/ui/separator'; import { Separator } from '@/components/ui/separator';
import { import {
SidebarInset, SidebarInset,
SidebarProvider, SidebarProvider,
SidebarTrigger, SidebarTrigger,
} from '@/components/ui/sidebar'; } from '@/components/ui/sidebar';
import MobileBottomNav from '@/components/MobileBottomNav.vue';
import UserNav from '@/components/UserNav.vue'; import UserNav from '@/components/UserNav.vue';
defineProps<{ defineProps<{
@ -21,7 +21,7 @@ const page = usePage();
<SidebarProvider :default-open="page.props.sidebarOpen"> <SidebarProvider :default-open="page.props.sidebarOpen">
<AppSidebar /> <AppSidebar />
<SidebarInset> <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" /> <SidebarTrigger class="-ml-1" />
<Separator orientation="vertical" class="mr-2 h-4" /> <Separator orientation="vertical" class="mr-2 h-4" />
<h1 v-if="title" class="text-lg font-semibold"> <h1 v-if="title" class="text-lg font-semibold">
@ -31,7 +31,7 @@ const page = usePage();
<UserNav /> <UserNav />
</div> </div>
</header> </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 /> <slot />
</div> </div>
</SidebarInset> </SidebarInset>