<script setup>
import { GnNavList, GnNavigationShell, GnToastProvider } from 'gnexus-ui-kit/vue'

const navItems = [
  { label: 'Dashboard', icon: 'ph-squares-four', to: '/' },
]
</script>

<template>
  <GnToastProvider :lifetime="4000">
    <GnNavigationShell
      brand="GHard Monitor"
      logo-src="/logo.svg"
      current="Gnexus Hardware Monitor"
      title="Monitoring"
      subtitle="GHard"
      footer-left="GHard Monitor"
      footer-right="v0.1"
    >
      <template #default="{ close }">
        <GnNavList :items="navItems" @select="close" />
      </template>

      <template #content>
        <div class="app-page">
          <router-view />
        </div>
      </template>
    </GnNavigationShell>
  </GnToastProvider>
</template>

<style>
/* Служебный layout-контейнер страницы (стили кита не дублируем) */
.app-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  width: 100%;
  box-sizing: border-box;
}

/* .tabs у кита — flex-wrap: узкая панель помещается рядом со списком табов.
   Заставляем панели всегда занимать собственную строку на всю ширину. */
.tabs .tabs-panels {
  flex-basis: 100%;
}

/* Лого в топбаре — 48×48 */
.nav-topbar-brand img {
  width: 48px;
  height: 48px;
}
</style>