ui overwhaul

front/src/components/RecentWhiteboardsList.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 
 import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { useWhiteboardStore } from '@/stores/whiteboards'
 import RecentWhiteboardsItem from './RecentWhiteboardsItem.vue'
 
+const router = useRouter()
 const store = useWhiteboardStore()
 
 onMounted(() => {
@@ -17,7 +19,7 @@ const sortedWhiteboards = computed(() =>
 )
 
 const handleClick = (whiteboard: any) => {
-  console.log('Clicked:', whiteboard)
+  router.push({ name: 'whiteboard', params: { id: whiteboard.id } })
 }
 
 </script>

front/src/components/RecentWhiteboardsPanel.vue

@@ -6,11 +6,24 @@ import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
 
 <template>
 
-  <div class="whiteboards-panel card border-secondary shadow-sm h-100">
-    <div class="card-header bg-light text-dark">
-      Recent Whiteboards
+  <div
+    id="recentWhiteboardsSidebar"
+    class="offcanvas offcanvas-start bg-dark text-light"
+    tabindex="-1"
+    aria-labelledby="recentWhiteboardsSidebarLabel"
+  >
+    <div class="offcanvas-header border-bottom border-secondary">
+      <h5 id="recentWhiteboardsSidebarLabel" class="offcanvas-title">
+        Recent Whiteboards
+      </h5>
+      <button
+        type="button"
+        class="btn-close btn-close-white"
+        data-bs-dismiss="offcanvas"
+        aria-label="Close"
+      />
     </div>
-    <div class="card-body p-0 overflow-auto">
+    <div class="offcanvas-body p-0">
       <RecentWhiteboardsList />
     </div>
   </div>
@@ -19,9 +32,9 @@ import RecentWhiteboardsList from './RecentWhiteboardsList.vue'
 
 <style scoped>
 
-.whiteboards-panel {
-  max-height: 500px;
-  width: 100%;
+#recentWhiteboardsSidebar.offcanvas-start {
+  top: 56px;
+  height: calc(100vh - 56px);
 }
 
 </style>

front/src/components/WhiteboardHistoryList.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { useWhiteboardStore } from '@/stores/whiteboards'
 import WhiteboardHistoryItem from './WhiteboardHistoryItem.vue'
 
+const router = useRouter()
 const store = useWhiteboardStore()
 
 onMounted(() => {
@@ -16,7 +18,7 @@ const sortedWhiteboards = computed(() =>
 )
 
 const handleClick = (whiteboard: any) => {
-  console.log('Clicked:', whiteboard)
+  router.push({ name: 'whiteboard', params: { id: whiteboard.id } })
 }
 </script>
 

front/src/components/WhiteboardHistorySidebar.vue

@@ -6,17 +6,6 @@ import WhiteboardHistoryList from './WhiteboardHistoryList.vue'
 
 <template>
 
-  <button
-    class="btn btn-dark position-fixed top-50 start-0 translate-middle-y rounded-0 rounded-end py-3 px-2"
-    type="button"
-    data-bs-toggle="offcanvas"
-    data-bs-target="#whiteboardSidebar"
-    aria-controls="whiteboardSidebar"
-    style="z-index: 1040; writing-mode: vertical-rl;"
-  >
-    My Whiteboards
-  </button>
-
   <div
     id="whiteboardSidebar"
     class="offcanvas offcanvas-start bg-dark text-light"