feat: close nav modal on nav link click and resize above small

Author: svvimming

components/navbar.vue

@@ -32,8 +32,11 @@ const props = defineProps({
   }
 })
 
+const instance = getCurrentInstance()
+
 // ===================================================================== Methods
 const scrollToSection = async (el) => {
+  instance.parent.exposed.handleNavClick()
   const id = el.replaceAll('#', '')
   const section = document.getElementById(id)
   if (section) {

components/site-header.vue

@@ -96,6 +96,8 @@ const GithubIcon = resolveComponent('icon/github-icon')
 const SlackIcon = resolveComponent('icon/slack-icon')
 
 // ======================================================================== Data
+const breakpointSmall = ref(false)
+const headerResizeEventListener = ref(null)
 const generalStore = useGeneralStore()
 const { navigationOpen } = storeToRefs(generalStore)
 
@@ -118,9 +120,30 @@ watch(navigationOpen, (val) => {
   }
 })
 
+watch(breakpointSmall, () => {
+  if (navigationOpen.value) { toggleNav() }
+})
+
 // ======================================================================= Hooks
-// onMounted(() => {
-// })
+onMounted(() => {
+  headerResizeEventListener.value = useThrottle(() => {
+    if (window.matchMedia('(max-width: 53.125rem)').matches) {
+      if (!breakpointSmall.value) {
+        breakpointSmall.value = true
+      }
+    } else {
+      if (breakpointSmall.value) {
+        breakpointSmall.value = false
+      }
+    }
+  })
+  headerResizeEventListener.value()
+  window.addEventListener('resize', headerResizeEventListener.value)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', headerResizeEventListener.value)
+})
 
 // ===================================================================== Methods
 /**
@@ -138,9 +161,14 @@ const getCtaComponent = (icon) => {
     case 'slack' : return SlackIcon;
     default : return 'span'
   }
-  
 }
 
+const handleNavClick = () => {
+  if (navigationOpen.value) { toggleNav() }
+}
+
+defineExpose({ handleNavClick })
+
 </script>
 
 <style lang="scss" scoped>

content/core/index.json

@@ -504,12 +504,7 @@
         "borderGradientAngle": "45deg",
         "title": "<img src='/images/topography-graphic-with-border.svg' />Keep up<br>with Singularity",
         "subheading": "Your feedback can shape our next big release. <br>Join us on <a href='https://github.com/data-preservation-programs/singularity' target='_blank'>Github</a> and <a href='https://filecoinproject.slack.com/archives/C05JABREATH' target='_blank'>Slack</a>",
-        "description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox.",
-        "cta": {
-          "tag": "a",
-          "to": "https://example.com",
-          "text": "Keep Up"
-        }
+        "description": "<span class='weight-500'>Sign up to keep up.</span> We're passionate about keeping you in the loop with our latest features and updates, but we're even more committed to respecting your inbox."
       }
     }
   ]

stores/general.js

@@ -1,7 +1,7 @@
 // ///////////////////////////////////////////////////////////////////// Imports
 // -----------------------------------------------------------------------------
 import { ref } from '#imports'
-import GeneralSiteData from '@/content/core/general.json'
+// import GeneralSiteData from '@/content/core/general.json'
 
 // /////////////////////////////////////////////////////////////////////// State
 // -----------------------------------------------------------------------------
@@ -18,19 +18,18 @@ const clearStore = () => {
 }
 
 // /////////////////////////////////////////////////////////////// getBaseData
-const getBaseData = async (payload) => {
-  console.log('hit')
-  const key = typeof payload === 'string' ? payload : payload.key
-  let data = false
-  switch (key) {
-    case 'general': data = GeneralSiteData; break
-    default : data = payload.data; break
-  }
-  if (data) {
-    siteContent.value[key] = data
-    console.log(siteContent)
-  }
-}
+// const getBaseData = async (payload) => {
+//   const key = typeof payload === 'string' ? payload : payload.key
+//   let data = false
+//   switch (key) {
+//     case 'general': data = GeneralSiteData; break
+//     default : data = payload.data; break
+//   }
+//   if (data) {
+//     siteContent.value[key] = data
+//     console.log(siteContent)
+//   }
+// }
 
 // //////////////////////////////////////////////////////////////////// setTheme
 const setTheme = (newTheme) => {
@@ -54,7 +53,7 @@ export const useGeneralStore = defineStore('general', () => ({
   navigationOpen,
   // ----- actions
   clearStore,
-  getBaseData,
+  // getBaseData,
   setTheme,
   setNavigationOpen
 }))