|
|
@@ -104,18 +104,32 @@
|
|
|
<!-- Header -->
|
|
|
<header class="layout__header">
|
|
|
<!-- Mobile menu button -->
|
|
|
- <button class="layout__menu-btn" @click="toggleSidebar">
|
|
|
- <svg class="layout__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
|
- </svg>
|
|
|
- </button>
|
|
|
-
|
|
|
- <!-- Page Title / Breadcrumb -->
|
|
|
- <div class="layout__breadcrumb">
|
|
|
- <span v-for="(item, index) in breadcrumbs" :key="item.path" class="layout__breadcrumb-item">
|
|
|
- <span v-if="index > 0" class="layout__breadcrumb-separator">/</span>
|
|
|
- {{ t(item.meta?.title as string) }}
|
|
|
- </span>
|
|
|
+ <div class="layout__header-left">
|
|
|
+ <!-- Mobile: Hamburger menu -->
|
|
|
+ <button class="layout__menu-btn layout__menu-btn--mobile" @click="toggleSidebar">
|
|
|
+ <svg class="layout__icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
|
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
|
+ </svg>
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- Desktop: Compact chevron toggle -->
|
|
|
+ <button link class="layout__menu-btn layout__menu-btn--desktop" @click="toggleSidebar">
|
|
|
+ <Icon
|
|
|
+ icon="rivet-icons:chevron-left"
|
|
|
+ width="20"
|
|
|
+ height="20"
|
|
|
+ class="layout__menu-icon"
|
|
|
+ :class="{ 'layout__menu-icon--collapsed': !sidebarOpened }"
|
|
|
+ />
|
|
|
+ </button>
|
|
|
+
|
|
|
+ <!-- Page Title / Breadcrumb -->
|
|
|
+ <div class="layout__breadcrumb">
|
|
|
+ <span v-for="(item, index) in breadcrumbs" :key="item.path" class="layout__breadcrumb-item">
|
|
|
+ <span v-if="index > 0" class="layout__breadcrumb-separator">/</span>
|
|
|
+ {{ t(item.meta?.title as string) }}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
<!-- Header Right -->
|
|
|
@@ -658,7 +672,7 @@ onUnmounted(() => {
|
|
|
border-bottom: 1px solid #e5e7eb;
|
|
|
|
|
|
@media (min-width: 1024px) {
|
|
|
- padding: 0 2rem;
|
|
|
+ padding: 0 2rem 0 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -669,13 +683,58 @@ onUnmounted(() => {
|
|
|
border: none;
|
|
|
color: #6b7280;
|
|
|
cursor: pointer;
|
|
|
- transition: color 150ms ease-in-out;
|
|
|
+ transition: all 150ms ease-in-out;
|
|
|
|
|
|
&:hover {
|
|
|
- color: #000000;
|
|
|
+ // color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ // Mobile: show hamburger, hide chevron
|
|
|
+ &--mobile {
|
|
|
+ display: block;
|
|
|
+
|
|
|
+ @media (min-width: 1024px) {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Desktop: show chevron, hide hamburger
|
|
|
+ &--desktop {
|
|
|
+ display: none;
|
|
|
+ height: 56px;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 0;
|
|
|
+ margin-right: 0;
|
|
|
+ background: #409eff;
|
|
|
+ color: #ffffff;
|
|
|
+
|
|
|
+ @media (min-width: 1024px) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #66b1ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // Menu icon rotation
|
|
|
+ &__menu-icon {
|
|
|
+ transition: transform 150ms ease-in-out;
|
|
|
+
|
|
|
+ &--collapsed {
|
|
|
+ transform: rotate(180deg);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ &__header-left {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
&__breadcrumb {
|
|
|
display: none;
|
|
|
font-size: 1rem;
|