feat: variants for AppHeader position (#750)

nuxt-themes · Jan 25, 2023 · 979086c · 979086c · vercel · Jan 25, 2023
1 parent 5822a28
commit 979086c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 7 deletions.
diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
@@ -20,7 +20,11 @@
       "title": "",
       "logo": true,
       "showLinkIcon": true,
-      "exclude": []
+      "exclude": [],
+      "fixed": {
+        "initial": false,
+        "lg": true
+      }
     },
     "footer": {
       "credits": {

diff --git a/.docs/content/0.index.md b/.docs/content/0.index.md
@@ -2,6 +2,9 @@
 title: Home
 navigation: false
 layout: page
+header:
+  fixed: 
+    initial: true
 ---
 
 :ellipsis{right=0px width=75% blur=150px}

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -4,6 +4,10 @@ const { navigation } = useContent()
 const { hasDocSearch } = useDocSearch()
 
 const hasDialog = computed(() => navigation.value?.length > 1)
+
+defineProps({
+  ...variants
+})
 </script>
 
 <template>
@@ -56,18 +60,13 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    position: 'static',
     top: 0,
     zIndex: 10,
     width: '100%',
     borderBottom: '1px solid {elements.border.primary.default}',
     backgroundColor: '{elements.backdrop.background}',
     height: '{docus.header.height}',
 
-    '@lg': {
-      position: 'sticky',
-    },
-
     '.container': {
       display: 'grid',
       height: '100%',
@@ -103,6 +102,12 @@ css({
         }
       }
     }
+  },
+  variants: {
+    fixed: {
+      true: { position: 'sticky' },
+      false: {},
+    }
   }
 })
 </style>
diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
@@ -3,6 +3,10 @@ const docus = useDocus()
 const { navigation, page } = useContent()
 const { navKeyFromPath } = useContentHelpers()
 
+const headerPosition = computed(() => {
+  return page.value.header?.fixed || docus.value.header.fixed
+})
+
 const titleTemplate = computed(() => {
   const appTitleTemplate = docus.value.head?.titleTemplate || `%s · ${docus.value.title}`
   if (page.value) {
@@ -36,7 +40,7 @@ useContentHead(docus.value as any)
 <template>
   <div>
     <AppLoadingBar />
-    <AppHeader v-if="docus.header" />
+    <AppHeader v-if="docus.header" :fixed="headerPosition"/>
     <slot />
     <AppFooter v-if="docus.footer" />
   </div>