Mobile and narrow-resolution improvements

[dankimberley]

A few questions about a few proposed changes to improve UI at mobile and narrow-desktop resolutions. Breaking down changes in each file:

Navbar.tsx

Presents navbar as burger menu at narrow resolutions. A few things:

• At the moment I have implemented this with a ternary operator using the useWindowSize hook, returning a different navbar beyond the breakpoint. This works but adds loads of lines to the file so readability isn't great. Should I separate the standard and narrow versions into new components? e.g.

{(windowSize.width ?? 1024) >= 1024 ? <NavbarWide /> : <NavbarBurger />

• Open to suggestions here
• The burger menu drawer is currently quite minimally styled, any ideas for this? I could add the same arrows as the wide navbar but going down vertically?

Current:

Proposed:

Footer.tsx & ThemeSwitcher.tsx

Improves positioning within the footer when it condenses.

Current:

Proposed:

ThemeCards.tsx & /material/index.tsx

• Positions material theme cards into one column below a breakpoint.
• Adds padding to 'Material Themes' title, looked a little too condensed

Current:

Proposed:

Content.tsx

Adds padding to content

Current:

Proposed:

[dankimberley]

A few questions about a few proposed changes to improve UI at mobile and narrow-desktop resolutions. Breaking down changes in each file:

Navbar.tsx

Presents navbar as burger menu at narrow resolutions. A few things:

• At the moment I have implemented this with a ternary operator using the useWindowSize hook, returning a different navbar beyond the breakpoint. This works but adds loads of lines to the file so readability isn't great. Should I separate the standard and narrow versions into new components? e.g.

{(windowSize.width ?? 1024) >= 1024 ? <NavbarWide /> : <NavbarBurger />

I think this might be best (to split it into two component files), there is probably a out-of-the-box solution for this e.g. AppBar component but I think I am happy with this homebrew solution for now.

• Open to suggestions here
• The burger menu drawer is currently quite minimally styled, any ideas for this? I could add the same arrows as the wide navbar but going down vertically?

So this is all fantastic, great work @dankimberley .

I think for the burger menu styling something as simple as adding an icon for the material, (an open book?) and making it clear that the theme/course/section links are part of that:

e.g.

I don't know if both the horizontal line and the indentation are necessary but at least the indentation.

I don't have anything to say about your other changes, I am on board with them. The tiny padding on the content column is in particular a huge improvement.

Great! I'll make some changes to the burger drawer 👍

[dankimberley]

@alasdairwilson burger drawer changed as you suggested and dark mode added:

[alasdairwilson]

Brilliant, the tweaks to the burger menu look great