feat: static AppHeader on mobile

nuxt-themes · Jan 4, 2023 · c288a54 · c288a54 · vercel · Jan 4, 2023
1 parent af37f2e
commit c288a54
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
@@ -56,14 +56,18 @@ css({
 
   header: {
     backdropFilter: '{elements.backdrop.filter}',
-    position: 'sticky',
+    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%',

diff --git 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
@@ -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}',