docs: AppHeader

.starters/default/content/3.components/3.app/1.header.md

@@ -1 +1,122 @@
-# Header
+# Header
+
+App header component. Used inside [`AppLayout`](/components/layout/app-layout) component.
+
+It has several components, which renders depending on app configuration or context. Those components includes: `AppHeaderDrawer`, `AppHeaderLogo`, `AppNavigation`, `AppSearch`, `AppTextDirection`, `AppColorMode`, `AppSocialIcons`.
+
+::callout
+This is not a MDC component, but you can control it's visibility with configuration or front-matter (WIP 🚧).
+::
+
+## Configuration
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  docus: {
+    header: {
+      title: '',
+      logo: false,
+      showLinkIcon: false,
+      fluid: false,
+      exclude: []
+    },
+  }
+})
+```
+
+## Design Tokens
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  docus: {
+    header: {
+      height: '64px',
+      logo: {
+        height: {
+          initial: '{space.6}',
+          sm: '{space.7}'
+        }
+      },
+      backdropFilter: '{elements.backdrop.filter}',
+      backgroundColor: '{elements.backdrop.background}',
+      borderBottomWidth: '1px',
+      borderBottomStyle: 'solid',
+      borderBottomColor: '{elements.border.primary.static}',
+      title: {
+        fontSize: '{fontSize.2xl}',
+        fontWeight: '{fontWeight.bold}',
+        color: {
+          static: {
+            initial: '{color.gray.900}',
+            dark: '{color.gray.100}'
+          },
+          hover: '{color.primary.500}'
+        }
+      },
+      icon: {
+        size: '{space.4}'
+      },
+      layout: {
+        gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+        gap: '{space.2}',
+        left: {
+          gridColumn: 'span 4 / span 4'
+        },
+        center: {
+          gridColumn: 'span 4 / span 4'
+        },
+        right: {
+          gridColumn: 'span 4 / span 4'
+        }
+      },
+      drawer: {
+        button: {
+          color: {
+            static: {
+              initial: '{color.gray.500}',
+              dark: '{color.gray.400}'
+            },
+            hover: {
+              initial: '{color.gray.700}',
+              dark: '{color.gray.200}'
+            }
+          },
+          zIndex: '10',
+          padding: '{space.4}',
+          paddingInlineStart: '0px'
+        },
+        menu: {
+          borderRightWidth: '1px',
+          borderRightStyle: 'solid',
+          borderRightColor: '{elements.border.primary.static}',
+          backgroundColor: {
+            initial: '{color.gray.50}',
+            dark: '{color.gray.900}'
+          },
+          paddingX: {
+            initial: '{space.4}',
+            sm: '{space.6}'
+          },
+          header: {
+            height: '{docus.app.header.height}',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            borderBottomWidth: '1px',
+            borderBottomStyle: 'solid',
+            borderBottomColor: '{elements.border.primary.static}',
+            gap: '{space.2}',
+            icon: {
+              size: '{space.4}'
+            }
+          },
+          links: {
+            paddingTop: '{space.6}'
+          }
+        }
+      }
+    },
+  }
+})
+```

components/app/AppHeader.vue

@@ -7,10 +7,6 @@ const route = useRoute()
 
 const hasDrawer = computed(() => navigation.value?.length > 1 || navigation.value?.[0]?.children?.length)
 
-defineProps({
-  ...variants
-})
-
 const isIndex = computed(() => route.path === '/')
 
 watch(isIndex, (value) => {
@@ -34,7 +30,7 @@ watch(isIndex, (value) => {
         </div>
 
         <div class="section center">
-          <AppHeaderLogo v-if="hasDrawer" />
+          <AppHeaderLogo />
           <AppNavigation v-if="config.header.navigation" />
         </div>
 
@@ -69,10 +65,13 @@ css({
     },
 
     '.center &': {
-      display: 'block',
-      '@lg': {
-        display: 'none'
-      }
+      display: 'none',
+      '.has-drawer &': {
+        display: 'block',
+        '@lg': {
+          display: 'none'
+        },
+      },
     }
   },
 

components/landing/SectionHeader.vue

@@ -10,8 +10,7 @@ defineProps({
   },
   title: {
     type: String,
-    default: '',
-    required: true
+    default: ''
   },
   description: {
     type: String,

package.json

@@ -78,6 +78,6 @@
     }
   },
   "resolutions": {
-    "@nuxt-themes/tokens": "file:/Users/yaelguilloux/Code/nuxt/tokens"
+    "@nuxt-themes/tokens": "file:/Users/serhii/code/github/nuxt-themes/tokens"
   }
 }