matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add swipe-to-open sidebar on first tab

Browse Source 
When swiping right on the first tab, opens the mobile sidebar menu.
Added onSwipePastStart prop to SwipeTabs component.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-23 02:33:31 +01:00
parent 18c4760b5d
commit be5d6141f4
5 changed files with 18 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/pages/AdminPanel.tsx
View File

@@ -13,7 +13,7 @@ type TabId = 'general' | 'users';
export default function AdminPanel({ initialTab = 'general' }: { initialTab?: TabId } = {}) {
const { user: currentUser } = useAuth();
const { t } = useTranslation();
const { toggleMobileMenu } = useSidebar();
const { toggleMobileMenu, openMobileMenu } = useSidebar();
const [activeTab, setActiveTab] = useState<TabId>(initialTab);
const tabs: TabId[] = ['general', 'users'];
const renderPanel = (tab: TabId) => (tab === 'general' ? <GeneralTab /> : <UsersTab />);
@@ -57,6 +57,7 @@ export default function AdminPanel({ initialTab = 'general' }: { initialTab?: Ta
onTabChange={setActiveTab}
renderPanel={renderPanel}
panelClassName="admin-tab-content swipe-panel-content"
onSwipePastStart={openMobileMenu}
/>
</main>
);

3
frontend/src/pages/admin/Features.tsx
View File

@@ -25,7 +25,7 @@ const findTouchById = (touches: TouchList, id: number) => {
export default function Features() {
const { user: currentUser } = useAuth();
const { t } = useTranslation();
const { toggleMobileMenu } = useSidebar();
const { toggleMobileMenu, openMobileMenu } = useSidebar();
const { moduleStates, moduleOrder, setModuleEnabled, setModulePosition, setModuleOrder, saveModulesToBackend, saveModuleOrder, hasInitialized, isLoading } = useModules();
const [activeTab, setActiveTab] = useState<TabId>('config');
const hasUserMadeChanges = useRef(false);
@@ -785,6 +785,7 @@ export default function Features() {
onTabChange={handleTabChange}
renderPanel={renderTabContent}
panelClassName="admin-tab-content swipe-panel-content"
onSwipePastStart={openMobileMenu}
/>
</main>
);

3
frontend/src/pages/admin/ThemeSettings.tsx
View File

@@ -45,7 +45,7 @@ export default function ThemeSettings() {
} = useTheme();
const { t } = useTranslation();
const { user } = useAuth();
const { toggleMobileMenu, sidebarMode, setSidebarMode } = useSidebar();
const { toggleMobileMenu, openMobileMenu, sidebarMode, setSidebarMode } = useSidebar();
const isAdmin = user?.is_superuser || false;
const tabs: ThemeTab[] = isAdmin ? ['colors', 'appearance', 'preview', 'advanced'] : ['colors', 'appearance', 'preview'];
const [tooltip, setTooltip] = useState<{ text: string; left: number; visible: boolean }>({
@@ -764,6 +764,7 @@ export default function ThemeSettings() {
onTabChange={setActiveTab}
renderPanel={renderPanel}
panelClassName="admin-tab-content swipe-panel-content"
onSwipePastStart={openMobileMenu}
/>
{/* Color Picker Popup */}