From c288a549872a384f445a181d5d5397fa4af435d1 Mon Sep 17 00:00:00 2001
From: Serhii Bedrytskyi <bedrytskyi@gmail.com>
Date: Wed, 4 Jan 2023 13:30:32 +0200
Subject: [PATCH] feat: static AppHeader on mobile

---
 components/app/AppHeader.vue       | 6 +++++-
 components/app/AppLayout.vue       | 1 +
 components/docs/DocsPageLayout.vue | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index c030eef21..057c3360a 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -56,7 +56,7 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    position: 'sticky',
+    position: 'static',
     top: 0,
     zIndex: 10,
     width: '100%',
@@ -64,6 +64,10 @@ css({
     backgroundColor: '{elements.backdrop.background}',
     height: '{docus.header.height}',
 
+    '@lg': {
+      position: 'sticky',
+    },
+
     '.container': {
       display: 'grid',
       height: '100%',
diff --git a/components/app/AppLayout.vue b/components/app/AppLayout.vue
index 761ddd1aa..0778ea555 100644
--- a/components/app/AppLayout.vue
+++ b/components/app/AppLayout.vue
@@ -11,6 +11,7 @@ const titleTemplate = computed(() => {
   return appTitleTemplate
 })
 
+// TODO: remove?
 defineProps({
   padded: {
     type: Boolean,
diff --git a/components/docs/DocsPageLayout.vue b/components/docs/DocsPageLayout.vue
index df746ff35..9fcc5aa95 100644
--- a/components/docs/DocsPageLayout.vue
+++ b/components/docs/DocsPageLayout.vue
@@ -182,7 +182,7 @@ css({
   },
   '.toc': {
     position: 'sticky',
-    top: '{docus.header.height}',
+    top: 0, 
     display: 'flex',
     mx: 'calc(0px - {space.4})',
     overflow: 'auto',
@@ -191,6 +191,7 @@ css({
       mx: 'calc(0px - {space.6})',
     },
     '@lg': {
+      top: '{docus.header.height}',
       mx: 0,
       alignSelf: 'flex-start',
       py: '{space.8}',