Wibx_Nuxt_UI_Pro/app/layouts/default.vue

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const route = useRoute()
const toast = useToast()

const open = ref(false)

const links = [[{
  label: 'Accueil',
  icon: 'i-lucide-house',
  to: '/',
  onSelect: () => {
    open.value = false
  }
}, {
  label: 'Connect',
  icon: 'i-lucide-plug',
  to: '/connect',
  type: 'trigger',
  children: [{
    label: 'Clouds',
    to: '/connect/clouds',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'SaaS',
    to: '/connect/saas',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Écosystème',
    to: '/connect/ecosystem',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Data Centres',
    to: '/connect/data-centres',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Internet Exchanges',
    to: '/connect/internet-exchanges',
    onSelect: () => {
      open.value = false
    }
  }]
}, {
  label: 'Services',
  icon: 'i-lucide-server',
  to: '/services',
  type: 'trigger',
  children: [{
    label: 'Layer 2',
    to: '/services/layer2',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Layer 3',
    to: '/services/layer3',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Access Ports',
    to: '/services/access-ports',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Internet On Demand',
    to: '/services/internet-on-demand',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Mobilité',
    to: '/services/mobility',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Marketplace',
    to: '/services/marketplace',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'API',
    to: '/services/api',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'DDoS Protection',
    to: '/services/ddos',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Services Managés',
    to: '/services/managed',
    onSelect: () => {
      open.value = false
    }
  }]
}, {
  label: 'Ressources',
  icon: 'i-lucide-book',
  to: '/resources',
  type: 'trigger',
  children: [{
    label: 'Documentation API',
    to: '/resources/api-docs',
  onSelect: () => {
    open.value = false
  }
}, {
    label: 'Blog',
    to: '/resources/blog',
    onSelect: () => {
      open.value = false
    }
  }]
}, {
  label: 'À Propos',
  icon: 'i-lucide-info',
  to: '/about',
  onSelect: () => {
    open.value = false
  }
}], [{
  label: 'Paramètres',
  to: '/settings',
  icon: 'i-lucide-settings',
  defaultOpen: true,
  type: 'trigger',
  children: [{
    label: 'Général',
    to: '/settings',
    exact: true,
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Membres',
    to: '/settings/members',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Notifications',
    to: '/settings/notifications',
    onSelect: () => {
      open.value = false
    }
  }, {
    label: 'Sécurité',
    to: '/settings/security',
    onSelect: () => {
      open.value = false
    }
  }]
}, {
  label: 'Connexion',
  icon: 'i-lucide-log-in',
  to: '/login',
  onSelect: () => {
    open.value = false
  }
}, {
  label: 'Inscription',
  icon: 'i-lucide-user-plus',
  to: '/signup',
  onSelect: () => {
    open.value = false
  }
}]] satisfies NavigationMenuItem[][]

const groups = computed(() => [{
  id: 'links',
  label: 'Go to',
  items: links.flat()
}, {
  id: 'code',
  label: 'Code',
  items: [{
    id: 'source',
    label: 'View page source',
    icon: 'i-simple-icons-github',
    to: `https://github.com/nuxt-ui-pro/dashboard/blob/main/app/pages${route.path === '/' ? '/index' : route.path}.vue`,
    target: '_blank'
  }]
}])

onMounted(async () => {
  const cookie = useCookie('cookie-consent')
  if (cookie.value === 'accepted') {
    return
  }

  toast.add({
    title: 'We use first-party cookies to enhance your experience on our website.',
    duration: 0,
    close: false,
    actions: [{
      label: 'Accept',
      color: 'neutral',
      variant: 'outline',
      onClick: () => {
        cookie.value = 'accepted'
      }
    }, {
      label: 'Opt out',
      color: 'neutral',
      variant: 'ghost'
    }]
  })
})
</script>

<template>
  <UDashboardGroup unit="rem">
    <UDashboardSidebar
      id="default"
      v-model:open="open"
      collapsible
      resizable
      class="bg-elevated/25"
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <TeamsMenu :collapsed="collapsed" />
      </template>

      <template #default="{ collapsed }">
        <UDashboardSearchButton :collapsed="collapsed" class="bg-transparent ring-default" />

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links[0]"
          orientation="vertical"
          tooltip
          popover
        />

        <UNavigationMenu
          :collapsed="collapsed"
          :items="links[1]"
          orientation="vertical"
          tooltip
          class="mt-auto"
        />
      </template>

      <template #footer="{ collapsed }">
        <UserMenu :collapsed="collapsed" />
      </template>
    </UDashboardSidebar>

    <UDashboardSearch :groups="groups" />

    <slot />

    <NotificationsSlideover />
  </UDashboardGroup>
</template>