Add a switch for UI design
Currently on my phone (Android), navigation bar is on the left, however, it's showed there is/was a design that the bar is at the bottom as below

I'm a new user and not sure if that's an old design, but I feel it more comfortable and suitable especially for a small screen, so even if you have a new design, please provide a switch for fall back.
Or maybe it's the responsive design, but obviously not working correctly here, since my device is a phone instead of tablet. In this case, please also add a switch to allow users to decide whether to choose manually.
Thanks for your attention.
Your phone must be really wide vertically. Can you state the resolution of your Android Smartphone?
https://github.com/KRTirtho/spotube/blob/master/lib/hooks/useBreakpoints.dart#L75
useEffect(() {
if (width > 1920 && breakpoint.value != Breakpoints.xxl) {
breakpoint.value = Breakpoints.xxl;
} else if (width > 1366 &&
width <= 1920 &&
breakpoint.value != Breakpoints.xl) {
breakpoint.value = Breakpoints.xl;
} else if (width > 800 &&
width <= 1366 &&
breakpoint.value != Breakpoints.lg) {
breakpoint.value = Breakpoints.lg;
} else if (width > 414 &&
width <= 800 &&
breakpoint.value != Breakpoints.md) {
breakpoint.value = Breakpoints.md;
} else if (width >= 250 &&
width <= 414 &&
breakpoint.value != Breakpoints.sm) {
breakpoint.value = Breakpoints.sm;
}
return null;
}, [width]);
So you are using resolution to determine the responsive design, am I correct? Well, maybe it's fine for desktop in most cases, but ideally it should be determined by dpi along with resolution, which means with a higher dpi, the resolution should be higher correspondingly. For example, if a phone has a screen with resolution 4K, you cannot simply consider it suitable for a design same as desktop with 4K screen. Actually, IMO this problem can be simplified to solve like, left sidebar for landscape (length > width) and bottom for portrait (length < width). That's the simplest way.