fix(dev): fix the mobile navigation

apps/dev/package.json

@@ -15,6 +15,7 @@
     "@nuxt/ui": "^4.7.1",
     "@tiptap/core": "^3.23.4",
     "@tiptap/vue-3": "^3.23.4",
+    "motion-v": "^2.3.0",
     "tailwindcss": "^4.3.0",
     "vue": "^3.5.34",
     "vue-router": "^5.0.7"

apps/dev/src/App.vue

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import type { VariantType } from "motion-v"
+import { motion } from "motion-v"
+
 const navigationItems = [
   { label: "Overview", icon: "i-lucide-book-open", to: "/" },
   { label: "Editor Shell", icon: "i-lucide-layers", to: "/editor-shell" },
@@ -17,34 +20,121 @@ const navigationItems = [
   { label: "Math", icon: "i-lucide-sigma", to: "/math" },
   { label: "Toolbar", icon: "i-lucide-rows-3", to: "/toolbar" },
 ]
+
+const variants: {
+  [k: string]: VariantType | ((custom: unknown) => VariantType)
+} = {
+  normal: {
+    rotate: 0,
+    y: 0,
+    opacity: 1,
+  },
+  close: (custom: unknown) => {
+    const c = custom as number
+    return {
+      rotate: c === 1 ? 45 : c === 3 ? -45 : 0,
+      y: c === 1 ? 6 : c === 3 ? -6 : 0,
+      opacity: c === 2 ? 0 : 1,
+      transition: {
+        type: "spring",
+        stiffness: 260,
+        damping: 20,
+      },
+    }
+  },
+}
 </script>
 
 <template>
   <UApp>
     <UHeader :ui="{ wrapper: 'border-b border-default' }">
-      <template #left>
+      <template #title>
         <AppLogo class="w-auto h-5 shrink-0" />
       </template>
 
       <template #right>
         <UColorModeButton />
       </template>
+
+      <template #toggle="{ open, toggle, ui }">
+        <UButton
+          size="sm"
+          variant="ghost"
+          color="neutral"
+          square
+          :class="ui.toggle({ toggleSide: 'right' })"
+          @click="toggle"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="size-5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <motion.line
+              x1="4"
+              y1="6"
+              x2="20"
+              y2="6"
+              :variants="variants"
+              :animate="open ? 'close' : 'normal'"
+              :custom="1"
+              class="outline-none"
+            />
+            <motion.line
+              x1="4"
+              y1="12"
+              x2="20"
+              y2="12"
+              :variants="variants"
+              :animate="open ? 'close' : 'normal'"
+              :custom="2"
+              class="outline-none"
+            />
+            <motion.line
+              x1="4"
+              y1="18"
+              x2="20"
+              y2="18"
+              :variants="variants"
+              :animate="open ? 'close' : 'normal'"
+              :custom="3"
+              class="outline-none"
+            />
+          </svg>
+        </UButton>
+      </template>
+
+      <template #body>
+        <UNavigationMenu
+          orientation="vertical"
+          highlight
+          :items="navigationItems"
+          class="-mx-2.5"
+        />
+      </template>
     </UHeader>
 
     <UMain>
-      <UPage class="max-w-7xl mx-auto w-full px-6">
-        <template #left>
-          <UPageAside>
-            <UNavigationMenu
-              orientation="vertical"
-              highlight
-              :items="navigationItems"
-            />
-          </UPageAside>
-        </template>
+      <UContainer>
+        <UPage class="max-w-7xl mx-auto">
+          <template #left>
+            <UPageAside>
+              <UNavigationMenu
+                orientation="vertical"
+                highlight
+                :items="navigationItems"
+              />
+            </UPageAside>
+          </template>
 
-        <RouterView />
-      </UPage>
+          <RouterView />
+        </UPage>
+      </UContainer>
     </UMain>
   </UApp>
 </template>

pnpm-lock.yaml

@@ -32,6 +32,9 @@ importers:
       '@tiptap/vue-3':
         specifier: ^3.23.4
         version: 3.23.5(@floating-ui/[email protected])(@tiptap/[email protected](@tiptap/[email protected]))(@tiptap/[email protected])([email protected]([email protected]))
+      motion-v:
+        specifier: ^2.3.0
+        version: 2.3.0(@vueuse/[email protected]([email protected]([email protected])))([email protected]([email protected]))
       tailwindcss:
         specifier: ^4.3.0
         version: 4.3.0
@@ -1769,6 +1772,20 @@ packages:
       react-dom:
         optional: true
 
+  [email protected]:
+    resolution: {integrity: sha512-uaBd3qC1v3KQqBEjwTUd183K6PbS+j0yR9w9VmEOLWA/tnUcSn8Xa3uck7t4dgpDoUss8xQTcj8W2L07lrnLFg==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2032,6 +2049,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-Xn7aAcGDhco/JZTXOub64UmaYn73C6J1Po7Fk+8EvkJsNGTqfhon6UJY53vJKXW5v5Zl8HrYsVxv6oPXeGoGLQ==}
 
+  [email protected]:
+    resolution: {integrity: sha512-HxU3ZaBwNPVQUBQf1xxgq+7JrPNZvjLVxgbpEZL7RrWJnsxOf0/OM+yrHG9ogLQ31Do/r57Oz2gQWPK+6q62mg==}
+
   [email protected]:
     resolution: {integrity: sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==}
 
@@ -2041,6 +2061,12 @@ packages:
       '@vueuse/core': '>=10.0.0'
       vue: '>=3.0.0'
 
+  [email protected]:
+    resolution: {integrity: sha512-J0CCfXtICCni9RjotDUBOs57xNpYI9yyBSohEOxaRHrmjwOtlw291fhRu/mdgEdSasys96R028YDDOAtWBbRaA==}
+    peerDependencies:
+      '@vueuse/core': '>=10.0.0'
+      vue: '>=3.0.0'
+
   [email protected]:
     resolution: {integrity: sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ==}
     engines: {node: '>=10'}
@@ -4807,6 +4833,12 @@ snapshots:
       motion-utils: 12.39.0
       tslib: 2.8.1
 
+  [email protected]:
+    dependencies:
+      motion-dom: 12.40.0
+      motion-utils: 12.39.0
+      tslib: 2.8.1
+
   [email protected]:
     optional: true
 
@@ -5041,6 +5073,10 @@ snapshots:
     dependencies:
       motion-utils: 12.39.0
 
+  [email protected]:
+    dependencies:
+      motion-utils: 12.39.0
+
   [email protected]: {}
 
   [email protected](@vueuse/[email protected]([email protected]([email protected])))([email protected]([email protected])):
@@ -5056,6 +5092,19 @@ snapshots:
       - react
       - react-dom
 
+  [email protected](@vueuse/[email protected]([email protected]([email protected])))([email protected]([email protected])):
+    dependencies:
+      '@vueuse/core': 14.3.0([email protected]([email protected]))
+      framer-motion: 12.40.0
+      hey-listen: 1.0.8
+      motion-dom: 12.40.0
+      motion-utils: 12.39.0
+      vue: 3.5.34([email protected])
+    transitivePeerDependencies:
+      - '@emotion/is-prop-valid'
+      - react
+      - react-dom
+
   [email protected]: {}
 
   [email protected]: {}