feat(ui) : reorganize navbar by business domain — Catalogues + Administration
This commit is contained in:
@@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
<!-- Mobile: dropdown groups -->
|
<!-- Mobile: dropdown groups -->
|
||||||
<li
|
<li
|
||||||
v-for="group in navGroups"
|
v-for="group in visibleGroups"
|
||||||
:key="group.id + '-mobile'"
|
:key="group.id + '-mobile'"
|
||||||
class="mt-1 border-t border-base-200 pt-2"
|
class="mt-1 border-t border-base-200 pt-2"
|
||||||
>
|
>
|
||||||
@@ -122,7 +122,7 @@
|
|||||||
|
|
||||||
<!-- Desktop: dropdown groups -->
|
<!-- Desktop: dropdown groups -->
|
||||||
<li
|
<li
|
||||||
v-for="group in navGroups"
|
v-for="group in visibleGroups"
|
||||||
:key="group.id + '-desktop'"
|
:key="group.id + '-desktop'"
|
||||||
class="relative"
|
class="relative"
|
||||||
@mouseenter="setDropdown(group.id + '-desktop')"
|
@mouseenter="setDropdown(group.id + '-desktop')"
|
||||||
@@ -271,10 +271,7 @@ import IconLucideLogOut from '~icons/lucide/log-out'
|
|||||||
import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
|
import IconLucideLayoutDashboard from '~icons/lucide/layout-dashboard'
|
||||||
import IconLucideFactory from '~icons/lucide/factory'
|
import IconLucideFactory from '~icons/lucide/factory'
|
||||||
|
|
||||||
import IconLucideCpu from '~icons/lucide/cpu'
|
|
||||||
import IconLucidePuzzle from '~icons/lucide/puzzle'
|
|
||||||
import IconLucidePackage from '~icons/lucide/package'
|
import IconLucidePackage from '~icons/lucide/package'
|
||||||
import IconLucideLink from '~icons/lucide/link'
|
|
||||||
import IconLucideSun from '~icons/lucide/sun'
|
import IconLucideSun from '~icons/lucide/sun'
|
||||||
import IconLucideMoon from '~icons/lucide/moon'
|
import IconLucideMoon from '~icons/lucide/moon'
|
||||||
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
|
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
|
||||||
@@ -296,6 +293,7 @@ interface NavGroup {
|
|||||||
icon?: Component
|
icon?: Component
|
||||||
activePaths: string[]
|
activePaths: string[]
|
||||||
children: NavLink[]
|
children: NavLink[]
|
||||||
|
requiresEdit?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
const simpleLinks: NavLink[] = [
|
const simpleLinks: NavLink[] = [
|
||||||
@@ -305,46 +303,29 @@ const simpleLinks: NavLink[] = [
|
|||||||
|
|
||||||
const navGroups: NavGroup[] = [
|
const navGroups: NavGroup[] = [
|
||||||
{
|
{
|
||||||
id: 'component',
|
id: 'catalogues',
|
||||||
label: 'Composants',
|
label: 'Catalogues',
|
||||||
icon: IconLucideCpu,
|
|
||||||
activePaths: ['/component-category', '/component-catalog'],
|
|
||||||
children: [
|
|
||||||
{ to: '/component-catalog', label: 'Catalogue des composants' },
|
|
||||||
{ to: '/component-category', label: 'Catégorie de composant' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'pieces',
|
|
||||||
label: 'Pièces',
|
|
||||||
icon: IconLucidePuzzle,
|
|
||||||
activePaths: ['/piece-category', '/pieces-catalog'],
|
|
||||||
children: [
|
|
||||||
{ to: '/pieces-catalog', label: 'Catalogue des pièces' },
|
|
||||||
{ to: '/piece-category', label: 'Catégorie de pièce' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'products',
|
|
||||||
label: 'Produits',
|
|
||||||
icon: IconLucidePackage,
|
icon: IconLucidePackage,
|
||||||
activePaths: ['/product-category', '/product-catalog'],
|
activePaths: ['/catalogues', '/component', '/piece', '/product', '/component-catalog', '/pieces-catalog', '/product-catalog'],
|
||||||
children: [
|
children: [
|
||||||
{ to: '/product-catalog', label: 'Catalogue des produits' },
|
{ to: '/catalogues/composants', label: 'Composants' },
|
||||||
{ to: '/product-category', label: 'Catégorie de produit' },
|
{ to: '/catalogues/pieces', label: 'Pièces' },
|
||||||
|
{ to: '/catalogues/produits', label: 'Produits' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'resources',
|
id: 'admin',
|
||||||
label: 'Ressources liées',
|
label: 'Administration',
|
||||||
icon: IconLucideLink,
|
icon: IconLucideSettings,
|
||||||
activePaths: ['/sites', '/documents', '/constructeurs', '/activity-log', '/comments'],
|
activePaths: ['/sites', '/constructeurs', '/activity-log', '/admin', '/documents', '/comments', '/component-category', '/piece-category', '/product-category'],
|
||||||
|
requiresEdit: true,
|
||||||
children: [
|
children: [
|
||||||
{ to: '/sites', label: 'Sites' },
|
{ to: '/sites', label: 'Sites' },
|
||||||
{ to: '/documents', label: 'Documents' },
|
{ to: '/documents', label: 'Documents' },
|
||||||
{ to: '/constructeurs', label: 'Fournisseurs' },
|
{ to: '/constructeurs', label: 'Fournisseurs' },
|
||||||
{ to: '/comments', label: 'Commentaires' },
|
{ to: '/comments', label: 'Commentaires' },
|
||||||
{ to: '/activity-log', label: 'Journal d\'activité' },
|
{ to: '/activity-log', label: 'Journal d\'activité' },
|
||||||
|
{ to: '/admin', label: 'Profils' },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
@@ -353,6 +334,10 @@ const route = useRoute()
|
|||||||
const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = useNavDropdown()
|
const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = useNavDropdown()
|
||||||
const { activeProfile } = useProfileSession()
|
const { activeProfile } = useProfileSession()
|
||||||
const { isAdmin, canEdit } = usePermissions()
|
const { isAdmin, canEdit } = usePermissions()
|
||||||
|
|
||||||
|
const visibleGroups = computed(() =>
|
||||||
|
navGroups.filter(g => !g.requiresEdit || canEdit.value)
|
||||||
|
)
|
||||||
const { fetchUnresolvedCount } = useComments()
|
const { fetchUnresolvedCount } = useComments()
|
||||||
const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
|
const { isDark, toggle: toggleDarkMode, init: initDarkMode } = useDarkMode()
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user