Add separate MobileTitleBar component for mobile layout
- Create MobileTitleBar component with fixed top position - Split title bar from tabs bar on mobile (title always on top) - Add data-has-actions attribute for action button detection - Track --tab-pill-height CSS variable for tab buttons - Remove extra padding from mobile content padding-top - Hide tabs container when no tabs or actions present 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import { useAuth } from '../../contexts/AuthContext';
|
||||
import { useTranslation } from '../../contexts/LanguageContext';
|
||||
import { useSidebar } from '../../contexts/SidebarContext';
|
||||
import MobileTitleBar from '../../components/MobileTitleBar';
|
||||
import TabsScroller from '../../components/TabsScroller';
|
||||
import { SwipeableContent } from '../../components/SwipeableContent';
|
||||
import '../../styles/AdminPanel.css';
|
||||
@@ -16,11 +17,14 @@ export default function Sources() {
|
||||
|
||||
return (
|
||||
<SwipeableContent className="main-content admin-panel-root">
|
||||
<MobileTitleBar
|
||||
title={t.sourcesPage.title}
|
||||
menuLabel={t.theme.toggleMenu}
|
||||
onMenuClick={toggleMobileMenu}
|
||||
variant="admin"
|
||||
/>
|
||||
<div className="admin-tabs-container">
|
||||
<TabsScroller className="admin-tabs-slider">
|
||||
<button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
|
||||
<span className="material-symbols-outlined">menu</span>
|
||||
</button>
|
||||
<div className="admin-title-section">
|
||||
<span className="admin-title-text">{t.sourcesPage.title}</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user