chore: minor UI tweaks

- Reduce theme toggle button size in header
- Fix picker demo alignment with align="start"
- Alphabetize sidebar menu entries

Author: wangdicoder

components/date-picker/demo/size.md

@@ -7,7 +7,7 @@ Three sizes: `sm`, `md` (default), `lg`.
 ```jsx live
 () => {
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" align="start">
       <DatePicker size="sm" placeholder="Small" />
       <DatePicker placeholder="Default" />
       <DatePicker size="lg" placeholder="Large" />

components/time-picker/demo/size.md

@@ -7,7 +7,7 @@ Three sizes: `sm`, `md` (default), `lg`.
 ```jsx live
 () => {
   return (
-    <Space direction="vertical">
+    <Space direction="vertical" align="start">
       <TimePicker size="sm" placeholder="Small" />
       <TimePicker placeholder="Default" />
       <TimePicker size="lg" placeholder="Large" />

site/src/components/header/header.scss

@@ -94,8 +94,8 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: 28px;
+    height: 28px;
     border: 1px solid var(--ty-color-border);
     border-radius: 50%;
     background: var(--ty-color-bg-elevated);

site/src/components/header/theme-toggle.tsx

@@ -12,7 +12,7 @@ export const ThemeToggle = (): React.ReactElement => {
       aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
       title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}>
       {isDark ? (
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <circle cx="12" cy="12" r="5" />
           <line x1="12" y1="1" x2="12" y2="3" />
           <line x1="12" y1="21" x2="12" y2="23" />
@@ -24,7 +24,7 @@ export const ThemeToggle = (): React.ReactElement => {
           <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
         </svg>
       ) : (
-        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
           <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
         </svg>
       )}

site/src/routers.tsx

@@ -144,11 +144,6 @@ export const COMPONENT_MENU: RouterItem[] = [
   {
     title: 'Data Display',
     children: [
-      {
-        title: 'Carousel',
-        route: 'carousel',
-        component: lazy(() => import('../../components/carousel/index.md')),
-      },
       {
         title: 'Avatar',
         route: 'avatar',
@@ -164,6 +159,11 @@ export const COMPONENT_MENU: RouterItem[] = [
         route: 'card',
         component: lazy(() => import('../../components/card/index.md')),
       },
+      {
+        title: 'Carousel',
+        route: 'carousel',
+        component: lazy(() => import('../../components/carousel/index.md')),
+      },
       {
         title: 'Collapse',
         route: 'collapse',
@@ -224,11 +224,6 @@ export const COMPONENT_MENU: RouterItem[] = [
   {
     title: 'Form Item',
     children: [
-      {
-        title: 'DatePicker',
-        route: 'date-picker',
-        component: lazy(() => import('../../components/date-picker/index.md')),
-      },
       {
         title: 'Form',
         route: 'form',
@@ -239,6 +234,11 @@ export const COMPONENT_MENU: RouterItem[] = [
         route: 'checkbox',
         component: lazy(() => import('../../components/checkbox/index.md')),
       },
+      {
+        title: 'DatePicker',
+        route: 'date-picker',
+        component: lazy(() => import('../../components/date-picker/index.md')),
+      },
       {
         title: 'Input',
         route: 'input',