[Feature] Header isn't consistent with the current Vocabulary design system

[Netacci]

Problem

The header design implemented does not match the current Vocabulary design system. It is also missing the Explore CC drop down.

Legaldb website

Vocabulary design system

Description

There is a noticeable difference in the header layout and styling between what is defined in the design system and what is implemented on the legaldb website.

The header in the legaldb website should be center aligned to match what we have in the design system. We should also include the Explore CC dropdown and navigation section.

Additional context

• Having consistent design patterns will improve both development efficiency and overall UX.
• creativecommons/vocabulary: A cohesive system of design for Creative Commons

Implementation

• I would be interested in implementing this feature.

[Poison-Iveey]

Hi, @Netacci and @TimidRobot , I am working on this

[Queen-codes]

hi @TimidRobot and @possumbilities I hope you are both having a great weekend.

I have started working on this issue and would like your input and suggestions before I proceed further than I already have. Currently, I have two approaches to fixing this issue.

The first option is to lift the CSS styles directly from Vocabulary and add them to the legal db CSS file, which could allow for quicker implementation and fixing of this issue.

The other option is to install the current version of Vocabulary in the codebase to maintain a consistent design system and make future updates easier. This might also be a solution to issue #196. If vocabulary is included, both issues can be fixed quickly.

I'd appreciate any insight on which approach is better. I look forward to hearing from you when office hours are open. Enjoy the rest of your weekend.

[egbadon-victor]

HI @TimidRobot

While trying to resolve this issue, a major question came to mind. This repo utilizes webpack to compile the sass files into css. While the new vocabulary implementation does not require sass, I can't ignore the minification that occurs too. So here is the question.

In the implementation of the new vocabulary design system in the legaldb repo, could we use webpack to minify the vocabulary source files into a single css and js file, then link that in the django templates, or is webpack going to be removed from this project upon implementation of the new vocabulary design system?

I believe the minification would be a welcome step as it effectively reduces style and script sizes, which also reduces payload size. But this all depends on the direction of the project going forward. Your input would be of great assistance here

[TimidRobot]

@egbadon-victor I expect webpack will eventually be removed. Our CDN handles minification.

[egbadon-victor]

@TimidRobot this is understood. Thank you for the feedback

[TimidRobot]

This issue was resolved in the vocab-refresh branch by:

• Align header with Vocabulary current design system #222

[TimidRobot]

@Dev-JoyA please comment on this issue so I can assign this issue to you

[Dev-JoyA]

@TimidRobot kindly assign this issue to me ,
Thanks.