feat(sidebar): 实现响应式侧边栏状态管理

- 添加媒体查询监听以自动切换侧边栏显示状态
- 引入sidebarStore统一管理侧边栏开闭逻辑
- 移除页面内联侧边栏展开控制逻辑
- 添加Sprite图标组件客户端渲染条件判断
- 更新侧边栏样式类名以支持过渡动画效果
- 移除用户信息展示相关冗余代码块

src/lib/assets/sprite.svg

@@ -0,0 +1,8 @@
+<svg>
+    <symbol id="panel-right-close" viewBox="0 0 24 24">
+        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M15 3.5v17M8 9l3 3l-3 3" />
+            <path d="M3 9.4c0-2.24 0-3.36.436-4.216a4 4 0 0 1 1.748-1.748C6.04 3 7.16 3 9.4 3h5.2c2.24 0 3.36 0 4.216.436a4 4 0 0 1 1.748 1.748C21 6.04 21 7.16 21 9.4v5.2c0 2.24 0 3.36-.436 4.216a4 4 0 0 1-1.748 1.748C17.96 21 16.84 21 14.6 21H9.4c-2.24 0-3.36 0-4.216-.436a4 4 0 0 1-1.748-1.748C3 17.96 3 16.84 3 14.6z" />
+        </g>
+    </symbol>
+</svg>

src/lib/components/icon/Icon.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import type { IconId } from '$lib/types/icon-ids.ts';
+
+	export let id: IconId;
+	export let size: number | string ;
+	export let className: string = '';
+	$: dimensions = typeof size === 'number' ? `${size}px` : size;
+
+
+</script>
+
+<svg  {...$$restProps}
+			role="img"
+			class={className}
+			aria-hidden="true"
+			width={dimensions?dimensions:24}
+			height={dimensions?dimensions:24}
+>
+	<use href={`#${id}`} />
+</svg>
+
+
+
+<style>
+    .app-icon {
+        /* 确保图标与文本基线对齐 */
+        vertical-align: middle;
+        /* 防止用户选择图标，提高用户体验 */
+        user-select: none;
+        /* 默认显示为行内块级元素 */
+        display: inline-block;
+        /* 确保它能响应 CSS 动画 */
+        transition: color 0.2s, transform 0.2s;
+    }
+</style>
+

src/lib/components/icon/Sprite.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+import SpriteSvg from '$lib/assets/sprite.svg'
+
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" >
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html SpriteSvg}
+</svg>

src/lib/stores/sidebarStore.ts

@@ -0,0 +1,33 @@
+import { writable } from 'svelte/store';
+
+
+interface SidebarState {
+	isOpen: boolean;
+	isExpanded: boolean;
+}
+
+
+export const sidebarStore = writable<SidebarState>({
+	isOpen: false,
+	isExpanded: false,
+})
+
+/**
+ * 切换侧边栏打开、隐藏(偏移隐藏)状态
+ */
+export const toggleSidebar = () => {
+	sidebarStore.update(state => ({
+		...state,
+		isOpen: !state.isOpen,
+	}));
+}
+
+/**
+ * 切换侧边栏展开状态
+ */
+export const toggleSidebarOpen = () => {
+	sidebarStore.update(state => ({
+		...state,
+		isExpanded: !state.isExpanded,
+	}));
+}

src/lib/types/icon-ids.ts

@@ -0,0 +1,3 @@
+export type IconId = {
+  [key: string]: string;
+};

src/lib/widget/ThemeSelector.svelte

@@ -9,7 +9,7 @@
 	};
 </script>
 
-<div class="dropdown dropdown-end">
+<div class="dropdown dropdown-center md:dropdown-end ">
 	<div tabindex="0" role="button" class="rounded hover:bg-base-100  active:bg-base-200 p-2 overflow-hidden flex items-center gap-2">
 		<ThemePreview themeId={$themeStore} />
 		<svg width="12px" height="12px" class="mt-px text-base-content size-2 fill-current opacity-60 sm:inline-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048"><path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path></svg>