From eb1b30db4014e97e7a45971604b31ee4e5299324 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 17 Oct 2024 22:06:34 +0200
Subject: [PATCH] playground(app): improve responsive navigation

---
 playground/app/app.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/playground/app/app.vue b/playground/app/app.vue
index 66aa197f..fdeb248c 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -66,8 +66,9 @@ defineShortcuts({
 
 <template>
   <UApp :toaster="appConfig.toaster">
-    <div class="h-screen w-screen overflow-hidden flex min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
-      <UNavigationMenu :items="items" orientation="vertical" class="border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
+    <div class="h-screen w-screen overflow-hidden flex flex-col lg:flex-row min-h-0 bg-[var(--ui-bg)]" vaul-drawer-wrapper>
+      <UNavigationMenu :items="items" orientation="vertical" class="hidden lg:flex border-r border-[var(--ui-border)] overflow-y-auto w-48 p-4" />
+      <UNavigationMenu :items="items" orientation="horizontal" class="lg:hidden border-b border-[var(--ui-border)] overflow-x-auto" />
 
       <div class="flex-1 flex flex-col items-center justify-around overflow-y-auto w-full py-12 px-4">
         <NuxtPage />