Done

2026-07-04 23:09:00 +10:00
parent 0485b85a59
commit 439139a057
50 changed files with 2405 additions and 548 deletions
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { usePage } from '@/composables/usePage';
+
+const page = usePage();
+const navCategories = page.props.navigation_categories;
+</script>
+
+<template>
+    <VAppBar
+        v-if="page.props.auth.user"
+        flat
+        :height="37"
+        color="surface"
+        style="top: 56px"
+    >
+        <div class="red-rule" />
+        <div class="subbar">
+            <template v-for="category in navCategories" :key="category.id">
+                <a
+                    v-if="!category.children?.length"
+                    href="#"
+                    class="subbar-link"
+                >
+                    {{ category.title }}
+                </a>
+
+                <VMenu v-else open-on-hover location="bottom start" :offset="2">
+                    <template #activator="{ props: menuProps }">
+                        <a
+                            href="#"
+                            class="subbar-link"
+                            v-bind="menuProps"
+                            @click.prevent
+                        >
+                            {{ category.title }}
+                        </a>
+                    </template>
+
+                    <VList class="submenu" density="compact" elevation="4">
+                        <VListItem
+                            v-for="child in category.children"
+                            :key="child.id"
+                            :title="child.title"
+                            href="#"
+                            class="submenu-item"
+                        />
+                    </VList>
+                </VMenu>
+            </template>
+        </div>
+    </VAppBar>
+</template>
+
+<style scoped lang="sass">
+.red-rule
+    height: 3px
+    background: #C0392B
+    width: 100%
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 1
+
+.subbar
+    width: 100%
+    background: #fff
+    border-bottom: 1px solid #E8E8E8
+    display: flex
+    overflow-x: auto
+    padding: 0 1.5rem
+    position: absolute
+    top: 3px
+    left: 0
+
+    &::-webkit-scrollbar
+        display: none
+
+.subbar-link
+    font-family: 'Inter', sans-serif
+    font-size: 12px
+    color: #666
+    text-decoration: none
+    padding: 8px 12px
+    white-space: nowrap
+    border-bottom: 2px solid transparent
+    flex-shrink: 0
+    cursor: pointer
+
+    &:hover
+        color: #111
+
+    &.active
+        color: #111
+        border-bottom-color: #111
+
+.submenu
+    min-width: 160px
+    max-width: 240px
+    border: 1px solid #E8E8E8
+    padding: 4px 0
+    background: #fff
+
+.submenu-item
+    font-family: 'Inter', sans-serif
+    font-size: 13px
+    color: #444
+    min-height: 32px
+    padding: 0 14px
+
+    :deep(.v-list-item-title)
+        font-size: 13px
+
+    &:hover
+        background: #F7F7F5
+        color: #111
+</style>