From 02e8f22119dd2a791a03ba5cc0827c6909efaae2 Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 4 Jan 2023 15:43:55 +0200
Subject: [PATCH 1/4] init variants

---
 .docs/.studio/app.config.json |  7 ++++++-
 components/app/AppHeader.vue  | 14 ++++++++++++--
 components/app/AppLayout.vue  |  2 +-
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
index ccfd6306d..949815be0 100644
--- a/.docs/.studio/app.config.json
+++ b/.docs/.studio/app.config.json
@@ -1,5 +1,6 @@
 {
   "docus": {
+    "test": "111",
     "title": "Docus",
     "description": "The best place to start your documentation.",
     "image": "https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png",
@@ -20,7 +21,11 @@
       "title": "",
       "logo": true,
       "showLinkIcon": true,
-      "exclude": []
+      "exclude": [],
+      "fixed": {
+        "initial": false,
+        "lg": true
+      }
     },
     "footer": {
       "credits": {
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index 057c3360a..cb5d1905d 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,7 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    position: 'static',
+    // position: 'static',
     top: 0,
     zIndex: 10,
     width: '100%',
@@ -65,7 +69,7 @@ css({
     height: '{docus.header.height}',
 
     '@lg': {
-      position: 'sticky',
+      // position: 'sticky',
     },
 
     '.container': {
@@ -102,6 +106,12 @@ css({
           }
         }
       }
+    },
+    variants: {
+      fixed: {
+        true: { position: 'sticky' },
+        false: {},
+      }
     }
   }
 })
diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
index 0778ea555..e48a55208 100644
--- a/components/app/AppLayout.vue
+++ b/components/app/AppLayout.vue
@@ -36,7 +36,7 @@ useContentHead(docus.value as any)
 <template>
   <div>
     <AppLoadingBar />
-    <AppHeader v-if="docus.header" />
+    <AppHeader v-if="docus.header" :fixed="docus.header.fixed"/>
     <slot />
     <AppFooter v-if="docus.footer" />
   </div>

From 71f1739fe5a6be814bec4bbaa203a6099371ecee Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 4 Jan 2023 15:48:59 +0200
Subject: [PATCH 2/4] move variants to root

---
 components/app/AppHeader.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index cb5d1905d..f6bf954a6 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -106,12 +106,12 @@ css({
           }
         }
       }
-    },
-    variants: {
-      fixed: {
-        true: { position: 'sticky' },
-        false: {},
-      }
+    }
+  },
+  variants: {
+    fixed: {
+      true: { position: 'sticky' },
+      false: {},
     }
   }
 })

From 5d24b1db8284ddeb3d18f45536802e872ced85bc Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 4 Jan 2023 16:12:45 +0200
Subject: [PATCH 3/4] finish

---
 .docs/.studio/app.config.json | 1 -
 .docs/content/0.index.md      | 3 +++
 components/app/AppLayout.vue  | 6 +++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/.docs/.studio/app.config.json b/.docs/.studio/app.config.json
index 949815be0..1fc610bba 100644
--- a/.docs/.studio/app.config.json
+++ b/.docs/.studio/app.config.json
@@ -1,6 +1,5 @@
 {
   "docus": {
-    "test": "111",
     "title": "Docus",
     "description": "The best place to start your documentation.",
     "image": "https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png",
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/AppLayout.vue b/components/app/AppLayout.vue
index e48a55208..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" :fixed="docus.header.fixed"/>
+    <AppHeader v-if="docus.header" :fixed="headerPosition"/>
     <slot />
     <AppFooter v-if="docus.footer" />
   </div>

From d9e21bb90dc9327d99c365f771581923a88573e8 Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 4 Jan 2023 16:13:49 +0200
Subject: [PATCH 4/4] cleanup

---
 components/app/AppHeader.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index f6bf954a6..e1346d06c 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -60,7 +60,6 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    // position: 'static',
     top: 0,
     zIndex: 10,
     width: '100%',
@@ -68,10 +67,6 @@ css({
     backgroundColor: '{elements.backdrop.background}',
     height: '{docus.header.height}',
 
-    '@lg': {
-      // position: 'sticky',
-    },
-
     '.container': {
       display: 'grid',
       height: '100%',