The marathon header so that it spans the page

Removes the name from the sidebar When sidebar collapses, it joins the name in the header Related to Issue #44
oengusio · Dec 29, 2021 · cfc1790 · cfc1790
1 parent 6decf1d
commit cfc1790
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 62 deletions.
diff --git a/components/marathon/Header.vue b/components/marathon/Header.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="box">
+    <div class="main-header">
+      <h3 class="title is-3">
+        {{ marathonName }}
+      </h3>
+      <button v-if="collapsed" class="button navbar-burger" :class="buttonClass" @click="toggleSidebar">
+        <span />
+        <span />
+        <span />
+      </button>
+    </div>
+
+    <div v-if="collapsed" class="menu-sections">
+      <MarathonSidebarOverview :marathon-id="marathonId" collapsed />
+      <MarathonSidebarTracker :marathon-id="marathonId" collapsed />
+      <MarathonSidebarAdmin :marathon-id="marathonId" collapsed />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { FullMarathon, MarathonState } from '~/types/api/marathon';
+import { IsActive } from '~/types/components/is-active';
+
+export default Vue.extend({
+  props: {
+    marathonId: {
+      type: String,
+      default: '',
+    },
+    collapsed: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  async fetch(): Promise<void> {
+    await Promise.allSettled([
+      this.getMarathon(this.marathonId),
+    ]);
+  },
+
+  computed: {
+    marathon(): FullMarathon|undefined {
+      return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
+    },
+    marathonName(): string {
+      let marathonName = '';
+      if (this.marathon) {
+        marathonName = this.marathon.name;
+      }
+      if (!marathonName && this.marathonId) {
+        const frontPage = (this.$store.state.api.marathon as MarathonState).frontPage;
+        if (frontPage) {
+          marathonName = [ ...frontPage.live, ...frontPage.next, ...frontPage.open ].find(marathon => marathon.id === this.marathonId)?.name ?? marathonName;
+        }
+      }
+      return marathonName;
+    },
+    buttonClass(): IsActive {
+      return {
+        'is-active': !this.collapsed,
+      };
+    },
+  },
+
+  methods: {
+    toggleSidebar(): void {
+      this.$emit('update:collapsed', !this.collapsed);
+    },
+    ...mapActions({
+      getMarathon: 'api/marathon/get',
+    }),
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.main-header {
+  display: grid;
+  grid-template-columns: auto min-content;
+  column-gap: var(--spacing);
+
+  // Force this element to always display, Bulma wants to hide it by default
+  @media (min-width: 1024px) {
+    .navbar-burger {
+      display: block;
+    }
+  }
+}
+
+.menu-sections {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/components/marathon/sidebar/Sidebar.vue b/components/marathon/sidebar/Sidebar.vue
@@ -1,15 +1,10 @@
 <template>
   <nav class="menu box" :class="{ collapsed }">
-    <div class="sidebar-header">
-      <h3 class="title is-3">
-        {{ marathonName }}
-      </h3>
-      <button class="button navbar-burger" :class="isActiveClass" @click="toggleSidebar">
-        <span />
-        <span />
-        <span />
-      </button>
-    </div>
+    <button class="button navbar-burger" :class="isActiveClass" @click="toggleSidebar">
+      <span />
+      <span />
+      <span />
+    </button>
 
     <div class="menu-sections">
       <MarathonSidebarOverview :marathon-id="marathonId" :collapsed="collapsed" class="menu-section" />
@@ -23,8 +18,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapActions } from 'vuex';
-import { FullMarathon, MarathonState } from '~/types/api/marathon';
 import { IsActive } from '~/types/components/is-active';
 
 export default Vue.extend({
@@ -39,29 +32,7 @@ export default Vue.extend({
     },
   },
 
-  async fetch(): Promise<void> {
-    await Promise.allSettled([
-      this.getMarathon(this.marathonId),
-    ]);
-  },
-
   computed: {
-    marathon(): FullMarathon|undefined {
-      return (this.$store.state.api.marathon as MarathonState).marathons[this.marathonId];
-    },
-    marathonName(): string {
-      let marathonName = '';
-      if (this.marathon) {
-        marathonName = this.marathon.name;
-      }
-      if (!marathonName && this.marathonId) {
-        const frontPage = (this.$store.state.api.marathon as MarathonState).frontPage;
-        if (frontPage) {
-          marathonName = [ ...frontPage.live, ...frontPage.next, ...frontPage.open ].find(marathon => marathon.id === this.marathonId)?.name ?? marathonName;
-        }
-      }
-      return marathonName;
-    },
     isActiveClass(): IsActive {
       return {
         'is-active': !this.collapsed,
@@ -73,36 +44,27 @@ export default Vue.extend({
     toggleSidebar(): void {
       this.$emit('update:collapsed', !this.collapsed);
     },
-    ...mapActions({
-      getMarathon: 'api/marathon/get',
-    }),
   },
 });
 </script>
 
 <style lang="scss" scoped>
-  .sidebar-header {
-    display: grid;
-    grid-template-columns: auto min-content;
-    column-gap: var(--spacing);
-
-    // Force this element to always display, Bulma wants to hide it by default
-    @media (min-width: 1024px) {
-      .navbar-burger {
-        display: block;
-      }
-    }
+// Force this element to always display, Bulma wants to hide it by default
+@media (min-width: 1024px) {
+  .navbar-burger {
+    display: block;
   }
+}
 
-  // This mimicks the Bulma styling, but with our components
-  .menu:not(.collapsed) .menu-section:not(:first-child) {
-    margin-block-start: 1em;
-  }
+// This mimicks the Bulma styling, but with our components
+.menu:not(.collapsed) .menu-section:not(:first-child) {
+  margin-block-start: 1em;
+}
 
-  .collapsed {
-    .menu-sections {
-      display: flex;
-      flex-wrap: wrap;
-    }
+.collapsed {
+  .menu-sections {
+    display: flex;
+    flex-wrap: wrap;
   }
+}
 </style>
diff --git a/pages/marathon/_marathon.vue b/pages/marathon/_marathon.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="marathon-container" :class="{ collapsed }">
-    <MarathonSidebar class="marathon-sidebar" :marathon-id="marathonId" :collapsed.sync="collapsed" />
+    <MarathonHeader class="marathon-header" :marathon-id="marathonId" :collapsed.sync="collapsed" />
+    <MarathonSidebar v-show="!collapsed" class="marathon-sidebar" :marathon-id="marathonId" :collapsed.sync="collapsed" />
     <NuxtChild class="marathon-view" />
   </div>
 </template>
@@ -64,24 +65,38 @@ export default Vue.extend({
 <style lang="scss" scoped>
 .marathon-container {
   width: 100%;
-  display: flex;
-  align-items: flex-start;
-  align-items: start;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto 1fr;
+  grid-template-areas:
+    'sidebar header'
+    'sidebar view';
   gap: var(--spacing);
 }
 
+.marathon-header {
+  grid-area: header;
+}
+
 .marathon-sidebar {
+  grid-area: sidebar;
   min-width: min(300px, 100%);
 }
 
 .marathon-view {
+  grid-area: view;
   width: 100%;
   flex-grow: 5;
 }
 
 @media (max-width: 1023px) {
   .marathon-container {
-    flex-direction: column;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto 1fr;
+    grid-template-areas:
+      'header'
+      'sidebar'
+      'view';
   }
 
   .marathon-sidebar {