diff options
| -rw-r--r-- | components/Sidebar.vue | 50 | ||||
| -rw-r--r-- | layouts/default.vue | 84 | ||||
| -rw-r--r-- | pages/events.vue | 11 |
3 files changed, 88 insertions, 57 deletions
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 |