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

refactor(SettingsPage): update sidebar layout to Tabler style with improved navigation and search functionality
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
Details

Browse Source
This commit is contained in:
denozord
2026-02-17 15:19:32 +07:00
parent 820b73e622
commit 94337c8980
2 changed files with 53 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.css
+7 -16
View File
@@ -336,24 +336,15 @@
min-width: 0; min-width: 0;
} }
/* Страница настроек — боковое меню в стиле Tabler Settings */ /* Tabler-style subheader (как на preview.tabler.io/settings.html) */
.settings-sidebar-nav .list-group-item { .subheader {
font-size: 0.875rem;
padding-left: 0;
}
.settings-sidebar-nav .dropdown-header {
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
} color: var(--tblr-muted-color, #6c757d);
margin-bottom: 0.25rem;
/* Страница настроек: сайдбар не растягивается слишком широко */ padding-left: 0;
.settings-page-sidebar {
max-width: 220px;
}
@media (min-width: 992px) {
.settings-page-sidebar {
max-width: 260px;
}
} }
/* Responsive navbar */ /* Responsive navbar */
frontend/src/SettingsPage.jsx
+46 -49
View File
@@ -253,7 +253,7 @@ export default function SettingsPage() {
return ( return (
<div className="page-wrapper"> <div className="page-wrapper">
<div className="page-body"> <div className="page-body">
<div className="container-fluid"> <div className="container-xl">
<PageHeader <PageHeader
title="Настройки интерфейса" title="Настройки интерфейса"
icon={<IconSettings size={28} />} icon={<IconSettings size={28} />}
@@ -274,7 +274,7 @@ export default function SettingsPage() {
return ( return (
<div className="page-wrapper"> <div className="page-wrapper">
<div className="page-body"> <div className="page-body">
<div className="container-fluid"> <div className="container-xl">
<PageHeader <PageHeader
title="Настройки интерфейса" title="Настройки интерфейса"
icon={<IconSettings size={28} />} icon={<IconSettings size={28} />}
@@ -321,63 +321,58 @@ export default function SettingsPage() {
</div> </div>
)} )}
<div className="row g-0 g-lg-4"> {/* Как в Tabler Settings: одна card, row g-0, col-md-3 border-end + col-md-9 */}
{/* Боковое меню — узкая колонка, светлый фон */} <div className="card">
<div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar"> <div className="row g-0">
<div {/* Левая колонка — навигация (list-group list-group-transparent) */}
className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3" <div className="col-12 col-md-3 border-end">
style={{ top: '1rem', minHeight: '200px' }} <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>
</div> {sidebarGroupsFiltered.map((group, idx) => (
<nav className="settings-sidebar-nav"> <div key={group.title} className={idx > 0 ? 'mt-4' : ''}>
{sidebarGroupsFiltered.map((group) => ( <h4 className="subheader">{group.title}</h4>
<div key={group.title} className="mb-3"> <div className="list-group list-group-transparent">
<div className="dropdown-header small text-uppercase text-muted px-0 pt-1 pb-1">
{group.title}
</div>
<ul className="list-group list-group-flush list-group-transparent">
{group.items.map((section) => { {group.items.map((section) => {
const Icon = section.icon; const Icon = section.icon;
const isActive = activeSection === section.id; const isActive = activeSection === section.id;
return ( return (
<li key={section.id}> <button
<button key={section.id}
type="button" type="button"
className={`list-group-item list-group-item-action d-flex align-items-center border-0 rounded px-0 py-2 ${isActive ? 'bg-primary-lt text-primary fw-semibold' : 'text-body'}`} className={`list-group-item list-group-item-action d-flex align-items-center border-0 ${isActive ? 'active' : ''}`}
onClick={() => goToSection(section.id)} onClick={() => goToSection(section.id)}
> >
<span className={`me-2 d-flex ${isActive ? 'text-primary' : 'text-muted'}`}> <span className="me-2 d-flex opacity-75">
<Icon size={18} /> <Icon size={18} />
</span> </span>
{section.title} {section.title}
</button> </button>
</li>
); );
})} })}
</ul> </div>
</div> </div>
))} ))}
</nav> {sidebarGroupsFiltered.length === 0 && (
{sidebarGroupsFiltered.length === 0 && ( <p className="text-muted small mb-0">Нет подходящих разделов</p>
<p className="text-muted small mb-0 mt-2">Нет подходящих разделов</p> )}
)} </div>
</div> </div>
</div>
{/* Контент выбранного раздела — на всю оставшуюся ширину */} {/* Правая колонка — контент раздела */}
<div className="col-lg-9 col-xl-10 min-vw-0 pt-lg-0"> <div className="col-12 col-md-9 d-flex flex-column">
<div className="card-body">
{activeSection === 'live-doh' && ( {activeSection === 'live-doh' && (
<SectionCard <SectionCard
id="live-doh" id="live-doh"
@@ -583,6 +578,8 @@ export default function SettingsPage() {
</div> </div>
</SectionCard> </SectionCard>
)} )}
</div>
</div>
</div> </div>
</div> </div>
</div> </div>