From bfb60f146724219379879468802ee65d02746156 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 20 Jan 2025 17:36:41 +0000
Subject: Improve hamburger menu

---
 components/Sidebar.vue | 50 ++++++++++++++++++++++++++++++
 layouts/default.vue    | 84 +++++++++++++++++++++-----------------------------
 pages/events.vue       | 11 ++-----
 3 files changed, 88 insertions(+), 57 deletions(-)
 create mode 100644 components/Sidebar.vue

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
new file mode 100644
index 0000000..755f200
--- /dev/null
+++ b/components/Sidebar.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const scheduleStore = useScheduleStore();
+</script>
+
+<template>
+  <div class="sidebar">
+    <Panel class="conference">
+      <span class="conference-title">{{ scheduleStore.schedule?.conference.title }}</span>
+      <span class="conference-venue">{{ scheduleStore.schedule?.conference.venue }}</span>
+      <span class="conference-city">{{ scheduleStore.schedule?.conference.city }}</span>
+    </Panel>
+    
+    <Nav />
+
+    <div class="info">
+      <span>Times listed are in local time ({{ scheduleStore.schedule?.conference.timeZoneName }})</span>
+    </div>
+  </div>
+</template>
+
+<style>
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.conference {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.conference-title {
+  font-weight: 600;
+  font-size: var(--text-normal);
+}
+
+.conference-venue, .conference-city {
+  font-size: var(--text-small);
+  color: var(--color-text-muted);
+}
+
+.info {
+  font-size: var(--text-smaller);
+  color: var(--color-text-muted);
+  margin: 0 1rem;
+}
+  
+</style>
\ No newline at end of file
diff --git a/layouts/default.vue b/layouts/default.vue
index 125ff34..1f291ef 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -2,6 +2,7 @@
 import { LucideCross, LucideMenu, LucideX } from "lucide-vue-next";
 import Dialog from "~/components/Dialog.vue";
 import EventDetail from "~/components/EventDetail.vue";
+import Sidebar from "~/components/Sidebar.vue";
 
 definePageMeta({
   middleware: ["logged-in"]
@@ -81,27 +82,22 @@ router.beforeEach((to, from) => {
 
 <template>
   <div class="planner-container">
-    <header class="planner-header">
-      <h1 class="planner-title">Conference Planner</h1>
-      <span class="hamburger" @click="showHamburger = !showHamburger">
-        <LucideMenu :size="24" v-if="!showHamburger"/>
-        <LucideX :size="24" v-else />
-      </span>
+    <header>
+      <div class="planner-header">
+        <h1 class="planner-title">Conference Planner</h1>
+        <span class="hamburger" @click="showHamburger = !showHamburger">
+          <LucideMenu :size="24" v-if="!showHamburger"/>
+          <LucideX :size="24" v-else />
+        </span>
+      </div>
+      <div class="hamburger-content" v-if="showHamburger">
+        <Sidebar />
+      </div>
     </header>
     <div class="planner-layout">
       <template v-if="scheduleStore.schedule">
-        <aside :class="['planner-sidebar', { show: showHamburger }]">
-          <Panel class="conference">
-            <span class="conference-title">{{ scheduleStore.schedule?.conference.title }}</span>
-            <span class="conference-venue">{{ scheduleStore.schedule?.conference.venue }}</span>
-            <span class="conference-city">{{ scheduleStore.schedule?.conference.city }}</span>
-          </Panel>
-          
-          <Nav />
-
-          <div class="info">
-            <span>Times listed are in local time ({{ scheduleStore.schedule?.conference.timeZoneName }})</span>
-          </div>
+        <aside class="planner-sidebar">
+          <Sidebar />
         </aside>
 
         <main class="planner-content">
@@ -135,7 +131,12 @@ router.beforeEach((to, from) => {
 .planner-container {
   min-height: 100vh;
   background-color: var(--color-background); 
-  overflow-x: hidden;
+}
+
+header {
+  position: sticky;
+  top: 0;
+  z-index: 9999;
 }
 
 .planner-header {
@@ -169,33 +170,10 @@ router.beforeEach((to, from) => {
 .planner-sidebar {
   width: 100%;
   max-width: 300px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.conference {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.conference-title {
-  font-weight: 600;
-  font-size: var(--text-normal);
-}
-
-.conference-venue, .conference-city {
-  font-size: var(--text-small);
-  color: var(--color-text-muted);
+  position: sticky;
+  top: 0;
 }
 
-.info {
-  font-size: var(--text-smaller);
-  color: var(--color-text-muted);
-  margin: 0 1rem;
-}
-  
 .loading-text {
   display: flex;
   justify-content: center;
@@ -213,11 +191,13 @@ router.beforeEach((to, from) => {
   display: none;
 }
       
-@media (max-width: 768px) {
-  /* .planner-header {
-    padding: 1rem 0.5rem;
-  } */
+@media (min-width: 768px) {
+  .hamburger-content {
+    display: none;
+  }
+}
 
+@media (max-width: 768px) {
   .planner-layout {
     flex-direction: column;
     padding: 0.5rem;
@@ -228,6 +208,12 @@ router.beforeEach((to, from) => {
     cursor: pointer;
   }
   
+  .hamburger-content {
+    background-color: var(--color-background-muted);
+    padding: 1rem;
+    border-bottom: 2px solid var(--color-border)
+  }
+  
   .planner-sidebar {
     max-width: 100%;
     display: none;
@@ -237,5 +223,5 @@ router.beforeEach((to, from) => {
     display: flex;
   }
 }
-
+      
 </style>
diff --git a/pages/events.vue b/pages/events.vue
index 33e6057..080bd8f 100644
--- a/pages/events.vue
+++ b/pages/events.vue
@@ -10,11 +10,7 @@ const scheduleStore = useScheduleStore();
     <h2 class="events-title">Events</h2>
     <div v-for="[day, events] of Object.entries(scheduleStore.eventsPerDay)" :key="day">
       <ul class="events-list">
-        <li 
-          v-for="event in events" 
-          :key="event.id" 
-          class="event-item"
-        >
+        <li v-for="event in events" :key="event.id" class="event-item" :data-index="event.id">
           <EventListing :event="event" />
         </li>
       </ul>
@@ -31,7 +27,7 @@ const scheduleStore = useScheduleStore();
 }
 
 .event-item {
-  border-bottom: 1px solid var(--color-background-muted); 
+  border-bottom: 1px solid var(--color-background-muted);
 }
 
 .events-title {
@@ -39,7 +35,6 @@ const scheduleStore = useScheduleStore();
 }
 
 .event-item:last-child {
-  border-bottom: none; 
+  border-bottom: none;
 }
-
 </style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2