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

Add swipe-to-open sidebar on all pages + fix bottom bar styling

Browse Source 
- 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>
This commit is contained in:
matteoscrugli
2025-12-23 21:48:19 +01:00
parent 9e3556322f
commit 500d038ed0
22 changed files with 493 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/styles/Layout.css
View File

@@ -887,22 +887,6 @@ label,
justify-content: flex-start;
}
/* Hide title section when bar is at bottom (only on pages with tabs) */
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .page-title-section,
[data-tab-position='bottom'] .page-tabs-slider[data-has-tabs='true'] .admin-title-section,
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .page-title-section,
[data-tab-position='bottom'] .admin-tabs-slider[data-has-tabs='true'] .admin-title-section {
display: none;
}
/* Hide divider when bar is at bottom */
[data-tab-position='bottom'] .page-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .page-tabs-slider .admin-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .admin-tabs-divider {
display: none;
}
/* Add bottom padding and remove top padding when bar is at bottom */
[data-tab-position='bottom'] .main-content {
padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
@@ -926,7 +910,13 @@ label,
left: 0;
}
/* Keep proper spacing for mobile menu button - inherits padding-left: 72px from mobile rules */
/* Hide divider on mobile when bar is at bottom */
[data-tab-position='bottom'] .page-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .page-tabs-slider .admin-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .page-tabs-divider,
[data-tab-position='bottom'] .admin-tabs-slider .admin-tabs-divider {
display: none;
}
}
/* Responsive position - top on desktop, bottom on mobile */