add header toggle (intended for mobile)

projects/frontend/src/main.vue

@@ -30,6 +30,7 @@ const acknowledged = ref(false)
 const storageId = ref('')
 const routeId = ref('')
 const warning = ref({} as WarningModal)
+const headerToggled = ref(false)
 const breadcrumbs = computed({
   get() { return routeStore._breadcrumbs },
   set() {}
@@ -117,6 +118,12 @@ const handlePageClosed = async (scriptUrl?: string) => {
   }
 }
 
+const toggleHeader = (event: Event, value: boolean) => {
+  event.preventDefault()
+  headerToggled.value = value
+  console.log(value)
+}
+
 onMounted(async () => {
   await refresh()
   firstInit.value = true
@@ -133,6 +140,7 @@ onMounted(async () => {
 #main-container
   header(
     v-if='firstInit && !!globalConfig.header'
+    :class='{ visible: headerToggled }'
   )
     nav#header-nav
       ul
@@ -159,6 +167,18 @@ onMounted(async () => {
           span.spacer /
     #header-controls
       ThemePicker
+      button.input(
+        @click='($evt) => toggleHeader($evt, false)'
+        class='header-toggle'
+      )
+        span Close Menu
+  button.input(
+    v-if='firstInit && !!globalConfig.header'
+    @click='($evt) => toggleHeader($evt, true)'
+    class='header-toggle'
+    :class='{ visible: !headerToggled }'
+  )
+    span Menu
   main(
     v-if='ready'
   )