forked/topola-viewer
1
0
Fork 0
mirror of https://github.com/PeWu/topola-viewer.git synced 2026-07-31 08:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improving the UX of the sidebar on mobile (#228)

Browse Source 
* refactor: move the sidebar to the bottom of the viewport on mobile for better UX

* feat(sidepanel): add a function which checks the viewport size and determines whether the side panel should be shown by default
This commit is contained in:
Mario N. Nikolov
2026-01-19 21:48:31 +02:00
committed by GitHub
parent 7b9ad68ce7
commit bff5d7f267
2 changed files with 53 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/app.tsx
View File

@@ -187,13 +187,29 @@ function getArguments(location: H.Location<any>): Arguments {
? {id: indi, generation: !isNaN(parsedGen) ? parsedGen : 0}
: undefined;
/**
* Determines whether the side panel should be shown taking into account the
* URL parameter and the viewport size.
*
* On mobile devices (max-width: 767px), the side panel is hidden by default.
* On tablet and desktop, the side panel is shown by default.
*/
function getShowSidePanel() {
if (window.matchMedia('(max-width: 767px)').matches) {
// On mobile, hide the side panel by default.
return getParam('sidePanel') === 'true';
}
// On tablet and desktop, show the side panel by default.
return getParam('sidePanel') !== 'false';
}
return {
sourceSpec,
selection,
// Hourglass is the default view.
chartType: chartTypes.get(view) || ChartType.Hourglass,
showSidePanel: getParam('sidePanel') !== 'false', // True by default.
showSidePanel: getShowSidePanel(),
standalone: getParam('standalone') !== 'false' && !embedded && !staticUrl,
showWikiTreeMenus: getParam('showWikiTreeMenus') !== 'false', // True by default.
freezeAnimation: getParam('freeze') === 'true', // False by default