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>

2
assets/views/macros/ui.html
View File

@@ -81,6 +81,8 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" /></svg>
{%- elif name == "close" -%}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
{%- elif name == "chevron-double-left" -%}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /></svg>
{%- else -%}
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
{%- endif -%}