Use MUI

[koolskateguy89]

• https://mui.com/
• https://mui.com/material-ui/getting-started/overview/
• Look at https://mui.com/material-ui/react-drawer/#full-height-navigation for sidebar
• Look at https://nextjs.org/blog/next-13-1#import-resolution-for-smaller-bundles for managing imports
• Migrate to using MUI with CSS variables #51
• Theme creator
• Finalise layout nav (TODOs in NavigationBar component)
• Use MUI in ProfilePage #42
• Remove Bootstrap
• More advanced theme switcher (MDN)
  • Store user choice in localStorage
• Tabs for nav on desktop (Material Design 2)
• Use Avatar in TextAvatar (and rename to UserAvatar) (Allow user to add image URL, while keeping text avatar #64)
• Use Collapse instead of Menu for mobile nav
  • Use Click Away Listener to auto close - decided not to
• Make sidebar act like a drawer on mobile #50
• Error handling
  • Custom 404 page
  • Custom 500 page
  • Custom ErrorBoundary
• Remove title
  • Move desktop nav to middle

[koolskateguy89]

Take inspiration from MDN for theme switcher?

[koolskateguy89]

Take inspiration from Material Design 2 docs for nav bar (especially underline)

I think it's just tabs

[koolskateguy89]

Use this colour for sidebar in darkmode? (colour applied by Dark Reader)

[koolskateguy89]

MUI CSS vars theme switch potential problem

mui/material-ui#32049 (comment)

[koolskateguy89]

Change theme switcher to be native select input? Using a select makes more sense semantically

[koolskateguy89]