Navigation Performance Exploration
Context
I'm really interested in navigation design. After working on the Fedora project website, I want to explore different implementations of navigation. I'd like to see metrics and be able to have an honest comparison of different implementations. Also, I really want the opportunity to work with animating the ui.
Implementation Ideas
- Basic baseline for comparison: a simple toggle that triggers a class change. This uses state for SSR in Nuxt
- Transition Component animation focused: wrap the nav in a vue transition component
-
issue: uses
v-show
orv-if
which overrides css w/style tags causing the css breakpoint to be irrelevant -
Conditional Solution:
v-if
/v-else
through **desktop** and **mobile** modes- Advantages: easy to create two general states for it to be in, addresses the problem at it's root, standardizable way of doing it
- Disadvantages: heavier load on DOM (removes and adds elements), duplication of code or requiring an extra component
-
Manual Solution: separate the nav into
TheNav
orAshNav
fromTheHeader
and use one to slide down and the other for desktop- Advantages: Simple and less dom manipulations
-
Disadvantages: same code is in the codebase twice. Can use
v-if
orv-show
, withv-if
a dom manipulation is created on click, withv-show
it's just hidden.- some of the disadvantage could be maybe mitigated by aria-roles
- Note: This seems like the best solution
-
Screen detection solution: use
onMounted()
hook to detect the screen at a particular size and render different options based on that- Advantages: some flexibility on how it can be managed, automates a part of the process
- Disadvantages: feels like a lot for something reasonably simple
-
new Idea: This could be done better by having the transition within a
v-if
orv-else
. So that the desktop switch doesn't get effected by thetransition
tag
- Unknown: What I would like is to have the same component to be in the dom tree and just have the classes change, use a transition on mobile but not use it when switched to desktop
-
issue: uses
Definition of Done
-
working implementation that uses a transition to slide down on mobile while automatically defaulting to block in the header on desktop size -
use 2-3 branches with the different functioning implementations to compare accessibility and performance -
select and implement the most performant option
Edited by Ashlyn Knox