mobile menu

src/App.vue

@@ -2,7 +2,7 @@
   <div
     class="grid grid-cols-1 min-h-[100vh] w-full"
     :class="{
-      'grid-rows-[3.5rem_auto_2rem_2rem]': !fullscreen,
+      'grid-rows-[3.5rem_auto_4rem_2rem] xl:grid-rows-[3.5rem_auto_2rem_2rem]': !fullscreen,
       'grid-rows-1': fullscreen,
       'h-[100vh]': fullscreen,
       'overflow-y-hidden': fullscreen,
@@ -15,26 +15,22 @@
         <span class="text-2xl font-semibold">RopeScore Live</span>
       </router-link>
 
-      <nav>
-        <text-button @click="_theme = _theme === 'light' ? 'dark' : 'light'">
-          Theme ({{ _theme === 'light' ? 'L' : (_theme === 'dark' ? 'D' : '?') }})
-        </text-button>
-        <button-link to="/podium">
-          Podium
-        </button-link>
-        <button-link to="/device-stream">
-          Device Stream
-        </button-link>
-        <button-link to="/on-floor-wall">
-          On Floor Wall
-        </button-link>
-        <button-link to="/groups">
-          Groups
-        </button-link>
-        <button-link to="/">
-          Dashboard
+      <nav class="flex-row-reverse hidden lg:flex">
+        <button-link v-for="menuItem of menuItems" :key="menuItem.title" :to="menuItem.path">
+          {{ menuItem.title }}
         </button-link>
       </nav>
+      <dialog-button ref="menuDialog" label="Menu">
+        <div class="flex flex-col gap-6">
+          <button-link
+            v-for="menuItem of menuItems"
+            :key="menuItem.title"
+            :to="menuItem.path"
+          >
+            {{ menuItem.title }}
+          </button-link>
+        </div>
+      </dialog-button>
     </header>
 
     <main v-if="!fullscreen" class="px-2 py-4">
@@ -59,26 +55,33 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useHead } from '@vueuse/head'
-import { useRawTheme, useTheme } from './hooks/theme'
+import { useTheme } from './hooks/theme'
 
-import { ButtonLink, TextButton } from '@ropescore/components'
+import { ButtonLink, DialogButton } from '@ropescore/components'
 import SystemSettingsFooter from './components/SystemSettingsFooter.vue'
 
 useHead({
   titleTemplate: title => !title ? 'RopeScore Live' : `${title} | RopeScore Live`
 })
 
 const route = useRoute()
+const router = useRouter()
+
+const menuItems = computed(() => router.getRoutes().filter(route => route.meta?.menu != null).map(route => ({ title: route.meta.menu, path: route.path, order: (route.meta.menuOrder ?? Infinity) as number })).sort((a, b) => a.order - b.order))
+const menuDialog = ref<typeof DialogButton>()
 
 const fullscreen = computed(() => {
   return !!route.meta.fullscreen
 })
 
-const _theme = useRawTheme()
 const theme = useTheme()
 
 const version = (import.meta.env.VITE_COMMIT_REF ?? 'dev').toString().substring(0, 7)
+
+router.afterEach(() => {
+  menuDialog.value?.close()
+})
 </script>

src/components/SystemSettingsFooter.vue

@@ -1,23 +1,20 @@
 <script setup lang="ts">
-import { TextField, TextButton, SelectField } from '@ropescore/components'
+import { SelectField } from '@ropescore/components'
 import { apiDomain, localManual, localApis } from '../apollo'
-import { ref } from 'vue'
 import useFirebaseAuth from '../hooks/firebase-auth'
+import { keyColors, themes, useKeyColor, useTheme } from '../hooks/theme'
 
 const auth = useFirebaseAuth()
 
-const newName = ref('')
+const theme = useTheme()
+const keyColor = useKeyColor()
 </script>
 
 <template>
   <div
-    class="grid bg-white border-t px-4 items-stretch gap-4"
-    :class="{
-      'grid-cols-1': !auth.isAuthenticated.value,
-      'grid-cols-[max-content_max-content_auto]': auth.isAuthenticated.value
-    }"
+    class="grid bg-white border-t items-stretch grid-cols-[max-content_auto] grid-rows-2 xl:grid-cols-[max-content_max-content_max-content_auto] xl:grid-rows-1"
   >
-    <div class="flex items-center gap-2">
+    <div class="flex items-center px-4 gap-2 lt-xl:border-b">
       <span>Server: {{ apiDomain }}</span>
       <select-field
         v-model="localManual"
@@ -27,26 +24,28 @@ const newName = ref('')
         class="!min-w-[12ch]"
       />
     </div>
-
-    <p v-if="auth.isAuthenticated.value" class="border-l pl-4 flex items-center">
+    <p v-if="auth.isAuthenticated.value" class="border-l lt-xl:border-b px-4 flex items-center">
       User ID: <code class="bg-gray-100 px-2 rounded">{{ auth.userLoading.value ? 'Loading...' : auth.user.value?.id }}</code>
     </p>
+    <p v-else />
 
-    <!-- <form v-if="auth.isAuthenticated.value" class="border-l pl-4 grid grid-cols-[max-content_auto_max-content_max-content] gap-2 items-center" @submit.prevent="auth.update({ name: newName })">
-      System name:
-      <text-field
-        :model-value="auth.user.value?.name ?? ''"
-        label="System Name"
+    <div class="xl:border-l px-4 flex items-center gap-2">
+      <span>Theme:</span>
+      <select-field
+        v-model="theme"
         dense
-        :disabled="auth.userLoading.value"
-        @update:model-value="newName = ($event as string ?? '')"
+        label="Theme"
+        :data-list="themes"
       />
-      <text-button color="blue" dense :loading="auth.userLoading.value">
-        Update
-      </text-button>
-      <text-button color="orange" dense :loading="auth.userLoading.value" type="button" @click="auth.logout()">
-        Log out
-      </text-button>
-    </form> -->
+    </div>
+    <div class="border-l no-wrap px-4 flex items-center gap-2">
+      <span>Key Color:</span>
+      <select-field
+        v-model="keyColor"
+        dense
+        label="Key color"
+        :data-list="keyColors"
+      />
+    </div>
   </div>
 </template>

src/router.ts

@@ -4,22 +4,22 @@ import { getAuth } from 'firebase/auth'
 const router = createRouter({
   history: createWebHistory(),
   routes: [
-    { path: '/', component: async () => import('./views/Home.vue') },
+    { path: '/', component: async () => import('./views/Home.vue'), meta: { menu: 'Dashboard', menuOrder: 1 } },
     { path: '/auth', component: async () => import('./views/Auth.vue') },
 
-    { path: '/groups', component: async () => import('./views/Groups.vue'), meta: { authRequired: true } },
+    { path: '/groups', component: async () => import('./views/Groups.vue'), meta: { authRequired: true, menu: 'Groups', menuOrder: 2 } },
     { path: '/groups/:groupId/live', component: async () => import('./views/Live.vue'), meta: { fullscreen: true, authRequired: true } },
     { path: '/groups/:groupId/on-floor', component: async () => import('./views/OnFloor.vue'), meta: { fullscreen: true, authRequired: true } },
     { path: '/groups/:groupId/next-up', component: async () => import('./views/NextUp.vue'), meta: { fullscreen: true, authRequired: true } },
     { path: '/groups/:groupId/leaderboard', component: async () => import('./views/Leaderboard.vue'), meta: { fullscreen: true, authRequired: true } },
 
-    { path: '/device-stream', component: async () => import('./views/DeviceStreamConfig.vue'), meta: { authRequired: true } },
+    { path: '/device-stream', component: async () => import('./views/DeviceStreamConfig.vue'), meta: { authRequired: true, menu: 'Device Stream', menuOrder: 3 } },
     { path: '/device-stream/live', component: async () => import('./views/DeviceStreamLive.vue'), meta: { fullscreen: true, authRequired: true } },
 
-    { path: '/podium', component: async () => import('./views/PodiumConfig.vue') },
+    { path: '/podium', component: async () => import('./views/PodiumConfig.vue'), meta: { menu: 'Podium', menuOrder: 4 } },
     { path: '/podium/live', component: async () => import('./views/PodiumLive.vue'), meta: { fullscreen: true } },
 
-    { path: '/on-floor-wall/', component: async () => import('./views/OnFloorWallConfig.vue') },
+    { path: '/on-floor-wall/', component: async () => import('./views/OnFloorWallConfig.vue'), meta: { menu: 'On Floor Wall', menuOrder: 5 } },
     { path: '/on-floor-wall/:vendor/:id', component: async () => import('./views/OnFloorWallLive.vue'), meta: { fullscreen: true } }
   ]
 })

src/views/Groups.vue

@@ -1,17 +1,4 @@
 <template>
-  <div>
-    <select-field
-      v-model="theme"
-      label="Theme"
-      :data-list="themes"
-    />
-    <select-field
-      v-model="keyColor"
-      label="Key color"
-      :data-list="keyColors"
-    />
-  </div>
-
   <template v-for="groupType in ['uncompleted', 'completed']" :key="groupType">
     <component :is="groupType === 'completed' ? 'details' : 'div'" class="mt-4">
       <summary v-if="groupType === 'completed'">
@@ -74,13 +61,13 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import useFirebaseAuth from '../hooks/firebase-auth'
 import { ResultVersionType, useGroupsQuery } from '../graphql/generated'
 import { useHead } from '@vueuse/head'
-import { keyColors, themes, useKeyColor, useTheme } from '../hooks/theme'
+import { useKeyColor, useTheme } from '../hooks/theme'
 
-import { ButtonLink, SelectField } from '@ropescore/components'
+import { ButtonLink } from '@ropescore/components'
 
 useHead({
   title: 'Groups'