diff --git a/web/src/routes/Main/Content/PageContent.tsx b/web/src/routes/Main/Content/PageContent.tsx
index 6d6101bf..c2c51efa 100644
--- a/web/src/routes/Main/Content/PageContent.tsx
+++ b/web/src/routes/Main/Content/PageContent.tsx
@@ -77,8 +77,9 @@ export const PageContent: React.FC<PageContentProps> = React.memo((props) => {
 
   const sidebarEl = _isNil(sidebar) ? null : (
     <div
-      className={clsx('bg-gray-800 flex-shrink-0', {
+      className={clsx('bg-gray-800 flex-shrink-0 transition-width', {
         'w-60': showSidebar,
+        'w-0': !showSidebar,
       })}
     >
       {props.sidebar}
diff --git a/web/src/routes/Main/Navbar/MobileMenuBtn.tsx b/web/src/routes/Main/Navbar/MobileMenuBtn.tsx
new file mode 100644
index 00000000..d5a576ee
--- /dev/null
+++ b/web/src/routes/Main/Navbar/MobileMenuBtn.tsx
@@ -0,0 +1,26 @@
+import { useIsMobile } from '@/hooks/useIsMobile';
+import { Icon } from '@iconify/react';
+import React, { useCallback } from 'react';
+import { useSidebarContext } from '../SidebarContext';
+
+export const MobileMenuBtn: React.FC = React.memo(() => {
+  const { showSidebar, setShowSidebar } = useSidebarContext();
+  const isMobile = useIsMobile();
+
+  const handleSwitchSidebar = useCallback(() => {
+    setShowSidebar(!showSidebar);
+  }, [showSidebar]);
+
+  if (!isMobile) {
+    return null;
+  }
+
+  return (
+    <Icon
+      className="text-5xl mb-4"
+      icon={showSidebar ? 'mdi-menu-open' : 'mdi-menu'}
+      onClick={handleSwitchSidebar}
+    />
+  );
+});
+MobileMenuBtn.displayName = 'MobileMenuBtn';
diff --git a/web/src/routes/Main/Navbar/index.tsx b/web/src/routes/Main/Navbar/index.tsx
index 6705705c..2f7056ab 100644
--- a/web/src/routes/Main/Navbar/index.tsx
+++ b/web/src/routes/Main/Navbar/index.tsx
@@ -4,6 +4,7 @@ import { Icon } from '@iconify/react';
 import { Avatar } from '@/components/Avatar';
 import { NavbarNavItem } from './NavItem';
 import { GroupNav } from './GroupNav';
+import { MobileMenuBtn } from './MobileMenuBtn';
 
 /**
  * 导航栏组件
@@ -13,6 +14,8 @@ export const Navbar: React.FC = React.memo(() => {
 
   return (
     <div className="w-18 bg-gray-900 flex flex-col justify-start items-center pt-4 pb-4 p-1">
+      <MobileMenuBtn />
+
       {/* Navbar */}
       <div className="flex-1">
         <NavbarNavItem to={'/main/personal'}>
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index fb8c7146..c091789e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -64,6 +64,9 @@ module.exports = {
       boxShadow: {
         ...customTheme.boxShadow,
       },
+      transitionProperty: {
+        width: 'width',
+      },
     },
   },
   variants: {