filipriec/kompress_eshop
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

collapsible admin sidebar

Browse Source
This commit is contained in:
Priec
2026-06-22 12:59:05 +02:00
parent 77d5c0fc25
commit 4a736a8c85
3 changed files with 21 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/views/admin/base.html
View File

@@ -46,7 +46,14 @@
</head>
<body
hx-headers='{"X-CSRF-Token": "{{ csrf_token() }}"}'
x-data="{ showSidebar: false }"
x-data="{
showSidebar: false,
collapsed: localStorage.getItem('adminSidebarCollapsed') === '1',
toggleCollapsed() {
this.collapsed = !this.collapsed;
localStorage.setItem('adminSidebarCollapsed', this.collapsed ? '1' : '0');
}
}"
class="min-h-screen bg-surface text-on-surface antialiased dark:bg-surface-dark dark:text-on-surface-dark">
<!-- dark overlay for the open sidebar on small screens -->
@@ -56,8 +63,8 @@
<!-- sidebar -->
<nav aria-label="{{ t(key='menu', lang=lang | default(value='sk')) }}"
x-bind:class="showSidebar ? 'translate-x-0' : '-translate-x-60'"
class="fixed inset-y-0 left-0 z-40 flex w-60 flex-col border-r border-outline bg-surface-alt transition-transform duration-300 md:translate-x-0 dark:border-outline-dark dark:bg-surface-dark-alt">
x-bind:class="(showSidebar ? 'translate-x-0' : '-translate-x-60') + ' ' + (collapsed ? 'md:-translate-x-60' : 'md:translate-x-0')"
class="fixed inset-y-0 left-0 z-40 flex w-60 flex-col border-r border-outline bg-surface-alt transition-transform duration-300 dark:border-outline-dark dark:bg-surface-dark-alt">
{# Sidebar nav links — adapted from the vendored Penguin UI component
penguinui-components/sidebar/simple-sidebar.html: Penguin's link
@@ -114,7 +121,8 @@
</nav>
<!-- content column -->
<div class="flex min-h-screen flex-col md:ml-60">
<div :class="collapsed ? 'md:ml-0' : 'md:ml-60'"
class="flex min-h-screen flex-col transition-[margin] duration-300">
<header class="sticky top-0 z-20 flex h-16 items-center gap-4 border-b border-outline bg-surface/95 px-4 backdrop-blur dark:border-outline-dark dark:bg-surface-dark/95">
<!-- Penguin animated hamburger (bars ↔ X) in our ghost-square shell -->
<button type="button" @click="showSidebar = !showSidebar" :aria-expanded="showSidebar" aria-label="{{ t(key='menu', lang=lang | default(value='sk')) }}"
@@ -123,6 +131,12 @@
{{ ui::icon(name="close", size="size-6", attrs='x-cloak x-show="showSidebar"') }}
</button>
<!-- desktop sidebar collapse toggle (chevron flips when collapsed) -->
<button type="button" @click="toggleCollapsed()" :aria-expanded="(!collapsed).toString()" aria-label="{{ t(key='menu', lang=lang | default(value='sk')) }}"
class="hidden size-9 shrink-0 items-center justify-center rounded-radius bg-transparent text-secondary transition hover:opacity-75 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary active:opacity-100 active:outline-offset-0 md:inline-flex dark:text-secondary-dark dark:focus-visible:outline-secondary-dark">
{{ ui::icon(name="chevron-double-left", size="size-6", extra="transition-transform duration-300", attrs=`x-bind:class="collapsed ? 'rotate-180' : ''"`) }}
</button>
<span class="text-sm font-semibold text-on-surface-strong dark:text-on-surface-dark-strong">
{% block crumb %}{{ t(key="admin-title", lang=lang | default(value='sk')) }}{% endblock crumb %}
</span>