matteoscrugli
97494679ec
- 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>
40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
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 Feature1() {
|
|
const { t } = useTranslation();
|
|
const { toggleMobileMenu } = useSidebar();
|
|
|
|
return (
|
|
<SwipeableContent className="main-content">
|
|
<MobileTitleBar
|
|
title={t.feature1.title}
|
|
menuLabel={t.theme.toggleMenu}
|
|
onMenuClick={toggleMobileMenu}
|
|
/>
|
|
<div className="page-tabs-container">
|
|
<TabsScroller className="page-tabs-slider">
|
|
<div className="page-title-section">
|
|
<span className="page-title-text">{t.feature1.title}</span>
|
|
</div>
|
|
</TabsScroller>
|
|
</div>
|
|
|
|
<div className="page-content">
|
|
<div className="tab-content-placeholder">
|
|
<div className="placeholder-icon">
|
|
<span className="material-symbols-outlined">playlist_play</span>
|
|
</div>
|
|
|
|
<h3>{t.feature1.title}</h3>
|
|
<p>{t.feature1.comingSoon}</p>
|
|
</div>
|
|
</div>
|
|
</SwipeableContent>
|
|
);
|
|
}
|