feat(mobile): improve sidebar experience in mobile

Author: AprilNEA

dev-utility-tauri/tauri.conf.json

@@ -17,6 +17,8 @@
         "titleBarStyle": "Overlay",
         "width": 1200,
         "height": 800,
+        "minWidth": 375,
+        "minHeight": 800,
         "transparent": true,
         "trafficLightPosition": {
           "x": 18,

packages/frontend/src/components/sidebar/index.tsx

@@ -58,7 +58,7 @@ import { SearchForm } from "./search-form";
 import { ThemeSwitcher } from "./theme-switcher";
 
 const InsetHeader: React.FC<{ title: string }> = ({ title }) => {
-  const { open } = useSidebar();
+  const { open, isMobile } = useSidebar();
 
   const setOnTop = async () => {
     await getCurrentWindow().setAlwaysOnTop(!isOnTop);
@@ -71,7 +71,9 @@ const InsetHeader: React.FC<{ title: string }> = ({ title }) => {
       data-tauri-drag-region
       className="flex h-9 shrink-0 items-center gap-2 px-4"
     >
-      <SidebarTrigger className={cn("-ml-1", !open && "ml-16")} />
+      <SidebarTrigger
+        className={cn("-ml-1", !open && "ml-16", isMobile && "ml-16")}
+      />
       <Separator
         orientation="vertical"
         className="mr-2 data-[orientation=vertical]:h-4"
@@ -94,6 +96,23 @@ const InsetHeader: React.FC<{ title: string }> = ({ title }) => {
   );
 };
 
+const InsetContent: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { isMobile } = useSidebar();
+
+  return (
+    <SidebarInset
+      className={cn(
+        "bg-background rounded-lg m-2 overflow-hidden",
+        isMobile && "m-0",
+      )}
+    >
+      {children}
+    </SidebarInset>
+  );
+};
+
 export default function AppSidebar({
   children,
   ...props
@@ -241,12 +260,12 @@ export default function AppSidebar({
         </SidebarFooter>
         <SidebarRail />
       </Sidebar>
-      <SidebarInset className="bg-background rounded-lg m-2 overflow-hidden">
+      <InsetContent>
         <InsetHeader title={title} />
         <main className="@container/main flex-1 max-h-[calc(100vh-3rem)] px-4 pb-2 overflow-hidden">
           {children}
         </main>
-      </SidebarInset>
+      </InsetContent>
     </SidebarProvider>
   );
 }