init AppBanner (#536)

* init AppBanner * ✨ (banner) edit defaults * 📝 (config) update configuration with banner arg Co-authored-by: Yaël GUILLOUX <[email protected]>
nuxt-themes · Jul 6, 2021 · 9e6c8a0 · 9e6c8a0
1 parent 9589790
commit 9e6c8a0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/docs/content/1.get-started/2.configuration.md b/docs/content/1.get-started/2.configuration.md
@@ -73,11 +73,12 @@ export default {
 | `contentDir` | `String` | The path of your website content directory. |
 | `theme` | `Object` | Your theme configuration, see [here](/theme/settings) for default theme. |
 | **Layout** | | |
-| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader by default. |
-| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter by default. |
-| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid by default. |
-| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside by default. |
-| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation by default. |
+| `layout.header` | `Boolean` | If set to `false`, it will hide the AppHeader. |
+| `layout.footer` | `Boolean` | If set to `false`, it will hide the AppFooter. |
+| `layout.fluid` | `Boolean` | If set to `true`, the page container will be fluid. |
+| `layout.aside` | `Boolean` | If set to `false`, it will hide the AppAside. |
+| `layout.banner` | `Boolean` | If set to `true`, it will show the AppBanner. |
+| `layout.asideClass` | `String` | Class attribute that will be applied to AsideNavigation. |
 | :icon-git-hub{class="inline w-4 -mt-0.5"} **GitHub** | | |
 | `github.repo` | `String` | Your project repository. |
 | `github.branch` | `String` | The branch to link. |

diff --git a/src/defaultTheme/components/organisms/app/AppBanner.vue b/src/defaultTheme/components/organisms/app/AppBanner.vue
@@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-8 bg-primary-500"></div>
+</template>
diff --git a/src/defaultTheme/components/organisms/app/AppLayout.vue b/src/defaultTheme/components/organisms/app/AppLayout.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="w-full">
+    <slot v-if="layout.banner" name="banner">
+      <AppBanner />
+    </slot>
+
     <slot v-if="layout.header" name="header">
       <AppHeader :aside="layout.aside" />
     </slot>

diff --git a/src/settings/defaults.ts b/src/settings/defaults.ts
@@ -12,6 +12,7 @@ export const docusDefaults: DocusSettings = {
     footer: true,
     aside: false,
     asideClass: '',
-    fluid: false
+    fluid: false,
+    banner: false
   }
 }