Responsive nav bar without code duplication
I want to create responsive nav bar without code duplication and conditional rendering (jsx). What is general strategy to make it work?
I attach picture of what I want to achieve.
1 - logo
2 - nav links
3 - social buttons
On mobile nav links should be hidden in burger menu
16 Replies
grid can easily do this
How does grid help to achieve it? I understand ordering part, but what is required to make collapsible part with grid?
you can use grid areas
you can also just say that the 2nd element now goes to the 2nd row and goes from the 1st to 3rd column
Just know if the visual order changes , it doesn’t change the tab order for keyboard users
And collapsibility? Toggling display of this section? Animating height? Something else?
that's completely outside
but you can do it all with css
oh, and with popups
I will use js for toggling. I think about classic shelf that opens over main content without shifting it. But still, what is best suited solution for it?
In my opinion it's best to maintain two separate components. Initially it seems redundant, but as the site grows it might become beneficial to actually have these two separated - they can really divert in terms of style and even functionality. Of course, YMMV.
As someone suggested, grid could do this task just fine. The problem comes after you want to add transitions for opening, since grid doesn't allow for such tricks.
Now that I'm thinking, what if you actually used grid, used grid areas, and through JS assigned grid-area dynamically to the Links (2), while applying transition for all, or probably better - just height? I haven't tested that, just thinking out loud
I tried some approaches and made it work by pulling it out of flow with absolute positioning. Although it looks more like modal than part of header
the "looks" can be tweaked
also, users wont give a damn about how you implement it, as long as it works and doesnt stop the users from doing what they want (unless it is something dumb, then stop them)
I realize that you have come up with your own solution which is great, well done 👏
However, just to follow on from Erics suggestion of using grid, and, I'm afraid to say, in contrary to Kubas comment about grid not being able to have transitions, I have put together a quick demo using grid:
https://codepen.io/cbolson/pen/PoMRbZe
However, it is true that this solution as is would push the content down when opening the nav (not necessarily a bad idea) so, if you don't want this, as you have already done, pulling it (the nav) out of the flow and giving it a position absolute is a viable solution.
What I would not do is duplicate the nav content itself. It only makes it harder to maintain and duplicate content is not good for SEO.
To tack onto Chris solution, position absolute works well with Grid; it position absolute item becomes relative to its cell. So you can transition it and pull it out of the flow as well.
to tack on top of this all, im not erics 🤣
opps, sorry about that 🙏 , I meant to say "Epic" (I think, I am never 100% sure)
🤣
Well, I corrected myself after a bit of thought ;P nice demo. TIL that you can transition grid-template-rows and columns