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
Publish Fast Tabler Docker image / build-and-push-fast (push) Successful in 1m58s
This commit is contained in:
+7
-16
@@ -336,24 +336,15 @@
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Страница настроек — боковое меню в стиле Tabler Settings */
|
||||
.settings-sidebar-nav .list-group-item {
|
||||
font-size: 0.875rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
.settings-sidebar-nav .dropdown-header {
|
||||
/* Tabler-style subheader (как на preview.tabler.io/settings.html) */
|
||||
.subheader {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* Страница настроек: сайдбар не растягивается слишком широко */
|
||||
.settings-page-sidebar {
|
||||
max-width: 220px;
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.settings-page-sidebar {
|
||||
max-width: 260px;
|
||||
}
|
||||
color: var(--tblr-muted-color, #6c757d);
|
||||
margin-bottom: 0.25rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
/* Responsive navbar */
|
||||
|
||||
@@ -253,7 +253,7 @@ export default function SettingsPage() {
|
||||
return (
|
||||
<div className="page-wrapper">
|
||||
<div className="page-body">
|
||||
<div className="container-fluid">
|
||||
<div className="container-xl">
|
||||
<PageHeader
|
||||
title="Настройки интерфейса"
|
||||
icon={<IconSettings size={28} />}
|
||||
@@ -274,7 +274,7 @@ export default function SettingsPage() {
|
||||
return (
|
||||
<div className="page-wrapper">
|
||||
<div className="page-body">
|
||||
<div className="container-fluid">
|
||||
<div className="container-xl">
|
||||
<PageHeader
|
||||
title="Настройки интерфейса"
|
||||
icon={<IconSettings size={28} />}
|
||||
@@ -321,63 +321,58 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="row g-0 g-lg-4">
|
||||
{/* Боковое меню — узкая колонка, светлый фон */}
|
||||
<div className="col-12 col-lg-3 col-xl-2 mb-4 mb-lg-0 settings-page-sidebar">
|
||||
<div
|
||||
className="sticky-top bg-body-tertiary rounded-end py-3 px-3 pe-lg-3"
|
||||
style={{ top: '1rem', minHeight: '200px' }}
|
||||
>
|
||||
<div className="input-icon mb-3">
|
||||
<span className="input-icon-addon">
|
||||
<IconSearch size={18} className="text-muted" />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Поиск разделов"
|
||||
value={sidebarSearch}
|
||||
onChange={(e) => setSidebarSearch(e.target.value)}
|
||||
aria-label="Поиск разделов"
|
||||
/>
|
||||
</div>
|
||||
<nav className="settings-sidebar-nav">
|
||||
{sidebarGroupsFiltered.map((group) => (
|
||||
<div key={group.title} className="mb-3">
|
||||
<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">
|
||||
{/* Как в Tabler Settings: одна card, row g-0, col-md-3 border-end + col-md-9 */}
|
||||
<div className="card">
|
||||
<div className="row g-0">
|
||||
{/* Левая колонка — навигация (list-group list-group-transparent) */}
|
||||
<div className="col-12 col-md-3 border-end">
|
||||
<div className="card-body">
|
||||
<div className="input-icon mb-3">
|
||||
<span className="input-icon-addon">
|
||||
<IconSearch size={18} className="text-muted" />
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
className="form-control form-control-sm"
|
||||
placeholder="Поиск разделов"
|
||||
value={sidebarSearch}
|
||||
onChange={(e) => setSidebarSearch(e.target.value)}
|
||||
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 (
|
||||
<li key={section.id}>
|
||||
<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'}`}
|
||||
onClick={() => goToSection(section.id)}
|
||||
>
|
||||
<span className={`me-2 d-flex ${isActive ? 'text-primary' : 'text-muted'}`}>
|
||||
<Icon size={18} />
|
||||
</span>
|
||||
{section.title}
|
||||
</button>
|
||||
</li>
|
||||
<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>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
{sidebarGroupsFiltered.length === 0 && (
|
||||
<p className="text-muted small mb-0 mt-2">Нет подходящих разделов</p>
|
||||
)}
|
||||
{sidebarGroupsFiltered.length === 0 && (
|
||||
<p className="text-muted small mb-0">Нет подходящих разделов</p>
|
||||
)}
|
||||
</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' && (
|
||||
<SectionCard
|
||||
id="live-doh"
|
||||
@@ -583,6 +578,8 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</SectionCard>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user