From 979086cd925eaddc242b7fae994b6ac03c2ddbe1 Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 25 Jan 2023 03:46:07 +0200
Subject: [PATCH] feat: variants for AppHeader position (#750)

---
 .docs/.studio/app.config.json |  6 +++++-
 .docs/content/0.index.md      |  3 +++
 components/app/AppHeader.vue  | 15 ++++++++++-----
 components/app/AppLayout.vue  |  6 +++++-
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
index 08192dfdd..c769c4167 100644
--- 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
index 30ba8e6f0..8ed1c73ad 100644
--- 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
index d053d468a..464da13ac 100644
--- 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,7 +60,6 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    position: 'static',
     top: 0,
     zIndex: 10,
     width: '100%',
@@ -64,10 +67,6 @@ css({
     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
index 0778ea555..1c8b02aa5 100644
--- 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>