Add swipe-to-open sidebar on all pages + fix bottom bar styling

- Create SwipeableContent component for sidebar swipe on non-tab pages
- Add swipe-to-close sidebar from overlay
- Make swipe work from entire page (ignoring interactive elements)
- Show title and divider on desktop when tab bar is at bottom
- Hide title/divider only on mobile for bottom position

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2025-12-23 21:48:19 +01:00
parent 9e3556322f
commit 500d038ed0
22 changed files with 493 additions and 63 deletions

View File

@@ -2,6 +2,7 @@ import { useAuth } from '../../contexts/AuthContext';
import { useTranslation } from '../../contexts/LanguageContext';
import { useSidebar } from '../../contexts/SidebarContext';
import TabsScroller from '../../components/TabsScroller';
import { SwipeableContent } from '../../components/SwipeableContent';
import '../../styles/AdminPanel.css';
export default function Sources() {
@@ -14,7 +15,7 @@ export default function Sources() {
}
return (
<main className="main-content admin-panel-root">
<SwipeableContent className="main-content admin-panel-root">
<div className="admin-tabs-container">
<TabsScroller className="admin-tabs-slider">
<button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
@@ -35,6 +36,6 @@ export default function Sources() {
<p>{t.sourcesPage.comingSoon}</p>
</div>
</div>
</main>
</SwipeableContent>
);
}