feat(config): showTitleInMobile

Signed-off-by: ZTL-UwU <[email protected]>

components/layout/Header.vue

@@ -9,6 +9,7 @@
     >
       <LayoutHeaderLogo class="hidden md:flex flex-1" />
       <LayoutMobileNav />
+      <LayoutHeaderLogo v-if="config.header.showTitleInMobile" class="flex md:hidden" />
       <LayoutHeaderNav class="hidden lg:flex flex-1" />
       <div class="flex flex-1 justify-end gap-2">
         <LayoutSearchButton v-if="!config.search.inAside && config.search.style === 'input'" />

composables/useConfig.ts

@@ -18,6 +18,7 @@ const defaultConfig: DefaultConfig = {
       light: '/logo.svg',
       dark: '/logo-dark.svg',
     },
+    showTitleInMobile: false,
     border: false,
     darkModeToggle: true,
     nav: [],

content/1.getting-started/4.changelog.md

@@ -8,10 +8,11 @@ description: Changes made to shadcn-docs.
 
 #### :icon{name="lucide:settings"} Config
 
-Added two new configs.
+Added three new configs.
 
 1. [`main.padded`](/api/configuration#main)
 2. [`search.style`](/api/configuration#search)
+2. [`header.showTitleInMobile`](/api/configuration#header)
 
 ## `v0.4.0`
 

content/2.api/1.configuration.md

@@ -87,7 +87,10 @@ interface INav {
   Whether to show the dark mode toggle.
   ::
   ::field{name="logo" type="{ light: string; dark: string; }" defaultValue="{ light: '/logo.svg', dark: '/logo-dark.svg' }"}
-  The path to the logo image files. `light` is for the icon shown in light mode, `dark` is for the icon shown in dark mode.
+  The path to the logo image files in `/public`. `light` is for the icon shown in light mode, `dark` is for the icon shown in dark mode.
+  ::
+  ::field{name="showTitleInMobile" type="boolean" defaultValue="false"}
+  Whether to show the logo and title in mobile. (Recommended to use with [button styled search bar](/api/configuration#search))
   ::
   ::field{name="nav" type="INav[]" defaultValue="[]"}
   The content of the navbar in the header.

content/index.md

@@ -6,7 +6,7 @@ navigation: false
 ::hero
 ---
 announcement:
-  title: 'Release v0.4.0'
+  title: 'Release v0.4.1'
   icon: 'noto:party-popper'
   to: /getting-started/changelog
 actions:

package.json

@@ -33,30 +33,30 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.1.198",
+    "@iconify-json/lucide": "^1.1.199",
     "@nuxt/content": "^2.13.1",
     "@nuxt/icon": "^1.0.0",
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/color-mode": "^3.4.2",
-    "@nuxtjs/tailwindcss": "^6.12.0",
+    "@nuxtjs/tailwindcss": "^6.12.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-vue-next": "^0.379.0",
     "nuxt": "^3.12.3",
-    "radix-vue": "^1.9.0",
+    "radix-vue": "^1.9.1",
     "shadcn-nuxt": "^0.10.4",
-    "tailwind-merge": "^2.3.0",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.5.3",
     "vue": "^3.4.31",
     "vue-router": "^4.4.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.21.2",
+    "@antfu/eslint-config": "^2.22.0",
     "@vueuse/core": "^10.11.0",
     "@vueuse/nuxt": "^10.11.0",
     "eslint": "9.2.0",
-    "shiki": "^1.10.1",
+    "shiki": "^1.10.3",
     "vue-tsc": "^2.0.26"
   }
 }

types/index.d.ts

@@ -17,6 +17,7 @@ interface DefaultConfig {
       light: string;
       dark: string;
     };
+    showTitleInMobile: boolean;
     darkModeToggle: boolean;
     nav: ({
       title: string;