syntapy/superformula_clone

Navbar code is too complex

Closed this issue · 1 comments

syntapy commented

Right now I have two html lists for the navbar, which are hidden/displayed based on mobile/desktop size

Is there a way to make it just simpler? E.g. as shown this responsive navbar code sample

  • nav tag should be outermost tag in index.tsx
  • have a duplicate home button, but the 2nd one is hidden in desktop mode
  • use css to modify style of nav items

On that last point, inside the nav should have:

  • home button (always visible)
  • div with nav items (style / visibility depends on desktop/mobile, and in mobile whether menu is clicked)
    • has the 2nd home button (visible in mobile)
    • items and (later) their corresponding svg icons (icons visible in mobile only)
    • later, sub items (only visible in mobile)
  • chilidog menu button (visible on mobile

But this kinda makes the styles extremely complex no? Maybe its all good as it is? Eh, try it and see how it goes I guess

I can separate out the navbar style file as well, and have each of those be visible / hidden in their corresponding / oppossite media queries

syntapy commented

I can either use js to do an if/else statement in the navbar/index.tsx (sorta what I'm doing?)

Whether home button should be in nav tag seems to depend on whether you want that item to be skippable by a user agent, such as a screen reader, when the user wants to just look at the contents

So for me, I would vote to put everything at the top inside the nav as I have it already