Increased length of clickable space in navbar

[karnikaavelumani]

Previously, in mobile mode, the size of the clickable area in the navbar was significantly small so it required you to press the names of the pages directly rather than the surrounding area itself.

Now it has been updated to encompass a larger area of clickable space. The size should be from one end of the screen to the other end.

I am open to suggestions if whether we should have a title for the navbar, such as like "Menu", so that I can push down all the pages and make it easier to click if they are all situated near the bottom. I am also unsure of how to fix the words stacking on top of each other in "Node Buds". I am aware we have removed that page from the navbar, but for future pages it should not be stacked.

Fixes #279.

This PR additionally makes the navbar transparent, which addresses #580.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
acm-csuf-site	✅ Ready (Inspect)	Visit Preview	Oct 30, 2022 at 10:48AM (UTC)

[karnikaavelumani]

@diamondburned This was an issue you pointed out so let me know what you think about this solution!

[karnikaavelumani]

Fixes #511 as well

[diamondburned]

I prefer the old dark navbar better with the dark theme, but I think the new changes are overall more consistent with the design.

[karnikaavelumani]

I'll try to actually change it back to the dark theme navbar but add perhaps a shadow.

[jaasonw]

this navbar need refactor tbh

[jaasonw]

1. acm icon is above overlay
2. backdrop animation is too slow
3. mobile navbar is too tall

Snapchat-1859405296.mp4

Snapchat-420092908.mp4

[jaasonw]

Screen_Recording_20221011_125415_Samsung.Internet.mp4

possible to disable scrolling here too?

[jaasonw]

button not seem to work here

Screen_Recording_20221011_125627_Samsung.Internet.mp4

[JustinStitt]

looks good to me.

your contribution improves the mobile experience.

we are, however, starting to realize the technical debt with the current navbar structure. Perhaps a refactor is needed.

we may also want to package up some of these frequently used css properties like:

position: absolute;
width: 100%;
height: 100%;

into their own class to reduce code bloat/smell.

we may also want to reduce the css nesting levels. i am not sure on the best approach but some of these elements are nested 5-6 levels deep and all within a media query as well. unmaintainable!!! (separate issue to be solved alongside the html refactor prob)

[jaasonw]

1. logo z index wrong again
2. overlay transition seem to not correct

Snapchat-1135243973.mp4

[karnikaavelumani]

When you get a chance, please take a look at this @jaasonw! Thank you!

[jaasonw]

the reason it's taking so long is cus im still looking into fixing the exit animation and havent had the time

[karnikaavelumani]

We can make it a separate issue if you would like, but if not I will also look into it as well. Thank you for letting me know.

[jaasonw]

fixed