Problem/Motivation
Need a global header that looks similar to Figma and new.drupal.org/home

Steps to reproduce
Proposed resolution
Default content has been add via:
#3510426: Create SDDS global header config
To get default content:
https://www.drupal.org/community-initiatives/starshot-demo-design-system...
1. Install SDDS as usual
2. Use drush to run the recipes (see README.md as well)
then style :)
Remaining tasks
- Set up local with default content
- Add/update css etc
- Review/test/commit
User interface changes
The user will see the header in XB that looks nice :)
API changes
Data model changes
| Comment | File | Size | Author |
|---|---|---|---|
| #11 | sdds-header-less-links.png | 57.78 KB | kristen pol |
| #6 | missing-some-bg.png | 766.9 KB | heyyo |
| #6 | styled-hero.png | 384.36 KB | heyyo |
Issue fork demo_design_system-3511877
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #3
kristen polWork is here
https://git.drupalcode.org/project/demo_design_system/-/merge_requests/77
Comment #4
kristen polComment #5
kristen polI have class today so I won't be able to test this until tonight.
If someone else wants to test in the meantime, go for it.
Comment #6
heyyo commentedI tried to test it. I'm not sure how everything should work.
Here what I achieved so far
Comment #7
kristen polI recorded my testing of the header and of global regions: https://youtu.be/pF6F523Jieg
I'm not loving the UX of the global regions, but I think that's a known thing, so maybe it'll be different at some point.
I'm not sure it's good to build the header into the hero, because only the home page will have that particular hero and not the other pages.
If we build that bar separately (not in the hero) and put it into the header region then it would be the same across all pages.
But then it wouldn't look integrated with the hero, and a hero may or may not be on other pages and, if it is, it will be different content.
I'm not sure what the best UX is for this.
Could this instead be a variation of the container rather than being its own "header panel" component? At least then, we don't have a very special purpose component. Not sure.
I'll see if others have some thoughts.
Comment #8
gábor hojtsyI agree the UX is confusing of empty regions not being exposed in XB, needing to place stuff in the content and then moving it. After that though double-clicking on/into the region makes it possible to adjust it, which is for me at least natural. The initial part of how one tries to use it is confusing.
I think #3512060: Too many global regions in SDDS must be solved before this issue or as part of this issue first because otherwise you don't have a clean region to place the header onto. Otherwise I don't think this should be help up in trying to get it perfectly blend in with the hero/design at all :)
Comment #9
kristen polThe regions are reduced in this issue’s MR but I didn’t include the header region because I had my unstyled blocks in there. Even disabled blocks will show up in XB.
I made an issue for me to remove those blocks from block placement so it’s not additionally confusing things. I’ll try to do soon.
Comment #10
kristen polJust merged these in 1.0.x:
#3512657: Remove block placement of SDDS header+footer blocks
#3512060: Too many global regions in SDDS
and merged 1.0.x into the MR branch.
Comment #11
kristen polRemoved some of the main menu links to reduce wrapping issues so it will look more like:
Comment #12
kristen polWe're going to move from the standalone MR into an issue MR so non-maintainers can collaborate.
Comment #14
kristen polWhen splitting up the menus into starshot-specific ones, I must have missed some config as I get errors sometimes... I'll try to figure it out but am off to class for a few hours soon :/
Comment #15
kristen polI'll try with a fresh install later as my local db might be a bit borked now
I'll be out of commission until tonight, so unassigning in case someone can pick this up.
Comment #16
kristen polHere's a video of it... not sure why the link styling disappeared after switching menus:
https://youtu.be/B_P-8bzG2cM
If someone can look at that while I'm out, that would be great.
Comment #17
kristen polOh… or probably because it’s not inside the hero
Comment #19
kristen polMerged MR and we'll do another MR to clean up some styling things.
Comment #20
kristen polSome generic styling to support footer and minor header tweaks happened in:
#3510427: Add SDDS global footer styling
https://youtu.be/V3JbUZ7_mHc
These changes were merged.
We probably want to move away from a specialized header component and move the styling into some of the generic components (e.g. flexible slot and or columns)
To avoid confusion, I'll mark this one as fixed and we can create a follow up issue for that.
Comment #21
kristen polThanks, everyone!
Comment #22
kristen polFollow-up:
#3513066: Improve SDDS generic components and add social media components
Comment #23
kristen polNote:
#3513270: Twig\Error\LoaderError: Template "@atoms/starshot-menu/starshot-menu.twig" is not defined
Comment #24
kristen polupdate parent