matteoscrugli
500d038ed0
- 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>
37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
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 Feature2() {
|
|
const { t } = useTranslation();
|
|
const { toggleMobileMenu } = useSidebar();
|
|
|
|
return (
|
|
<SwipeableContent className="main-content">
|
|
<div className="page-tabs-container">
|
|
<TabsScroller className="page-tabs-slider">
|
|
<button className="mobile-menu-btn" onClick={toggleMobileMenu} aria-label={t.theme.toggleMenu}>
|
|
<span className="material-symbols-outlined">menu</span>
|
|
</button>
|
|
<div className="page-title-section">
|
|
<span className="page-title-text">{t.features.feature2}</span>
|
|
</div>
|
|
</TabsScroller>
|
|
</div>
|
|
|
|
<div className="page-content">
|
|
<div className="tab-content-placeholder">
|
|
<div className="placeholder-icon">
|
|
<span className="material-symbols-outlined">download</span>
|
|
</div>
|
|
|
|
<h3>{t.features.feature2}</h3>
|
|
<p>{t.features.comingSoon}</p>
|
|
</div>
|
|
</div>
|
|
</SwipeableContent>
|
|
);
|
|
}
|