Files
app-service/frontend/src/pages/admin/Sources.tsx
matteoscrugli 97494679ec 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>
2026-01-05 16:52:34 +01:00

46 lines
1.7 KiB
TypeScript

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';
export default function Sources() {
const { user: currentUser } = useAuth();
const { t } = useTranslation();
const { toggleMobileMenu } = useSidebar();
if (!currentUser?.is_superuser) {
return null;
}
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">
<div className="admin-title-section">
<span className="admin-title-text">{t.sourcesPage.title}</span>
</div>
</TabsScroller>
</div>
<div className="admin-tab-content">
<div className="tab-content-placeholder">
<div className="placeholder-icon">
<span className="material-symbols-outlined">database</span>
</div>
<h3>{t.sourcesPage.title}</h3>
<p>{t.sourcesPage.comingSoon}</p>
</div>
</div>
</SwipeableContent>
);
}