Skip to content

fix(user-settings): collapse sidebar to icon-only rail on mobile #15678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yingfeng merged 4 commits into from
Jun 11, 2026
Merged

fix(user-settings): collapse sidebar to icon-only rail on mobile #15678

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b15043b
refactor(user-settings): enhance sidebar responsiveness and layout
carlh7777 Jun 4, 2026
cb45c0d
refactor(user-settings): simplify sidebar layout and improve mobile r…
carlh7777 Jun 4, 2026
37aedbf
refactor(user-settings): update sidebar component structure
carlh7777 Jun 4, 2026
b51baed
Merge branch 'main' into feat/nav-mobile-responsive
carlh7777 Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions web/src/pages/user-setting/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
89 changes: 57 additions & 32 deletions web/src/pages/user-setting/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -13,6 +14,7 @@ import { Routes } from '@/routes';
import { TFunction } from 'i18next';
import {
LucideBox,
LucideLogOut,
LucideServer,
LucideUnplug,
LucideUser,
Expand Down Expand Up @@ -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();
Expand All @@ -77,64 +72,94 @@ 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]',
)}
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
<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>
);
})}
</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>
Expand Down