68 lines
2.0 KiB
Cheetah
68 lines
2.0 KiB
Cheetah
<template>
|
|
<div class="flex">
|
|
<!-- Pass links, a custom theme and include optional branding via the "brand" slot -->
|
|
<SideNavBar :links="navLinks" :theme="customTheme">
|
|
<!-- Branding slot: the logo or app name will be sized by the sidebar -->
|
|
<template #brand>
|
|
<!-- For example, an image with controlled size -->
|
|
<!-- <img src="/src/assets/logo.svg" alt="App Logo" class="w-full h-full object-contain" />-->
|
|
<!-- Alternatively, you could use a text element here -->
|
|
<div class="flex flex-col justify-around w-full h-full">
|
|
<span class="text-xl font-bold">{{ .AppNameCaps }}</span>
|
|
</div>
|
|
</template>
|
|
</SideNavBar>
|
|
|
|
<main class="flex-1 p-4 bg-blue-50 h-screen overflow-auto">
|
|
<Header />
|
|
<router-view />
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, markRaw } from 'vue';
|
|
import SideNavBar from '../components/SideNavBar.vue';
|
|
import IconHome from '../components/icons/IconHome.vue';
|
|
import IconGear from '../components/icons/IconGear.vue';
|
|
import IconArrowFromShapeRight from '../components/icons/IconArrowFromShapeRight.vue';
|
|
import Header from '../components/Header.vue';
|
|
import type { NavLink, Theme } from '../components/SideNavBar.vue';
|
|
|
|
const homeIcon = markRaw(IconHome);
|
|
const gearIcon = markRaw(IconGear);
|
|
const logoutIcon = markRaw(IconArrowFromShapeRight);
|
|
|
|
const navLinks = ref<NavLink[]>([
|
|
{
|
|
title: 'Home',
|
|
icon: homeIcon,
|
|
route: '/',
|
|
subLinks: [
|
|
{ title: 'Overview', route: '/overview' },
|
|
]
|
|
},
|
|
{
|
|
title: 'Settings',
|
|
icon: gearIcon,
|
|
route: '/settings'
|
|
},
|
|
{
|
|
title: 'Logout',
|
|
icon: logoutIcon,
|
|
route: '/logout'
|
|
}
|
|
]);
|
|
|
|
// Define a custom theme for the sidebar.
|
|
const customTheme: Theme = {
|
|
// sidebarBg: "bg-blue-800",
|
|
// sidebarText: "text-gray-100",
|
|
// sidebarLink: "rounded-md",
|
|
// sidebarHover: "hover:bg-blue-700",
|
|
// sidebarActive: "bg-blue-900",
|
|
// toggleButtonBg: "bg-blue-700"
|
|
};
|
|
|
|
</script>
|