- 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>
46 lines
1.7 KiB
TypeScript
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>
|
|
);
|
|
}
|