search

thombruce / tnt

Thom's Nuxt Template
https://tnt.thombruce.com/
MIT License
0 stars 0 forks source link

[Feature]: Mobile Sidebar #100

Closed thombruce closed 2 weeks ago

thombruce commented 2 weeks ago

Feature request

The sidebar currently extends across the screen and persists even when clicked outside of or when a navigation link is clicked.

This is desirable for applications and desktop web pages, but is an issue on mobile where there's less screen real estate and the sidebar occupies almost all of it.

On mobile, the sidebar should:

Tailwind of course has modifiers for targeting smaller screens, but our current behaviours depend on Vue state.

The easiest solution may be to simply render a different component dependent on screen size, one that has different behaviours... unless said behaviours can be applied programmatically based on screen size; how much awareness does Vue have of screen size?

Code of Conduct

thombruce commented 2 weeks ago

Couple of VueUse features that may be of some help:

  1. https://vueuse.org/core/useBreakpoints/
  2. https://vueuse.org/core/useWindowSize/

Either one could be used to provide variables that conditionally render a different component or apply breakpoint-specific behaviours to the existing component (probably preferred).

Our programmatic breakpoints must match Tailwind's own breakpoints... so we either become locked in, or we need a means of synchronising the two as well. Maybe Tailwind's breakpoints can be obtained within the JS?

thombruce commented 2 weeks ago

useBreakpoints can be configured with Tailwind breakpoints (available within the library) but...

...they are static values: https://github.com/vueuse/vueuse/blob/main/packages/core/useBreakpoints/breakpoints.ts

This is fine, as we consider the Tailwind breakpoints to be sensible, but it does mean that configuring them will be something we have to recommend against.