4 files changed, 100 insertions, 5 deletions

diff --git a/components/Nav.vue b/components/Nav.vue
index 06a0295..280af02 100644
--- a/components/Nav.vue
+++ b/components/Nav.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { Calendar, Icon, SquareGanttChart, TrainTrack } from 'lucide-vue-next';
+
 const route = useRouter();
 
 const navList = ref([
-  { title: "Agenda", path: "/agenda", navigating: false },
-  { title: "Events", path: "/events", navigating: false },
-  { title: "Tracks", path: "/tracks", navigating: false },
+  { title: "Agenda", path: "/agenda", icon: Calendar, navigating: false },
+  { title: "Events", path: "/events", icon: SquareGanttChart, navigating: false },
+  { title: "Tracks", path: "/tracks", icon: TrainTrack, navigating: false },
 ])
 
 route.beforeEach((to, from, next) => {
@@ -26,14 +28,18 @@ route.afterEach(() => {
     <ul class="nav-list">
       <li v-for="item in navList" :key="item.title" :class="{ active: $route.path === item.path }">
         <NuxtLink :to="item.path">
-          <span>{{ item.title }}</span> <Spinner v-if="item.navigating" color="var(--color-text-muted)" :size="16"/></NuxtLink>
-          
+          <span class="text-icon"><component :is="item.icon" /> <span>{{ item.title }}</span></span> <Spinner v-if="item.navigating" color="var(--color-text-muted)" :size="16"/></NuxtLink>
       </li>
     </ul>
   </Panel>
 </template>
 
 <style scoped>
+.text-icon > svg {
+  width: var(--text-normal);
+  height: var(--text-normal);
+}
+
 .nav-list {
   list-style: none;
   padding: 0;
diff --git a/components/Panel.vue b/components/Panel.vue
index 8e72414..1e86ed1 100644
--- a/components/Panel.vue
+++ b/components/Panel.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ArrowRight } from 'lucide-vue-next';
 import { defineProps, type PropType } from 'vue';
 
 defineProps({
@@ -7,10 +8,27 @@ defineProps({
     required: false,
     default: 'normal',
   },
+  title: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  breadcrumbs: {
+    type: Array as PropType<Array<{ text: string, to: string }>>,
+    required: false,
+    default: () => [],
+  },
 });
 </script>
 <template>
   <div class="card" :class="kind">
+    <div v-if="title" class="card-title-container">
+      <span v-for="(breadcrumb, index) in breadcrumbs" class="breadcrumb" :key="index">
+        <NuxtLink :to="breadcrumb.to">{{ breadcrumb.text }}</NuxtLink>
+        <ArrowRight />
+      </span>
+      <span class="card-title"> {{ title }} </span>
+    </div>
     <slot />
   </div>
 </template>
@@ -21,6 +39,46 @@ defineProps({
   border-radius: 0.5rem; 
 }
 
+.card-title-container {
+  line-height: 1;
+  background-color: var(--color-background-muted);
+  padding: 1rem 1rem;
+  margin: -1rem -1rem 1rem -1rem;
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;;
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.card-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.breadcrumb {
+  font-size: 1.2rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.breadcrumb > svg {
+  width: 1.2rem;
+  height: 1.2rem;
+  color: var(--color-text-muted);
+}
+
+.breadcrumb > a {
+  color: var(--color-text-muted);
+}
+
+.breadcrumb > a:hover {
+  color: var(--color-primary);
+}
+
 .normal {
   background-color: white;
   border: 0.1rem solid var(--color-border);
diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index 0dca27a..3d33586 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -45,6 +45,8 @@ const timeUntilConferenceStart = computed(() => {
 
     <div class="info">
       <span>Times listed are in local time ({{ scheduleStore.schedule?.conference.timeZoneName }})</span>
+      
+      <Version />
     </div>
   </div>
 </template>
@@ -91,6 +93,9 @@ const timeUntilConferenceStart = computed(() => {
   font-size: var(--text-smaller);
   color: var(--color-text-muted);
   margin: 0 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
   
 </style>
\ No newline at end of file
diff --git a/components/Version.vue b/components/Version.vue
new file mode 100644
index 0000000..a5bca5e
--- /dev/null
+++ b/components/Version.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { Loader2Icon } from 'lucide-vue-next'
+
+const config = useRuntimeConfig();
+</script>
+
+<template>
+  <span>confplanner-web v{{ config.public.version }} ({{ config.public.gitSha }})</span>
+</template>
+
+<style scoped>
+.icon-loader {
+  animation: spin 1s linear infinite;
+  color: var(--color-text);
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+</style>