Start sorting out basic layout elements

html/template/sync/authenticated.html

@@ -15,6 +15,6 @@
 		{{ if not .Config.IsProductionEnvironment }}
 			<div id="flogo"></div>
 		{{ end }}
-		<script src="{{ bundlePathJS }}"></script>
+		<script src="{{ bundlePathJS }}" type="module"></script>
 	</body>
 </html>

ts/App.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="app-container">
+		<Sidebar />
+		<MainContent>
+			<router-view />
+		</MainContent>
+	</div>
+</template>
+
+<script setup lang="ts">
+import Sidebar from "./components/layout/Sidebar.vue";
+import MainContent from "./components/layout/MainContent.vue";
+</script>
+
+<style scoped>
+.app-container {
+	display: flex;
+	height: 100vh;
+}
+</style>

ts/Home.vue

@@ -0,0 +1,10 @@
+<template>
+	<div>
+		<h1>Welcome Home</h1>
+		<p>This is the home page content.</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+// Component logic here
+</script>

ts/app.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import MapView from "./components/map-view.vue";
-
-const count = ref(0);
-const message = ref("Hello from Vue 3!");
-</script>
-
-<template>
-	<div>
-		<p>{{ message }}</p>
-		<button @click="count++">Count: {{ count }}</button>
-
-		<h2>Map Example:</h2>
-		<MapView />
-	</div>
-</template>
-
-<style scoped>
-button {
-	padding: 0.5rem 1rem;
-	font-size: 1rem;
-}
-</style>

ts/components/common/NavigationLink.vue

@@ -0,0 +1,30 @@
+<template>
+	<router-link :to="to" class="nav-link">
+		{{ label }}
+	</router-link>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	to: string;
+	label: string;
+}>();
+</script>
+
+<style scoped>
+.nav-link {
+	color: #ecf0f1;
+	text-decoration: none;
+	padding: 10px;
+	border-radius: 4px;
+	transition: background-color 0.2s;
+}
+
+.nav-link:hover {
+	background-color: #34495e;
+}
+
+.nav-link.router-link-active {
+	background-color: #3498db;
+}
+</style>

ts/components/layout/MainContent.vue

@@ -0,0 +1,18 @@
+<template>
+	<main class="main-content">
+		<slot />
+	</main>
+</template>
+
+<script setup lang="ts">
+// No imports needed for this simple component
+</script>
+
+<style scoped>
+.main-content {
+	flex: 1;
+	padding: 40px;
+	overflow-y: auto;
+	background-color: #f5f5f5;
+}
+</style>

ts/components/layout/Sidebar.vue

@@ -0,0 +1,29 @@
+<template>
+	<aside class="sidebar">
+		<h2>My App</h2>
+		<nav>
+			<NavigationLink to="/" label="Home" />
+			<NavigationLink to="/about" label="About" />
+		</nav>
+	</aside>
+</template>
+
+<script setup lang="ts">
+import NavigationLink from "../common/NavigationLink.vue";
+</script>
+
+<style scoped>
+.sidebar {
+	width: 250px;
+	background-color: #2c3e50;
+	color: white;
+	padding: 20px;
+}
+
+nav {
+	margin-top: 30px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+</style>

ts/global.d.ts

@@ -4,7 +4,6 @@ declare global {
 	interface Window {
 		Alpine: any;
 		SSEManager: any;
-		createAppPlanning: any;
 		bootstrap: typeof bootstrap;
 	}
 }

ts/main.ts

@@ -1,6 +1,6 @@
 import Alpine from "./vendor/alpinejs-3.15.8.js";
 import { createApp } from "vue";
-import App from "./app.vue";
+import App from "./App.vue";
 import { SSEManager } from "./sse-manager";
 //import { SetupSidebar } from "./sidebar";
 import "maplibre-gl/dist/maplibre-gl.css";
@@ -14,25 +14,12 @@ import "./style/style.scss";
 import * as bootstrap from "bootstrap";
 window.bootstrap = bootstrap;
 
-import { Planning } from "./app/planning";
-
 // Make Alpine available on window for inline Alpine
 window.Alpine = Alpine;
 
 // Make SSEManager available to all the JavaScript
 window.SSEManager = SSEManager;
 
-function createAppPlanning() {
-	const app = createApp({
-		data() {
-			return {
-				count: 0,
-			};
-		},
-	});
-}
-window.createAppPlanning = createAppPlanning;
-
 // Wait for DOM to be ready, then initialize Alpine
 document.addEventListener("DOMContentLoaded", () => {
 	Alpine.start();
@@ -63,16 +50,4 @@ interface GreetingComponent {
 	updateMessage(): void;
 }
 
-Alpine.data(
-	"greeting",
-	(): GreetingComponent => ({
-		message: "Welcome to Alpine + TypeScript!",
-		name: "World",
-
-		updateMessage() {
-			this.message = "Message updated at " + new Date().toLocaleTimeString();
-		},
-	}),
-);
-
 createApp(App).mount("#app");