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

Open
carlh7777 wants to merge 3 commits into
base: main
Choose a base branch
from
+31 −31
Open

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

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 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
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
52 changes: 24 additions & 28 deletions web/src/pages/user-setting/sidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { Routes } from '@/routes';
import { TFunction } from 'i18next';
import {
LucideBox,
LucideLogOut,
LucideServer,
LucideUnplug,
LucideUser,
Expand Down Expand Up @@ -54,14 +55,6 @@ 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() {
Expand All @@ -77,64 +70,67 @@ export function SideBar() {
const { logout } = useLogout();

return (
<aside className="w-[303px] bg-bg-base flex flex-col">
<aside className="shrink-0 w-16 md:w-[303px] bg-bg-base flex flex-col overflow-hidden">
<header>
<h1 className="px-6 flex gap-2.5 items-center font-normal">
<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
/>

<p className="text-sm text-text-primary">{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="px-6 flex flex-col 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}>
<li key={key} className="w-full md:w-auto">
<Button
{...rest}
block
variant="ghost"
aria-label={label}
className={cn(
'justify-start gap-2.5 px-3 relative h-10 text-base',
'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="flex items-center gap-2.5">
<section className="flex items-center gap-2.5 max-md:gap-0">
{icon}
<span>{label}</span>
<span className="hidden md:inline">{label}</span>
</section>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
Outdated
{/* {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">
<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>

<Button block size="lg" variant="transparent" onClick={() => logout()}>
{t('setting.logout')}
<Button
block
size="lg"
variant="transparent"
aria-label={t('setting.logout')}
className="max-md:size-10 max-md:p-0 max-md:mx-auto max-md:justify-center"
onClick={() => logout()}
>
<LucideLogOut className="size-[1em] md:hidden" />
<span className="hidden md:inline">{t('setting.logout')}</span>
</Button>
</footer>
</aside>
Expand Down