denozord/router-lists-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(SettingsPage): enhance sidebar structure and layout for improved navigation and visual consistency
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m56s
Details

Browse Source
This commit is contained in:
denozord
2026-02-17 15:41:26 +07:00
parent d3ebe5b2b1
commit c3d41a32d8
1 changed files with 44 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/SettingsPage.jsx
+44 -48
View File
@@ -293,58 +293,54 @@ export default function SettingsPage() {
} }
/> />
<div className="row"> {/* Вёрстка как на https://preview.tabler.io/settings.html: одна card, row g-0, col-md-3 border-end + col-md-9 */}
{/* Сайдбар навигации — как блок в общем стиле страниц */} <div className="card">
<div className="col-12 col-md-3 mb-4 mb-md-0"> <div className="row g-0">
<div className="card card-flat"> <div className="col-12 col-md-3 border-end">
<div className="card-body"> <div className="card-body">
<div className="input-icon mb-3"> <div className="input-icon mb-3">
<span className="input-icon-addon"> <span className="input-icon-addon">
<IconSearch size={18} className="text-muted" /> <IconSearch size={18} className="text-muted" />
</span> </span>
<input <input
type="text" type="text"
className="form-control form-control-sm" className="form-control form-control-sm"
placeholder="Поиск разделов" placeholder="Поиск разделов"
value={sidebarSearch} value={sidebarSearch}
onChange={(e) => setSidebarSearch(e.target.value)} onChange={(e) => setSidebarSearch(e.target.value)}
aria-label="Поиск разделов" aria-label="Поиск разделов"
/> />
</div>
{sidebarGroupsFiltered.map((group, idx) => (
<div key={group.title} className={idx > 0 ? 'mt-4' : ''}>
<h4 className="subheader">{group.title}</h4>
<div className="list-group list-group-transparent">
{group.items.map((section) => {
const Icon = section.icon;
const isActive = activeSection === section.id;
return (
<button
key={section.id}
type="button"
className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
onClick={() => goToSection(section.id)}
>
<span className="me-2 d-flex opacity-75">
<Icon size={18} />
</span>
{section.title}
</button>
);
})}
</div> </div>
{sidebarGroupsFiltered.map((group, idx) => ( </div>
<div key={group.title} className={idx > 0 ? 'mt-4' : ''}> ))}
<h4 className="subheader">{group.title}</h4> {sidebarGroupsFiltered.length === 0 && (
<div className="list-group list-group-transparent"> <p className="text-muted small mb-0">Нет подходящих разделов</p>
{group.items.map((section) => { )}
const Icon = section.icon;
const isActive = activeSection === section.id;
return (
<button
key={section.id}
type="button"
className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
onClick={() => goToSection(section.id)}
>
<span className="me-2 d-flex opacity-75">
<Icon size={18} />
</span>
{section.title}
</button>
);
})}
</div>
</div>
))}
{sidebarGroupsFiltered.length === 0 && (
<p className="text-muted small mb-0">Нет подходящих разделов</p>
)}
</div> </div>
</div> </div>
</div> <div className="col-12 col-md-9 d-flex flex-column">
{/* Контент раздела — карточка как на других страницах */}
<div className="col-12 col-md-9">
<div className="card card-flat">
<div className="card-body"> <div className="card-body">
{activeSection === 'live-doh' && ( {activeSection === 'live-doh' && (
<> <>