实现响应式导航栏组件

src/app/globals.css

@@ -57,6 +57,7 @@
   --sidebar-ring: oklch(0.707 0.022 261.325);
 }
 
+/* 颜色 */
 @theme inline {
   --color-background: var(--idle);
   --color-foreground: var(--idle-text);
@@ -112,6 +113,33 @@
   --color-sidebar-ring: var(--sidebar-ring);
 }
 
+/* 动画 */
+@theme inline {
+  --default-transition-timing-function: ease-in-out;
+  --animate-fadein: fadein var(--default-transition-duration) var(--default-transition-timing-function);
+  --animate-fadeout: fadeout var(--default-transition-duration) var(--default-transition-timing-function);
+
+  @keyframes fadein {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeout {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -124,4 +152,4 @@
   th {
     @apply font-normal;
   }
-}
+}