ui overwhaul

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>