From b15043be051f8b019c3d923fb8497036384ed30a Mon Sep 17 00:00:00 2001
From: carlh7777 <carlh171112@gmail.com>
Date: Thu, 4 Jun 2026 16:25:03 +0200
Subject: [PATCH 1/3] refactor(user-settings): enhance sidebar responsiveness
 and layout

- Updated the sidebar component to utilize the `useIsMobile` hook for better responsiveness on mobile devices.
- Adjusted CSS classes for the sidebar and main content area to improve layout and spacing across different screen sizes.
- Ensured that user information and menu items adapt based on the device type, enhancing user experience on mobile.
- Cleaned up unused code and comments for better readability.
---
 web/src/pages/user-setting/index.tsx         |  8 +-
 web/src/pages/user-setting/sidebar/index.tsx | 89 +++++++++++++-------
 2 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/web/src/pages/user-setting/index.tsx b/web/src/pages/user-setting/index.tsx
index 080ed3b8d16..beef40eb4fa 100644
--- a/web/src/pages/user-setting/index.tsx
+++ b/web/src/pages/user-setting/index.tsx
@@ -5,10 +5,14 @@ import { cn } from '@/lib/utils';
 
 const UserSetting = () => {
   return (
-    <section className="pt-8 size-full grid grid-cols-[auto_1fr] grid-rows-1">
+    <section className="pt-8 size-full grid grid-cols-[4rem_minmax(0,1fr)] md:grid-cols-[303px_minmax(0,1fr)] grid-rows-1 min-w-0">
       <SideBar />
 
-      <div className={cn('pr-6 pb-6 flex flex-1 rounded-lg overflow-hidden')}>
+      <div
+        className={cn(
+          'pr-2 md:pr-6 pb-6 flex flex-1 min-w-0 rounded-lg overflow-hidden',
+        )}
+      >
         <Outlet />
       </div>
     </section>
diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
index e093ce02039..d4ca339cadd 100644
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/web/src/pages/user-setting/sidebar/index.tsx
@@ -1,3 +1,4 @@
+import { useIsMobile } from '@/components/hooks/use-mobile';
 import { IconFontFill } from '@/components/icon-font';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import ThemeSwitch from '@/components/theme-switch';
@@ -13,6 +14,7 @@ import { Routes } from '@/routes';
 import { TFunction } from 'i18next';
 import {
   LucideBox,
+  LucideLogOut,
   LucideServer,
   LucideUnplug,
   LucideUser,
@@ -54,17 +56,10 @@ const menuItems = (t: TFunction) => [
     label: t('setting.api'),
     key: Routes.Api,
   },
-  // {
-  //   icon: MessageSquareQuote,
-  //   label: 'Prompt Templates',
-  //   key: Routes.Profile,
-  // },
-  // { icon: TextSearch, label: 'Retrieval Templates', key: Routes.Profile },
-  // { icon: Cog, label: t('setting.system'), key: Routes.System },
-  // { icon: Banknote, label: 'Plan', key: Routes.Plan },
 ];
 
 export function SideBar() {
+  const isMobile = useIsMobile();
   const { data: userInfo } = useFetchUserInfo();
   const { handleMenuClick, active: activeItemKey } = useHandleMenuClick();
   const { version, fetchSystemVersion } = useFetchSystemVersion();
@@ -77,48 +72,65 @@ export function SideBar() {
   const { logout } = useLogout();
 
   return (
-    <aside className="w-[303px] bg-bg-base flex flex-col">
+    <aside
+      className={cn(
+        'shrink-0 bg-bg-base flex flex-col overflow-hidden',
+        isMobile ? 'w-16' : 'w-[303px]',
+      )}
+    >
       <header>
-        <h1 className="px-6 flex gap-2.5 items-center font-normal">
+        <h1
+          className={cn(
+            'flex gap-2.5 items-center font-normal',
+            isMobile ? 'px-2 justify-center' : 'px-6 justify-start',
+          )}
+        >
           <RAGFlowAvatar
             avatar={userInfo?.avatar}
             name={userInfo?.nickname}
             isPerson
           />
 
-          <p className="text-sm text-text-primary">{userInfo?.email}</p>
+          {!isMobile && (
+            <p className="text-sm text-text-primary truncate">
+              {userInfo?.email}
+            </p>
+          )}
         </h1>
       </header>
 
       <nav className="flex-1 overflow-auto mt-4 py-1">
-        <ul className="px-6 flex flex-col gap-5">
+        <ul
+          className={cn(
+            'flex flex-col',
+            isMobile ? 'px-2 gap-2 items-center' : 'px-6 gap-5',
+          )}
+        >
           {menuItems(t).map((item) => {
             const { key, icon, label, ...rest } = item;
 
             return (
-              <li key={key}>
+              <li key={key} className={isMobile ? 'w-full' : undefined}>
                 <Button
                   {...rest}
-                  block
+                  block={!isMobile}
                   variant="ghost"
+                  aria-label={label}
                   className={cn(
-                    'justify-start gap-2.5 px-3 relative h-10 text-base',
+                    'relative h-10 text-base',
+                    isMobile
+                      ? 'size-10 p-0 justify-center'
+                      : 'justify-start gap-2.5 px-3 w-full',
                     activeItemKey === key && 'bg-bg-card text-text-primary',
                   )}
                   onClick={handleMenuClick(key)}
                 >
-                  <section className="flex items-center gap-2.5">
+                  <section
+                    className={cn('flex items-center', !isMobile && 'gap-2.5')}
+                  >
                     {icon}
-                    <span>{label}</span>
+                    {!isMobile && <span>{label}</span>}
                   </section>
-                  {/* {item.key === Routes.System && (
-                    <div className="mr-2 px-2 bg-accent-primary-5 text-accent-primary rounded-md">
-                      {version}
-                    </div>
-                  )} */}
-                  {/* {active && (
-                    <div className="absolute right-0 w-[5px] h-[66px] bg-primary rounded-l-xl shadow-[0_0_5.94px_#7561ff,0_0_11.88px_#7561ff,0_0_41.58px_#7561ff,0_0_83.16px_#7561ff,0_0_142.56px_#7561ff,0_0_249.48px_#7561ff]" />
-                  )} */}
                 </Button>
               </li>
             );
@@ -126,15 +138,28 @@ export function SideBar() {
         </ul>
       </nav>
 
-      <footer className="p-6 mt-auto">
-        <div className="flex items-center gap-2 mb-6 justify-between">
-          <span className="text-xs text-accent-primary">{version}</span>
+      <footer className={cn('mt-auto', isMobile ? 'p-2' : 'p-6')}>
+        {!isMobile && (
+          <div className="flex items-center gap-2 mb-6 justify-between">
+            <span className="text-xs text-accent-primary">{version}</span>
 
-          <ThemeSwitch />
-        </div>
+            <ThemeSwitch />
+          </div>
+        )}
 
-        <Button block size="lg" variant="transparent" onClick={() => logout()}>
-          {t('setting.logout')}
+        <Button
+          block={!isMobile}
+          size={isMobile ? 'icon-lg' : 'lg'}
+          variant="transparent"
+          aria-label={t('setting.logout')}
+          className={cn(isMobile ? 'mx-auto' : 'w-full')}
+          onClick={() => logout()}
+        >
+          {isMobile ? (
+            <LucideLogOut className="size-[1em]" />
+          ) : (
+            t('setting.logout')
+          )}
         </Button>
       </footer>
     </aside>

From cb45c0d298e996226f6cd0ff4369239a88120f32 Mon Sep 17 00:00:00 2001
From: carlh7777 <carlh171112@gmail.com>
Date: Thu, 4 Jun 2026 17:09:27 +0200
Subject: [PATCH 2/3] refactor(user-settings): simplify sidebar layout and
 improve mobile responsiveness

- Removed the `useIsMobile` hook and adjusted CSS classes to streamline the sidebar's layout.
- Enhanced responsiveness by ensuring user information and menu items adapt correctly across different screen sizes.
- Cleaned up unused code and improved readability for better maintainability.
---
 web/src/pages/user-setting/sidebar/index.tsx | 71 ++++++--------------
 1 file changed, 21 insertions(+), 50 deletions(-)

diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
index d4ca339cadd..7d1c102524a 100644
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/web/src/pages/user-setting/sidebar/index.tsx
@@ -1,4 +1,3 @@
-import { useIsMobile } from '@/components/hooks/use-mobile';
 import { IconFontFill } from '@/components/icon-font';
 import { RAGFlowAvatar } from '@/components/ragflow-avatar';
 import ThemeSwitch from '@/components/theme-switch';
@@ -59,7 +58,6 @@ const menuItems = (t: TFunction) => [
 ];
 
 export function SideBar() {
-  const isMobile = useIsMobile();
   const { data: userInfo } = useFetchUserInfo();
   const { handleMenuClick, active: activeItemKey } = useHandleMenuClick();
   const { version, fetchSystemVersion } = useFetchSystemVersion();
@@ -72,64 +70,42 @@ export function SideBar() {
   const { logout } = useLogout();
 
   return (
-    <aside
-      className={cn(
-        'shrink-0 bg-bg-base flex flex-col overflow-hidden',
-        isMobile ? 'w-16' : 'w-[303px]',
-      )}
-    >
+    <aside className="shrink-0 w-16 md:w-[303px] bg-bg-base flex flex-col overflow-hidden">
       <header>
-        <h1
-          className={cn(
-            'flex gap-2.5 items-center font-normal',
-            isMobile ? 'px-2 justify-center' : 'px-6 justify-start',
-          )}
-        >
+        <h1 className="px-2 md:px-6 flex gap-2.5 items-center justify-center md:justify-start font-normal">
           <RAGFlowAvatar
             avatar={userInfo?.avatar}
             name={userInfo?.nickname}
             isPerson
           />
 
-          {!isMobile && (
-            <p className="text-sm text-text-primary truncate">
-              {userInfo?.email}
-            </p>
-          )}
+          <p className="hidden md:block text-sm text-text-primary truncate">
+            {userInfo?.email}
+          </p>
         </h1>
       </header>
 
       <nav className="flex-1 overflow-auto mt-4 py-1">
-        <ul
-          className={cn(
-            'flex flex-col',
-            isMobile ? 'px-2 gap-2 items-center' : 'px-6 gap-5',
-          )}
-        >
+        <ul className="px-2 md:px-6 flex flex-col gap-2 md:gap-5 items-center md:items-stretch">
           {menuItems(t).map((item) => {
             const { key, icon, label, ...rest } = item;
 
             return (
-              <li key={key} className={isMobile ? 'w-full' : undefined}>
+              <li key={key} className="w-full md:w-auto">
                 <Button
                   {...rest}
-                  block={!isMobile}
+                  block
                   variant="ghost"
                   aria-label={label}
                   className={cn(
-                    'relative h-10 text-base',
-                    isMobile
-                      ? 'size-10 p-0 justify-center'
-                      : 'justify-start gap-2.5 px-3 w-full',
+                    'relative h-10 text-base max-md:size-10 max-md:p-0 max-md:justify-center justify-start gap-2.5 px-2 md:px-3',
                     activeItemKey === key && 'bg-bg-card text-text-primary',
                   )}
                   onClick={handleMenuClick(key)}
                 >
-                  <section
-                    className={cn('flex items-center', !isMobile && 'gap-2.5')}
-                  >
+                  <section className="flex items-center gap-2.5 max-md:gap-0">
                     {icon}
-                    {!isMobile && <span>{label}</span>}
+                    <span className="hidden md:inline">{label}</span>
                   </section>
                 </Button>
               </li>
@@ -138,28 +114,23 @@ export function SideBar() {
         </ul>
       </nav>
 
-      <footer className={cn('mt-auto', isMobile ? 'p-2' : 'p-6')}>
-        {!isMobile && (
-          <div className="flex items-center gap-2 mb-6 justify-between">
-            <span className="text-xs text-accent-primary">{version}</span>
+      <footer className="p-2 md:p-6 mt-auto">
+        <div className="hidden md:flex items-center gap-2 mb-6 justify-between">
+          <span className="text-xs text-accent-primary">{version}</span>
 
-            <ThemeSwitch />
-          </div>
-        )}
+          <ThemeSwitch />
+        </div>
 
         <Button
-          block={!isMobile}
-          size={isMobile ? 'icon-lg' : 'lg'}
+          block
+          size="lg"
           variant="transparent"
           aria-label={t('setting.logout')}
-          className={cn(isMobile ? 'mx-auto' : 'w-full')}
+          className="max-md:size-10 max-md:p-0 max-md:mx-auto max-md:justify-center"
           onClick={() => logout()}
         >
-          {isMobile ? (
-            <LucideLogOut className="size-[1em]" />
-          ) : (
-            t('setting.logout')
-          )}
+          <LucideLogOut className="size-[1em] md:hidden" />
+          <span className="hidden md:inline">{t('setting.logout')}</span>
         </Button>
       </footer>
     </aside>

From 37aedbf380a9279b70c56033ff9b163e12c30571 Mon Sep 17 00:00:00 2001
From: carlh7777 <carlh171112@gmail.com>
Date: Thu, 4 Jun 2026 17:20:32 +0200
Subject: [PATCH 3/3] refactor(user-settings): update sidebar component
 structure

- Changed the sidebar layout from a section to a span element for improved semantic structure.
- Maintained existing styles and responsiveness while enhancing code clarity.
---
 web/src/pages/user-setting/sidebar/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/pages/user-setting/sidebar/index.tsx b/web/src/pages/user-setting/sidebar/index.tsx
index 7d1c102524a..33868e13d17 100644
--- a/web/src/pages/user-setting/sidebar/index.tsx
+++ b/web/src/pages/user-setting/sidebar/index.tsx
@@ -103,10 +103,10 @@ export function SideBar() {
                   )}
                   onClick={handleMenuClick(key)}
                 >
-                  <section className="flex items-center gap-2.5 max-md:gap-0">
+                  <span className="flex items-center gap-2.5 max-md:gap-0">
                     {icon}
                     <span className="hidden md:inline">{label}</span>
-                  </section>
+                  </span>
                 </Button>
               </li>
             );