Standardizing Navbar Across the Site

[rahilkapoor]

Improvements

Read about Web Components and try implementing it for navbar for different sites which work on different frameworks.
The idea is to build one component that will be used across all sites

Navbars on different sites(sub-domains of RDS) are different as of now.

We need to make it look similar and familiar to the user. So we are going to redesign it.

Design of New Navbar:

https://www.figma.com/file/bpFHG9hXM13GSLmTkoNsrF/Navbar?node-id=0%3A1

Few Details

• font : Roboto
• weight: 700
• active color : #49A82E
• hover color : #49A82E
• size : 16 px (try making it in rem)
• active underline height : 3px (color : #49A82E)
• RDS Logo Size - 50x50

Pay Attention

=> Underline should be under the text as shown in the image and not inside the container in which the text persists.
=> Underline should be only under the active tab, it should not be visible on hover.
=> For this site Events/Img tag(rds logo) both should be configured properly!
=> The full navbar should be changed to the toggle menu when the screen width is less than 970px.

There might be slight changes for different domains and you are free to ask in the comments for that

• Standardize the Navbar website-status#233 - Akanksha
• Standardize Navbar across Real Dev Squad website-members#261 -
• Standardize Navbar across Real Dev Squad website-www#161 - Rohan (merged)
• Standardize Navbar across Real Dev Squad website-crypto#240 - Shubham
• Standardizing Navbar Across the Sites website-my#171 - Rohan

[whyDontI]

How about creating an NPM package for this NavBar, that can be installed in all the web apps.
We need to think about how it'll work with different FrontEnd frameworks.
Feel free to share your thoughts below 😃

[rohan09-raj]

How about creating an NPM package for this NavBar, that can be installed in all the web apps. We need to think about how it'll work with different FrontEnd frameworks. Feel free to share your thoughts below 😃

@whyDontI Sounds great 😃😃. Need to read more on this. Can you please suggest some article or documentation where I can go through this ??