create webapp stencil with side bar, routes and fake login

cmd/cli/templates/vue/MainLayout.vue.tmpl

@@ -0,0 +1,67 @@
+<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">
+      <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>