Responsive Site Navigation

[colbyfayock]

I'm happy with the "desktop" experience for larger devices, but I didn't put a ton of thought into how mobile should look.

We should figure out a good way to present the navigation for all device sizes.

Things to consider:

• How does this look on smaller devices (mobile)
• How does this look on larger devices (desktop)
• Is a hamburger menu appropriate? maybe instead do a sideways scrolling menu like how Google does it on mobile?
  
• How would search look on mobile?

A solution should be proposed before this Issue gets picked up to get worked on, ideally with a design mockup of sorts (doesn't need to be perfect for the mockup)

[Arxhtects]

^
position: fixed;
justify-content: flex-start;
top: 0;
left: 0;
display: flex;
flex-flow: column;
background: whitesmoke;
padding: 10px;
height: 100vh;
z-index: 2;
overflow-y: auto;
width: 70vw;
transition: left 0.45s ease-in-out

have a toggle menu that sets left to 70vw onclick with simple js click
Its all a really Simple css media screen break

if you wanted to go menu scroll way, You could just have an overflow-x: auto;
But this isnt really pretty.

Search bar
Could be a very simple toggle overlay, Or just have it relocate below the header with positioning

[Arxhtects]

Just realised ive not specifed where the code should be placed.
Would be best on the nav UL tag

[rabishprasad190]

hi

[colbyfayock]

hey @Arxhtects thanks for putting that together - was that just a mockup or did you make a proof of concept somewhere? id be curious to see an example of how that would look when it's not open for instance

[Arxhtects]

hey @Arxhtects thanks for putting that together - was that just a mockup or did you make a proof of concept somewhere? id be curious to see an example of how that would look when it's not open for instance

Hey it was a proof of concept from the inspect window. and the x button was just a quick paint job.

Tbh making a toggle button is easy, i normaly do it with a div as a wrapper and 3 divs or spans inside. Some people do it with one div and before and afters, but i don't like doing it that way, I'm currently swamped work wise if i had time i would have forked and made a working concept, Maybe if i get some time ill make something, but tbh any one could pick this up and work from the code ive roughly put to geather.

A simple $("nav").toggleClass("show") [or w/e code you wana do it in] on the toggle button would work bringin the menu out from the left, hell you could add it to the body if you wanted and move the body over for a extra bit of fancy 👍

Its just a basic of canvas menu.

just put the code

position: fixed;
justify-content: flex-start;
top: 0;
left: 0;
display: flex;
flex-flow: column;
background: whitesmoke;
padding: 10px;
height: 100vh;
z-index: 2;
overflow-y: auto;
width: 70vw;
transition: left 0.45s ease-in-out

into the element style and you will see it, all it would need is a media tag [mobile first, for that tasty google rankings] on the ul for it to change between resolutions :)

[allenjamesvinoy14]

@Arxhtects I would like to pick it up and work with the ground work you have laid.

[Arxhtects]

@Arxhtects I would like to pick it up and work with the ground work you have laid.

I have no issue with that 👍
However I'm not the owner of this repo :D Might want to check with them first

[colbyfayock]

as long as @Arxhtects didn't want to do the work and submit the PR that sounds good

when working through it we'll want to make sure that we're providing a good experience for both mobile and desktop :)

[doingandlearning]

@allenjamesvinoy14 - let me know if you'd like any support with this. :)

[Ambareen09]

Hey, if this issue is still relevant, I'd like to work on this.

[colbyfayock]

@Ambareen09 sure that would be great! let me know if you have any questions

[Ambareen09]

Can you please help me with setting up the WORDPRESS_GRAPHQL_ENDPOINT? I am unable to follow the documentation for this part.

[colbyfayock]

@Ambareen09 check these tutorials out:

https://spacejelly.dev/posts/how-to-create-a-headless-wordpress-blog-with-next-js-wordpress-starter/
https://www.youtube.com/watch?v=X8fY011u0tE

[colbyfayock]

you could try using a local wordpress instance: https://localwp.com/

there's also a service to spin up a temporary one but i can't find it right now, ill comment back if i find it