From 28167e41ff6368862c42e574fe2174aaf0d00563 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 23 May 2023 15:27:13 +0200
Subject: [PATCH] docs: add VerticalNavigation tailwind example

---
 .../VerticalNavigationThemeTailwind.vue       | 28 +++++++++++++
 .../4.navigation/1.vertical-navigation.md     | 42 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 docs/components/content/themes/VerticalNavigationThemeTailwind.vue

diff --git a/docs/components/content/themes/VerticalNavigationThemeTailwind.vue b/docs/components/content/themes/VerticalNavigationThemeTailwind.vue
new file mode 100644
index 00000000..9147add1
--- /dev/null
+++ b/docs/components/content/themes/VerticalNavigationThemeTailwind.vue
@@ -0,0 +1,28 @@
+<script setup>
+const links = [{
+  label: 'Installation',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation
+    :links="links"
+    :ui="{
+      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+      base: 'group block border-l -ml-px lg:leading-6',
+      padding: 'pl-4',
+      rounded: '',
+      font: '',
+      ring: '',
+      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
+      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
+    }"
+  />
+</template>
diff --git a/docs/content/4.navigation/1.vertical-navigation.md b/docs/content/4.navigation/1.vertical-navigation.md
index dd1e6c89..7603b9ae 100644
--- a/docs/content/4.navigation/1.vertical-navigation.md
+++ b/docs/content/4.navigation/1.vertical-navigation.md
@@ -39,6 +39,48 @@ const links = [{
 ```
 ::
 
+## Themes
+
+Our theming system provides a lot of flexibility to customize the component. Here is some examples of what you can do.
+
+### Tailwind
+
+::component-example
+#default
+:vertical-navigation-theme-tailwind
+#code
+```vue
+<script setup>
+const links = [{
+  label: 'Installation',
+  to: '/getting-started/installation'
+}, {
+  label: 'Vertical Navigation',
+  to: '/navigation/vertical-navigation'
+}, {
+  label: 'Command Palette',
+  to: '/navigation/command-palette'
+}]
+</script>
+
+<template>
+  <UVerticalNavigation
+    :links="links"
+    :ui="{
+      wrapper: 'border-l border-gray-200 dark:border-gray-800 space-y-2',
+      base: 'group block border-l -ml-px lg:leading-6',
+      padding: 'pl-4',
+      rounded: '',
+      font: '',
+      ring: '',
+      active: 'text-primary-500 dark:text-primary-400 border-current font-semibold',
+      inactive: 'border-transparent hover:border-gray-400 dark:hover:border-gray-500 text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300'
+    }"
+  />
+</template>
+```
+::
+
 ## Props
 
 :component-props