Add mobile navigation

Author: matteason

components/GvdHeader.vue

@@ -1,3 +1,19 @@
+<script setup lang="ts">
+import { useIsDesktop } from '~/composables/useIsDesktop'
+
+const isDesktop = useIsDesktop()
+const showMobileNav = ref(false)
+
+function toggleMobileNav() {
+  showMobileNav.value = !showMobileNav.value
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  showMobileNav.value = false;
+  next()
+})
+</script>
+
 <template>
   <header class="govuk-header gvd-header" role="banner">
     <div class="govuk-header__container govuk-width-container gvd-header__container gvd-width-container">
@@ -19,8 +35,12 @@
           </span>
         </a>
       </div>
+      <button v-if="!isDesktop" class="govuk-header__menu-button" :class="{ 'govuk-header__menu-button--open': showMobileNav }" aria-controls="gvd-navigation" :aria-expanded="showMobileNav" @click="toggleMobileNav">
+        Menu
+      </button>
     </div>
   </header>
+  <gvd-navigation :show-mobile-nav="showMobileNav"/>
 </template>
 
 <style lang="scss" scoped>

components/GvdNavigation.vue

@@ -1,20 +1,47 @@
 <script setup lang="ts">
+import { useIsDesktop } from '~/composables/useIsDesktop'
+
 const props = defineProps({
-  to: String
+  showMobileNav: Boolean
 })
 
 const currentPath = useRoute().path
+const isDesktop = useIsDesktop()
+
+const expandedSections = ref(new Array<string>)
+
+function pathToSubnavId(path: string) {
+  return `subnav-${path.replaceAll('/','')}`;
+}
+
+function toggleSection(path: string) {
+  if(expandedSections.value.includes(path)) {
+    expandedSections.value = expandedSections.value.filter(s => s !== path)
+  } else {
+    expandedSections.value.push(path)
+  }
+}
 </script>
 
 <template>
-  <nav id="gvd-navigation" class="gvd-navigation govuk-clearfix" role="navigation" aria-labelledby="gvd-navigation-heading">
+  <nav id="gvd-navigation" class="gvd-navigation govuk-clearfix" role="navigation" aria-labelledby="gvd-navigation-heading" :hidden="!showMobileNav && !isDesktop">
     <h1 class="govuk-visually-hidden" id="gvd-navigation-heading">Menu</h1>
     <ContentNavigation v-slot="{ navigation }">
       <ul class="gvd-navigation__list gvd-width-container">
         <li v-for="link of navigation.filter(n => n.title != 'Example page')" :key="link._path" class="gvd-navigation__list-item" :class="{'gvd-navigation__list-item--current': currentPath.startsWith(link._path)}">
-          <NuxtLink :to="link._path" class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link">
+          <NuxtLink v-if="isDesktop" :to="link._path" class="govuk-link govuk-link--no-visited-state govuk-link--no-underline app-navigation__link js-app-navigation__link">
             {{ link.title }}
           </NuxtLink>
+          <button v-if="!isDesktop" class="gvd-navigation__button" :aria-expanded="expandedSections.includes(link._path)" :aria-controls="pathToSubnavId(link._path)" @click="toggleSection(link._path)">
+            {{ link.title }}
+          </button>
+          <ul v-if="!isDesktop" class="gvd-navigation__subnav" :aria-label="link.title" :id="pathToSubnavId(link._path)" :hidden="!expandedSections.includes(link._path)">
+            <li v-for="child of link.children" class="gvd-navigation__subnav-item">
+              <NuxtLink :to="child._path" class="govuk-link govuk-link--no-visited-state govuk-link--no-underline">
+                {{ child.title }} <template v-if="child._path === link._path">overview</template>
+              </NuxtLink>
+            </li>
+          </ul>
         </li>
       </ul>
     </ContentNavigation>
@@ -46,6 +73,10 @@ $app-light-grey: #f8f8f8;
 .gvd-navigation {
   border-bottom: 1px solid $govuk-border-colour;
   background-color: $app-light-grey;
+
+  &[hidden] {
+    display: none;
+  }
 }
 
 .gvd-navigation__list {

components/GvdPageWrapper.vue

@@ -1,6 +1,5 @@
 <template>
     <gvd-header/>
-    <gvd-navigation/>
     <div class="gvd-phase-banner-wrapper">
       <gv-phase-banner tag="alpha" tag-colour="red" class="gvd-phase-banner">GOV.UK Vue is in alpha, and some documentation is not complete - your <nuxt-link to="/support" class="govuk-link">feedback</nuxt-link> will help to improve it.</gv-phase-banner>
     </div>

composables/useIsDesktop.ts

@@ -0,0 +1,24 @@
+import { ref, onMounted, onUnmounted } from 'vue'
+
+export function useIsDesktop() {
+  let mediaQuery: MediaQueryList
+  const isDesktop = ref(false)
+
+  function updateIsDesktop() {
+    isDesktop.value = mediaQuery.matches
+  }
+
+  onMounted(() => {
+    // Set up mediaQuery in onMounted so that we know we're running on the client, not SSR
+    // min-width is the govuk-frontend desktop breakpoint
+    mediaQuery = window.matchMedia('(min-width: 48.0625em)')
+    updateIsDesktop()
+    mediaQuery.addEventListener('change', updateIsDesktop)
+  })
+
+  onUnmounted(() => {
+    mediaQuery.removeEventListener('change', updateIsDesktop)
+  })
+
+  return isDesktop
+}

content/1.get-started/index.md renamed to content/1.get-started/0.index.md

@@ -1,24 +1,24 @@
----
-layout: getstarted
----
-
-# Get started
-
-## Install GOV.UK Vue
-
-It's easy to add GOV.UK Vue to both new and existing projects. Find out [how to install GOV.UK Vue](/get-started/installing-govuk-vue).
-
-You can [get help](/support) if you need support getting started.
-
-## Using GOV.UK Vue with Nuxt
-
-Find out [how to use GOV.UK Vue with Nuxt](/get-started/using-govuk-vue-with-nuxt).
-
-## Using `router-link` or `nuxt-link`
-
-If you're using Vue Router or Nuxt, find out [how to use router-link or nuxt-link](/get-started/using-router-link-or-nuxt-link) with GOV.UK Vue components.
-
-## Differences to GOV.UK Frontend
-
-If you've used [GOV.UK Frontend](https://frontend.design-system.service.gov.uk/) before, there are some
-[differences between GOV.UK Vue and GOV.UK Frontend](/get-started/differences-to-govuk-frontend) that you should be aware of.
+---
+layout: getstarted
+---
+
+# Get started
+
+## Install GOV.UK Vue
+
+It's easy to add GOV.UK Vue to both new and existing projects. Find out [how to install GOV.UK Vue](/get-started/installing-govuk-vue).
+
+You can [get help](/support) if you need support getting started.
+
+## Using GOV.UK Vue with Nuxt
+
+Find out [how to use GOV.UK Vue with Nuxt](/get-started/using-govuk-vue-with-nuxt).
+
+## Using `router-link` or `nuxt-link`
+
+If you're using Vue Router or Nuxt, find out [how to use router-link or nuxt-link](/get-started/using-router-link-or-nuxt-link) with GOV.UK Vue components.
+
+## Differences to GOV.UK Frontend
+
+If you've used [GOV.UK Frontend](https://frontend.design-system.service.gov.uk/) before, there are some
+[differences between GOV.UK Vue and GOV.UK Frontend](/get-started/differences-to-govuk-frontend) that you should be aware of.

content/2.components/index.md renamed to content/2.components/0.index.md

@@ -1,7 +1,7 @@
 <template>
   <gvd-page-wrapper>
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
+      <div class="govuk-grid-column-one-quarter" v-if="isDesktop">
         <GvdSubNav>
           <ContentNavigation v-slot="{ navigation }" :query="componentsQuery">
             <GvdSubNavSection>
@@ -15,6 +15,18 @@
       <div class="govuk-grid-column-three-quarters">
         <span class="govuk-caption-xl" v-if="page.title != 'Components'">Components</span>
         <ContentDoc/>
+
+        <ContentNavigation v-slot="{ navigation }" :query="componentsQuery" v-if="page.title === 'Components'">
+          <nav>
+            <ul class="govuk-list">
+              <li class="govuk-!-margin-bottom-2" v-for="link in navigation[0].children" :key="link._path">
+                <NuxtLink :to="link._path" class="govuk-link">
+                  {{ link.title }}
+                </NuxtLink>
+              </li>
+            </ul>
+          </nav>
+        </ContentNavigation>
       </div>
     </div>
 
@@ -23,6 +35,8 @@
 
 <script setup lang="ts">
 const { page } = useContent()
+import { useIsDesktop } from '~/composables/useIsDesktop'
 
+const isDesktop = useIsDesktop()
 const componentsQuery = queryContent('components').where({ title: { $ne: 'Components' } })
 </script>

layouts/component.vue

@@ -1,7 +1,8 @@
+
 <template>
   <gvd-page-wrapper>
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-quarter">
+      <div class="govuk-grid-column-one-quarter" v-if="isDesktop">
         <GvdSubNav>
           <ContentNavigation v-slot="{ navigation }" :query="getStartedQuery">
             <GvdSubNavSection>
@@ -22,6 +23,8 @@
 
 <script setup lang="ts">
 const { page } = useContent()
+import { useIsDesktop } from '~/composables/useIsDesktop'
 
+const isDesktop = useIsDesktop()
 const getStartedQuery = queryContent('get-started').where({ title: { $ne: 'Get started' } })
 </script>