mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-16 17:54:06 +00:00
7885bf9d11
Every main_menu entry moves from numeric group (1/2/3) to string-based group + group_label + priority. Groups now carry their own i18n label and child entries are sorted by an explicit priority field instead of config-array order, so module-contributed menu items can slot into any existing group at any position.
BootstrapController merges module-registered menu items into main_menu (previously they lived in a separate module_menu response key) and introduces a user_menu response key for items modules want to place in the avatar dropdown. The global store follows suit: moduleMenu becomes userMenu, menuGroups is a computed that sorts by priority, and hasActiveModules drops out.
New admin Appearance setting page with a single toggle for whether sidebar group labels render — so instances that prefer a compact sidebar can hide the Documents/Administration/Modules headings without losing the grouping itself. CompanyLayout watches route meta and re-bootstraps when the admin-mode flag flips so the sidebar repaints with the right menu on navigation across the admin boundary.
Test suites updated: module menu merging is asserted against main_menu (name: 'module-{slug}') rather than the old module_menu response; HelloWorldIntegrationTest verifies the schema translation path; CompanyModulesIndexTest covers the display_name attachment.
234 lines
7.7 KiB
Vue
234 lines
7.7 KiB
Vue
<template>
|
|
<!-- MOBILE MENU -->
|
|
<TransitionRoot as="template" :show="globalStore.isSidebarOpen">
|
|
<Dialog
|
|
as="div"
|
|
class="fixed inset-0 z-40 flex md:hidden"
|
|
@close="globalStore.setSidebarVisibility(false)"
|
|
>
|
|
<TransitionChild
|
|
as="template"
|
|
enter="transition-opacity ease-linear duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="transition-opacity ease-linear duration-300"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<DialogOverlay class="fixed inset-0 bg-gray-600/75" />
|
|
</TransitionChild>
|
|
|
|
<TransitionChild
|
|
as="template"
|
|
enter="transition ease-in-out duration-300"
|
|
enter-from="-translate-x-full"
|
|
enter-to="translate-x-0"
|
|
leave="transition ease-in-out duration-300"
|
|
leave-from="translate-x-0"
|
|
leave-to="-translate-x-full"
|
|
>
|
|
<div class="relative flex flex-col flex-1 w-full max-w-xs bg-surface">
|
|
<TransitionChild
|
|
as="template"
|
|
enter="ease-in-out duration-300"
|
|
enter-from="opacity-0"
|
|
enter-to="opacity-100"
|
|
leave="ease-in-out duration-300"
|
|
leave-from="opacity-100"
|
|
leave-to="opacity-0"
|
|
>
|
|
<div class="absolute top-0 right-0 pt-2 -mr-12">
|
|
<button
|
|
class="
|
|
flex items-center justify-center w-10 h-10 ml-1 rounded-full
|
|
focus:outline-hidden focus:ring-2 focus:ring-inset focus:ring-white
|
|
"
|
|
@click="globalStore.setSidebarVisibility(false)"
|
|
>
|
|
<span class="sr-only">Close sidebar</span>
|
|
<BaseIcon
|
|
name="XMarkIcon"
|
|
class="w-6 h-6 text-white"
|
|
aria-hidden="true"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</TransitionChild>
|
|
|
|
<div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
|
|
<div class="flex items-center shrink-0 px-4 mb-10">
|
|
<MainLogo
|
|
class="block h-auto max-w-full w-36 text-primary-400"
|
|
alt="InvoiceShelf Logo"
|
|
/>
|
|
</div>
|
|
|
|
<nav
|
|
v-for="(menu, index) in globalStore.menuGroups"
|
|
:key="index"
|
|
class="mt-5 space-y-1"
|
|
>
|
|
<div
|
|
v-if="menu[0] && menu[0].group_label"
|
|
class="px-4 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider"
|
|
>
|
|
{{ $t(menu[0].group_label) }}
|
|
</div>
|
|
<router-link
|
|
v-for="item in menu"
|
|
:key="item.name"
|
|
:to="item.link"
|
|
:class="[
|
|
hasActiveUrl(item.link)
|
|
? 'text-primary-600 bg-primary-50 font-semibold'
|
|
: 'text-body hover:bg-hover',
|
|
'cursor-pointer mx-3 px-3 py-2.5 flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
|
|
]"
|
|
@click="globalStore.setSidebarVisibility(false)"
|
|
>
|
|
<BaseIcon
|
|
:name="item.icon"
|
|
:class="[
|
|
hasActiveUrl(item.link)
|
|
? 'text-primary-500'
|
|
: 'text-subtle',
|
|
'mr-3 shrink-0 h-5 w-5',
|
|
]"
|
|
@click="globalStore.setSidebarVisibility(false)"
|
|
/>
|
|
{{ $t(item.title) }}
|
|
</router-link>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</TransitionChild>
|
|
|
|
<div class="shrink-0 w-14">
|
|
<!-- Force sidebar to shrink to fit close icon -->
|
|
</div>
|
|
</Dialog>
|
|
</TransitionRoot>
|
|
|
|
<!-- DESKTOP MENU -->
|
|
<div
|
|
:class="[
|
|
globalStore.isSidebarCollapsed ? 'w-16' : 'w-56 xl:w-64',
|
|
]"
|
|
class="
|
|
hidden h-screen pb-0 overflow-y-auto overflow-x-hidden
|
|
bg-surface/80 backdrop-blur-xl border-r border-white/10
|
|
md:fixed md:flex md:flex-col md:inset-y-0 pt-16
|
|
transition-all duration-300
|
|
"
|
|
>
|
|
<div
|
|
v-for="(menu, index) in globalStore.menuGroups"
|
|
:key="index"
|
|
class="p-0 m-0 mt-4 list-none"
|
|
>
|
|
<template v-if="menu[0] && menu[0].group_label">
|
|
<div
|
|
v-if="showGroupLabels && !globalStore.isSidebarCollapsed"
|
|
class="px-6 mt-6 mb-2 text-xs font-semibold text-subtle uppercase tracking-wider whitespace-nowrap"
|
|
>
|
|
{{ $t(menu[0].group_label) }}
|
|
</div>
|
|
<div
|
|
v-else-if="globalStore.isSidebarCollapsed"
|
|
class="mx-3 my-2 border-t border-line-light"
|
|
/>
|
|
</template>
|
|
<router-link
|
|
v-for="item in menu"
|
|
:key="item.name"
|
|
:to="item.link"
|
|
v-tooltip="globalStore.isSidebarCollapsed ? { content: $t(item.title), placement: 'right' } : null"
|
|
:class="[
|
|
hasActiveUrl(item.link)
|
|
? 'text-primary-600 bg-primary-50 font-semibold'
|
|
: 'text-body hover:bg-hover',
|
|
globalStore.isSidebarCollapsed
|
|
? 'cursor-pointer mx-2 px-0 py-2.5 group flex items-center justify-center rounded-lg text-sm font-medium transition-colors'
|
|
: 'cursor-pointer mx-3 px-3 py-2.5 group flex items-center rounded-lg text-sm not-italic font-medium transition-colors',
|
|
]"
|
|
>
|
|
<BaseIcon
|
|
:name="item.icon"
|
|
:class="[
|
|
hasActiveUrl(item.link)
|
|
? 'text-primary-500'
|
|
: 'text-subtle group-hover:text-body',
|
|
globalStore.isSidebarCollapsed
|
|
? 'shrink-0 h-6 w-6'
|
|
: 'mr-3 shrink-0 h-5 w-5',
|
|
]"
|
|
/>
|
|
|
|
<span v-if="!globalStore.isSidebarCollapsed" class="whitespace-nowrap">
|
|
{{ $t(item.title) }}
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
|
|
<!-- Bottom toolbar -->
|
|
<div class="mt-auto sticky bottom-0 border-t border-white/10 bg-surface/80 backdrop-blur-xl p-2 flex flex-col items-center gap-1">
|
|
<button
|
|
v-tooltip="globalStore.isSidebarCollapsed ? { content: $t('general.collapse'), placement: 'right' } : null"
|
|
:class="[
|
|
globalStore.isSidebarCollapsed
|
|
? 'w-10 h-10 justify-center'
|
|
: 'w-full px-3 h-10 justify-end',
|
|
]"
|
|
class="flex items-center rounded-lg text-subtle hover:text-body hover:bg-hover transition-colors"
|
|
@click="globalStore.toggleSidebarCollapse()"
|
|
>
|
|
<BaseIcon
|
|
:name="globalStore.isSidebarCollapsed ? 'ChevronDoubleRightIcon' : 'ChevronDoubleLeftIcon'"
|
|
class="w-4 h-4 shrink-0"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {
|
|
Dialog,
|
|
DialogOverlay,
|
|
TransitionChild,
|
|
TransitionRoot,
|
|
} from '@headlessui/vue'
|
|
import { computed } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import { useGlobalStore } from '@/scripts/stores/global.store'
|
|
import MainLogo from '@/scripts/components/icons/MainLogo.vue'
|
|
|
|
interface MenuItemData {
|
|
name: string
|
|
title: string
|
|
icon: string
|
|
link: string
|
|
group_label?: string
|
|
}
|
|
|
|
const route = useRoute()
|
|
const globalStore = useGlobalStore()
|
|
|
|
const showGroupLabels = computed<boolean>(() => {
|
|
return globalStore.globalSettings?.show_sidebar_group_labels === 'YES'
|
|
})
|
|
|
|
const activeMenuLink = computed<string | null>(() => {
|
|
const allLinks = globalStore.menuGroups.flat().map((item) => item.link)
|
|
const matches = allLinks.filter(
|
|
(url) => route.path === url || route.path.startsWith(url + '/'),
|
|
)
|
|
// Return the longest (most specific) match
|
|
return matches.sort((a, b) => b.length - a.length)[0] ?? null
|
|
})
|
|
|
|
function hasActiveUrl(url: string): boolean {
|
|
return url === activeMenuLink.value
|
|
}
|
|
</script>
|