@jumentix/cli-init 0.0.0

package/templates/frontend/scripts/check-coverage.js

@@ -0,0 +1,157 @@
+#!/usr/bin/env bun
+/* eslint-disable no-console */
+/**
+ * Frontend coverage gate (JUM-776, Requirement 112).
+ *
+ * `apps/frontend` runs on `bun:test` — its `.vue` components mount through
+ * @vue/test-utils with a Bun SFC loader — and Bun writes lcov, not Istanbul
+ * JSON. `check-coverage-thresholds.js` reads Istanbul counters on purpose
+ * (Requirement 110 §3: lcov has no statement counter), so the frontend cannot
+ * be folded into that report without inventing numbers. This gate reads the
+ * frontend lcov for the two counters lcov does carry — lines and functions —
+ * and says so in its output. Branches are not measured for this app: Bun
+ * emits no BRDA records (Requirement 110 §2), and a threshold that cannot be
+ * measured is reported as unmeasured, never as met.
+ *
+ * Scope: every file under `apps/frontend/src/` the suites touched, plus every
+ * `.ts`/`.vue` source file they did not touch, counted at 0 — an untested
+ * component must lower the number, not vanish from it.
+ */
+const fs = require('node:fs');
+const path = require('node:path');
+const { isEntryPoint } = require('../../../ci-cd/lib/entry-point.js');
+
+const APP_ROOT = path.resolve(__dirname, '..');
+const repoRoot = path.resolve(APP_ROOT, '../..');
+const DEFAULT_REPORT = path.join(repoRoot, 'coverage', 'frontend', 'lcov.info');
+const SOURCE_ROOT = path.join(APP_ROOT, 'src');
+
+/**
+ * Lines and functions, as percentages. Set at the measured baseline of the
+ * first gated run (JUM-776) and meant to ratchet upward toward the 98% the
+ * rest of the repository holds; lowering either is a governance decision.
+ */
+const THRESHOLDS = {
+  lines: 85,
+  functions: 80
+};
+
+/** Files that are runtime wiring with no unit-testable behaviour. */
+const EXCLUDED = [
+  /\/src\/main\.ts$/,
+  /\/src\/env\.d\.ts$/,
+  /\/src\/router\/index\.ts$/,
+  /\/src\/App\.vue$/,
+  /\/src\/contracts\/openapi\.json$/,
+  /\/src\/contracts\/sharedContractsBrowserShim\.ts$/,
+  /\/src\/styles\//,
+  /\/src\/views\//,
+  /\/src\/data\/pwa\.ts$/
+];
+
+function parseLcov(text) {
+  const files = new Map();
+  let current = null;
+  for (const rawLine of text.split('\n')) {
+    const line = rawLine.trim();
+    if (line.startsWith('SF:')) {
+      // Bun writes SF entries relative to the directory it ran in (the app).
+      current = {
+        path: path.resolve(APP_ROOT, line.slice(3)), lf: 0, lh: 0, fnf: 0, fnh: 0
+      };
+    } else if (line.startsWith('LF:') && current) current.lf = Number(line.slice(3));
+    else if (line.startsWith('LH:') && current) current.lh = Number(line.slice(3));
+    else if (line.startsWith('FNF:') && current) current.fnf = Number(line.slice(4));
+    else if (line.startsWith('FNH:') && current) current.fnh = Number(line.slice(4));
+    else if (line === 'end_of_record' && current) {
+      files.set(current.path, current);
+      current = null;
+    }
+  }
+  return files;
+}
+
+function listSources(dir, out = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) listSources(full, out);
+    else if (/\.(ts|vue)$/.test(entry.name)) out.push(full);
+  }
+  return out;
+}
+
+function isSubject(filePath) {
+  const normalized = filePath.replaceAll('\\', '/');
+  return normalized.startsWith(SOURCE_ROOT.replaceAll('\\', '/'))
+    && !EXCLUDED.some((pattern) => pattern.test(normalized));
+}
+
+/** Untouched sources count as 0/LF where LF is estimated from line count. */
+function countLines(filePath) {
+  const text = fs.readFileSync(filePath, 'utf8');
+  return text.split('\n').filter((line) => line.trim().length > 0).length;
+}
+
+function summarize(files, sources) {
+  const totals = { lines: { found: 0, hit: 0 }, functions: { found: 0, hit: 0 } };
+  const untouched = [];
+  for (const source of sources) {
+    const record = files.get(source);
+    if (record) {
+      totals.lines.found += record.lf;
+      totals.lines.hit += record.lh;
+      totals.functions.found += record.fnf;
+      totals.functions.hit += record.fnh;
+    } else {
+      untouched.push(path.relative(repoRoot, source));
+      totals.lines.found += countLines(source);
+    }
+  }
+  return { totals, untouched };
+}
+
+const percentage = ({ found, hit }) => (found === 0 ? 100 : (hit / found) * 100);
+
+function run({ reportPath = DEFAULT_REPORT, thresholds = THRESHOLDS } = {}) {
+  if (!fs.existsSync(reportPath)) {
+    return {
+      ok: false,
+      messages: [
+        `Frontend coverage check failed: ${path.relative(repoRoot, reportPath)} does not exist.`,
+        '  Run `bun run frontend:test:coverage` first; a missing report is not a pass (Requirement 065).'
+      ]
+    };
+  }
+  const files = parseLcov(fs.readFileSync(reportPath, 'utf8'));
+  const sources = listSources(SOURCE_ROOT).filter(isSubject);
+  const { totals, untouched } = summarize(files, sources);
+  const messages = [];
+  let ok = true;
+  for (const metric of Object.keys(thresholds)) {
+    const value = percentage(totals[metric]);
+    const line = `  ${metric.padEnd(10)} ${value.toFixed(2)}% (${totals[metric].hit}/${totals[metric].found}) threshold ${thresholds[metric]}%`;
+    if (value + 1e-9 < thresholds[metric]) {
+      ok = false;
+      messages.push(`${line}  FAIL`);
+    } else {
+      messages.push(line);
+    }
+  }
+  messages.push('  branches   unmeasured — bun emits no branch records (Requirement 110 §2); not counted as met.');
+  if (untouched.length) {
+    messages.push(`  untouched sources counted at 0 lines hit (${untouched.length}):`);
+    untouched.forEach((file) => messages.push(`    - ${file}`));
+  }
+  return { ok, messages, totals, untouched };
+}
+
+module.exports = {
+  THRESHOLDS, EXCLUDED, parseLcov, isSubject, summarize, run
+};
+
+if (isEntryPoint(module)) {
+  const result = run();
+  console.log(result.ok ? 'Frontend coverage check passed.' : 'Frontend coverage check failed.');
+  result.messages.forEach((message) => console.log(message));
+  process.exit(result.ok ? 0 : 1);
+}

package/templates/frontend/scripts/run-e2e.mjs

@@ -0,0 +1,75 @@
+/**
+ * Frontend e2e runner (JUM-776, Requirement 118).
+ *
+ * 1. `docker compose up --wait` the real REST API (e2e/docker-compose.yml);
+ * 2. start Vite with `/api` proxied to the container;
+ * 3. `cypress run` against it;
+ * 4. tear everything down and exit with Cypress' status.
+ *
+ * Fails closed: no Docker, an unhealthy container, or a Vite that never
+ * listens all exit non-zero. A skipped e2e is not a green one (Req 065/118).
+ */
+import { spawn, spawnSync } from 'node:child_process';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const appRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
+const composeFile = path.join(appRoot, 'e2e', 'docker-compose.yml');
+const backendPort = process.env.FRONTEND_E2E_BACKEND_PORT ?? '3130';
+const frontendPort = process.env.FRONTEND_E2E_PORT ?? '3131';
+// Cypress' bundled Electron segfaults (exit 139) on macOS while typing into
+// the password / datalist inputs of this app; headless Chrome does not. Chrome
+// is the default and the browser is overridable for CI images without it.
+const browser = process.env.FRONTEND_E2E_BROWSER ?? 'chrome';
+const env = { ...process.env, FRONTEND_E2E_BACKEND_PORT: backendPort, FRONTEND_E2E_PORT: frontendPort };
+const compose = ['compose', '-f', composeFile];
+
+const run = (command, args, options = {}) => {
+  const result = spawnSync(command, args, { stdio: 'inherit', env, cwd: appRoot, ...options });
+  if (result.error) throw result.error;
+  return result.status ?? 1;
+};
+
+const waitFor = async (url, attempts = 60) => {
+  for (let index = 0; index < attempts; index += 1) {
+    try {
+      const response = await fetch(url);
+      if (response.ok) return;
+    } catch {
+      // not up yet
+    }
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+  }
+  throw new Error(`Timed out waiting for ${url}`);
+};
+
+let vite;
+let status = 1;
+try {
+  if (run('docker', ['version'], { stdio: 'ignore' }) !== 0) {
+    throw new Error('Docker is not available; the e2e suite requires the containerised backend (Requirement 118).');
+  }
+  if (run('docker', [...compose, 'up', '-d', '--build', '--wait']) !== 0) {
+    throw new Error('The e2e backend container did not become healthy.');
+  }
+  await waitFor(`http://127.0.0.1:${backendPort}/`);
+
+  // `--host 127.0.0.1` so the address Cypress and the health probe use is the
+  // one Vite binds (a bare `localhost` may resolve to ::1 on this host).
+  vite = spawn(process.execPath, ['run', 'dev', '--', '--host', '127.0.0.1'], {
+    cwd: appRoot,
+    stdio: 'inherit',
+    env: { ...env, VITE_DEV_PORT: frontendPort, VITE_API_PROXY_TARGET: `http://127.0.0.1:${backendPort}` }
+  });
+  await waitFor(`http://127.0.0.1:${frontendPort}/`);
+
+  status = run('bunx', ['cypress', 'run', '--browser', browser, '--config', `baseUrl=http://127.0.0.1:${frontendPort}`, ...process.argv.slice(2)]);
+} catch (error) {
+  console.error(`[frontend e2e] ${error instanceof Error ? error.message : String(error)}`);
+  status = 1;
+} finally {
+  if (vite) vite.kill('SIGTERM');
+  run('docker', [...compose, 'down', '--remove-orphans'], { stdio: 'ignore' });
+}
+process.exit(status);

package/templates/frontend/scripts/sync-contracts.mjs

@@ -0,0 +1,31 @@
+/**
+ * Contract sync for the frontend workspace (requirement 136).
+ *
+ * The only backend reference a frontend may know is the OpenAPI document.
+ * This script reads the versioned YAML spec at the monorepo root
+ * (`spec/1.0.0.yml`) and bakes it as JSON into `src/contracts/openapi.json`,
+ * so the app and the tests consume the contract as bundled data — never as
+ * backend source code.
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+import YAML from 'yaml';
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const appRoot = path.resolve(scriptDir, '..');
+const monorepoRoot = path.resolve(appRoot, '../..');
+const specPath = path.join(monorepoRoot, 'spec', '1.0.0.yml');
+const outputPath = path.join(appRoot, 'src', 'contracts', 'openapi.json');
+
+const raw = await fs.readFile(specPath, 'utf8');
+const openApi = YAML.parse(raw);
+
+if (!openApi?.paths || Object.keys(openApi.paths).length === 0) {
+  throw new Error(`sync-contracts: ${specPath} parsed but has no paths`);
+}
+
+await fs.mkdir(path.dirname(outputPath), { recursive: true });
+await fs.writeFile(outputPath, `${JSON.stringify(openApi, null, 2)}\n`, 'utf8');
+console.log(`[sync-contracts] wrote ${Object.keys(openApi.paths).length} paths to src/contracts/openapi.json`);

package/templates/frontend/src/.gitkeep

@@ -0,0 +1 @@
+

package/templates/frontend/src/App.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject, onBeforeMount } from 'vue'
+import { useColorModes } from '@coreui/vue'
+
+import BootErrorView from '@/views/BootErrorView.vue'
+import { useThemeStore } from '@/stores/theme'
+
+const canaBoot = inject<'ok' | 'unavailable'>('canaBoot', 'ok')
+
+const { isColorModeSet, setColorMode } = useColorModes('jumentix-frontend-theme')
+const currentTheme = useThemeStore()
+
+onBeforeMount(() => {
+  if (isColorModeSet()) {
+    return
+  }
+  setColorMode(currentTheme.theme)
+})
+</script>
+
+<template>
+  <BootErrorView v-if="canaBoot !== 'ok'" />
+  <router-view v-else />
+</template>
+
+<style lang="scss">
+@use 'styles/style';
+</style>

package/templates/frontend/src/components/AppBreadcrumb.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter, type RouteLocationNormalizedLoaded } from 'vue-router'
+import { localized, useI18n } from '@/i18n'
+import { findModule } from '@/modules/manifest'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+interface Breadcrumb {
+  active: boolean
+  label: string
+  href: string
+}
+
+/**
+ * Crumbs for the current location (JUM-906).
+ *
+ * `route.matched` holds route records, whose `path` is the pattern — a module
+ * page rendered "Home / Home" linking to `/#/m/:moduleId/:tab?`. Each crumb now
+ * links to a resolved location, and a module route shows the module and the
+ * active tab by name.
+ */
+const buildBreadcrumbs = (current: RouteLocationNormalizedLoaded): Breadcrumb[] => {
+  const crumbs: Breadcrumb[] = []
+  for (const record of current.matched) {
+    if (record.name === 'Module') {
+      const moduleId = String(current.params.moduleId ?? '')
+      const manifest = findModule(moduleId)
+      crumbs.push({
+        active: false,
+        label: manifest ? localized(manifest.title) : moduleId,
+        href: router.resolve({ name: 'Module', params: { moduleId } }).href
+      })
+      const tab = typeof current.params.tab === 'string' ? current.params.tab : ''
+      const entity = manifest?.entities.find((item) => item.id === tab)
+      const tabLabel = entity ? localized(entity.title) : tab === 'dashboard' ? t('nav.dashboard') : ''
+      if (tabLabel) crumbs.push({ active: false, label: tabLabel, href: router.resolve(current.fullPath).href })
+      continue
+    }
+    const key = record.meta.titleKey as string | undefined
+    crumbs.push({
+      active: false,
+      label: key ? t(key) : String(record.name ?? ''),
+      href: record.name
+        ? router.resolve({ name: record.name, params: record.path.includes(':') ? current.params : {} }).href
+        : router.resolve(current.fullPath).href
+    })
+  }
+  if (crumbs.length > 0) crumbs[crumbs.length - 1].active = true
+  return crumbs
+}
+
+const breadcrumbs = computed(() => buildBreadcrumbs(route))
+</script>
+
+<template>
+  <CBreadcrumb class="my-0">
+    <CBreadcrumbItem
+      v-for="item in breadcrumbs"
+      :key="item.href + item.label"
+      :href="item.active ? '' : item.href"
+      :active="item.active"
+    >
+      {{ item.label }}
+    </CBreadcrumbItem>
+  </CBreadcrumb>
+</template>

package/templates/frontend/src/components/AppFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { useI18n } from '@/i18n';
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <CFooter class="px-4">
+    <div>
+      <span class="fw-semibold">Jumentix</span>
+      <span class="ms-1">&copy; {{ new Date().getFullYear() }} XpertMinds.</span>
+    </div>
+    <div class="ms-auto">
+      <span class="me-1">{{ t('app.generatedBy') }}</span>
+      <a href="https://jumentix-website.vercel.app" target="_blank" rel="noreferrer">Jumentix</a>
+    </div>
+  </CFooter>
+</template>

package/templates/frontend/src/components/AppHeader.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useColorModes } from '@coreui/vue'
+
+import AppBreadcrumb from '@/components/AppBreadcrumb.vue'
+import { useI18n } from '@/i18n'
+import { listToolbarWidgets } from '@/shell/toolbarWidgets'
+import { useShellViewport } from '@/shell/breakpoints'
+import { useSidebarStore } from '@/stores/sidebar'
+import { useTaskStore } from '@/stores/tasks'
+import { usePermissions } from '@/contracts/usePermissions'
+
+const headerClassNames = ref('mb-4 p-0')
+const { colorMode, setColorMode } = useColorModes('jumentix-frontend-theme')
+const sidebar = useSidebarStore()
+const { t } = useI18n()
+const { roles } = usePermissions()
+const tasks = useTaskStore()
+const { widgetsOverflow } = useShellViewport()
+
+const rightWidgets = computed(() => listToolbarWidgets(roles.value, tasks.active, 'right'))
+const leftWidgets = computed(() => listToolbarWidgets(roles.value, tasks.active, 'left'))
+const overflowWidgets = computed(() => (
+  widgetsOverflow.value
+    ? rightWidgets.value.filter((widget) => widget.id !== 'account')
+    : []
+))
+const pinnedRight = computed(() => (
+  widgetsOverflow.value
+    ? rightWidgets.value.filter((widget) => widget.id === 'account')
+    : rightWidgets.value
+))
+
+const updateHeaderShadow = () => {
+  headerClassNames.value =
+    document.documentElement.scrollTop > 0 ? 'mb-4 p-0 shadow-sm' : 'mb-4 p-0'
+}
+
+onMounted(() => {
+  document.addEventListener('scroll', updateHeaderShadow)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('scroll', updateHeaderShadow)
+})
+</script>
+
+<template>
+  <CHeader position="sticky" :class="headerClassNames" data-shell-header>
+    <CContainer class="border-bottom px-4" fluid>
+      <CHeaderToggler :aria-label="t('nav.toggleNavigation')" class="app-taskbar__touch" @click="sidebar.toggleVisible()" style="margin-inline-start: -14px">
+        <CIcon icon="cil-menu" size="lg" />
+      </CHeaderToggler>
+      <CHeaderNav class="d-none d-md-flex">
+        <component
+          :is="widget.component"
+          v-for="widget in leftWidgets"
+          :key="widget.id"
+          v-bind="widget.props"
+        />
+      </CHeaderNav>
+      <CHeaderNav class="ms-auto">
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
+        </li>
+        <CDropdown variant="nav-item" placement="bottom-end">
+          <CDropdownToggle :caret="false">
+            <CIcon v-if="colorMode === 'dark'" icon="cil-moon" size="lg" />
+            <CIcon v-else-if="colorMode === 'light'" icon="cil-sun" size="lg" />
+            <CIcon v-else icon="cil-contrast" size="lg" />
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <CDropdownItem
+              :active="colorMode === 'light'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('light')"
+            >
+              <CIcon class="me-2" icon="cil-sun" size="lg" /> Light
+            </CDropdownItem>
+            <CDropdownItem
+              :active="colorMode === 'dark'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('dark')"
+            >
+              <CIcon class="me-2" icon="cil-moon" size="lg" /> Dark
+            </CDropdownItem>
+            <CDropdownItem
+              :active="colorMode === 'auto'"
+              class="d-flex align-items-center"
+              component="button"
+              type="button"
+              @click="setColorMode('auto')"
+            >
+              <CIcon class="cil-contrast me-2" icon="cil-contrast" size="lg" /> Auto
+            </CDropdownItem>
+          </CDropdownMenu>
+        </CDropdown>
+        <CDropdown v-if="overflowWidgets.length" variant="nav-item" data-widget-overflow>
+          <CDropdownToggle :caret="false" :aria-label="t('toolbar.more')">
+            <CIcon icon="cil-options" size="lg" />
+          </CDropdownToggle>
+          <CDropdownMenu>
+            <div class="px-2 py-1">
+              <component
+                :is="widget.component"
+                v-for="widget in overflowWidgets"
+                :key="widget.id"
+                v-bind="widget.props"
+              />
+            </div>
+          </CDropdownMenu>
+        </CDropdown>
+        <li class="nav-item py-1">
+          <div class="vr h-100 mx-2 text-body text-opacity-75"></div>
+        </li>
+        <component
+          :is="widget.component"
+          v-for="widget in pinnedRight"
+          :key="widget.id"
+          v-bind="widget.props"
+        />
+      </CHeaderNav>
+    </CContainer>
+    <CContainer class="px-4" fluid>
+      <AppBreadcrumb />
+    </CContainer>
+  </CHeader>
+</template>

package/templates/frontend/src/components/AppHeaderDropdownAccnt.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+import {
+  CAvatar, CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownMenu, CDropdownToggle
+} from '@coreui/vue';
+
+import { useI18n } from '@/i18n';
+import { useAuthStore } from '@/stores/auth';
+import { useProfileStore } from '@/stores/profile';
+
+/**
+ * Account menu (JUM-781): only what the product has — the signed-in identity,
+ * Profile, language and Logout. The CoreUI template entries (Updates 42,
+ * Messages, Payments, Lock Account…) were dead links and are gone.
+ */
+const router = useRouter();
+const auth = useAuthStore();
+const profile = useProfileStore();
+const { t, locale, locales, setLocale } = useI18n();
+
+const initials = computed(() => {
+  const first = profile.record?.firstName?.trim() ?? '';
+  const last = profile.record?.lastName?.trim() ?? '';
+  const fromName = `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+  return fromName || (auth.username.charAt(0).toUpperCase() || 'J');
+});
+
+const displayName = computed(() => (
+  profile.record ? `${profile.record.firstName ?? ''} ${profile.record.lastName ?? ''}`.trim() : auth.username
+));
+
+const goToProfile = async () => {
+  await router.push('/profile');
+};
+
+const logout = async () => {
+  try {
+    await auth.logout();
+  } finally {
+    profile.reset();
+    await router.push('/login');
+  }
+};
+</script>
+
+<template>
+  <CDropdown placement="bottom-end" variant="nav-item">
+    <CDropdownToggle class="py-0 pe-0" :caret="false" :aria-label="t('nav.account')">
+      <CAvatar
+        v-if="profile.record?.avatar"
+        :src="String(profile.record.avatar)"
+        size="md"
+      />
+      <CAvatar v-else color="primary" text-color="white" size="md">{{ initials }}</CAvatar>
+    </CDropdownToggle>
+    <CDropdownMenu class="pt-0">
+      <CDropdownHeader
+        component="h6"
+        class="bg-body-secondary text-body-secondary fw-semibold mb-2 rounded-top"
+      >
+        {{ displayName || t('nav.account') }}
+      </CDropdownHeader>
+      <CDropdownItem component="button" @click="goToProfile">
+        <CIcon icon="cil-user" /> {{ t('nav.profile') }}
+      </CDropdownItem>
+      <CDropdownHeader component="h6" class="bg-body-secondary text-body-secondary fw-semibold my-2">
+        {{ t('app.language') }}
+      </CDropdownHeader>
+      <CDropdownItem
+        v-for="code in locales"
+        :key="code"
+        component="button"
+        :active="locale === code"
+        :aria-pressed="locale === code"
+        @click="setLocale(code)"
+      >
+        {{ code === 'pt-BR' ? 'Português (BR)' : 'English' }}
+      </CDropdownItem>
+      <CDropdownDivider />
+      <CDropdownItem component="button" @click="logout">
+        <CIcon icon="cil-lock-locked" /> {{ t('nav.logout') }}
+      </CDropdownItem>
+    </CDropdownMenu>
+  </CDropdown>
+</template>

package/templates/frontend/src/components/AppSidebar.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router'
+
+import AppSidebarNav from '@/components/AppSidebarNav.vue'
+import { useSidebarStore } from '@/stores/sidebar'
+
+const sidebar = useSidebarStore()
+
+const handleVisibleChange = (value: boolean) => {
+  sidebar.toggleVisible(value)
+}
+</script>
+
+<template>
+  <CSidebar
+    class="border-end"
+    colorScheme="dark"
+    position="fixed"
+    :unfoldable="sidebar.unfoldable"
+    :visible="sidebar.visible"
+    @visible-change="handleVisibleChange"
+  >
+    <CSidebarHeader class="border-bottom">
+      <RouterLink custom to="/" v-slot="{ href, navigate }">
+        <CSidebarBrand v-bind="$attrs" as="a" :href="href" @click="navigate">
+          <span class="sidebar-brand-full fw-bold fs-5">Jumentix</span>
+          <span class="sidebar-brand-narrow fw-bold">J</span>
+        </CSidebarBrand>
+      </RouterLink>
+      <CCloseButton class="d-lg-none" dark @click="sidebar.toggleVisible()" />
+    </CSidebarHeader>
+    <AppSidebarNav />
+    <CSidebarFooter class="border-top d-none d-lg-flex">
+      <CSidebarToggler @click="sidebar.toggleUnfoldable()" />
+    </CSidebarFooter>
+  </CSidebar>
+</template>