💄 style(mobile): adjust sidebar close button position and style

- move close button from header to bottom of sidebar for better UX
- change button to full width with centered content
- add border top to separate from menu items
- update button styling to match design system
- add relative positioning to header container

src/client/mobile/layouts/MainLayout.tsx

@@ -76,7 +76,7 @@ export const MainLayout = () => {
       )}>
         <div className="flex flex-col h-full">
           {/* 侧边栏头部 - 包含用户头像和用户名 */}
-          <div className="flex flex-col items-center justify-center h-20 border-b border-border py-2">
+          <div className="flex flex-col items-center justify-center h-20 border-b border-border py-2 relative">
             {user && (
               <>
                 <button
@@ -90,12 +90,6 @@ export const MainLayout = () => {
                 </span>
               </>
             )}
-            <button
-              onClick={() => setSidebarOpen(false)}
-              className="lg:hidden p-1 rounded-md hover:bg-muted mt-2"
-            >
-              <X className="w-4 h-4" />
-            </button>
           </div>
 
           {/* 菜单项 */}
@@ -119,6 +113,16 @@ export const MainLayout = () => {
               </button>
             ))}
           </nav>
+          
+          {/* 关闭按钮 - 放在侧边栏底部 */}
+          <div className="lg:hidden p-4 border-t border-border">
+            <button
+              onClick={() => setSidebarOpen(false)}
+              className="w-full flex items-center justify-center p-2 rounded-md text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+            >
+              <X className="w-4 h-4" />
+            </button>
+          </div>
         </div>
       </aside>