Skip to content

Commit

Permalink
Refactored Navigation component to use type instead of dropdown p…
Browse files Browse the repository at this point in the history 
…rop. (#113)

Co-authored-by: Joshua Fernandes <“[email protected]”>
  • Loading branch information
@joshua-salsadigital
joshua-salsadigital and Joshua Fernandes authored Mar 18, 2024
1 parent b3f22a2 commit 905dd99
Show file tree
Hide file tree
Showing 7 changed files with 186 additions and 177 deletions.
4 changes: 4 additions & 0 deletions components/00-base/_variables.components.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -930,6 +930,10 @@ $ct-message-dark-warning-icon-color: $ct-message-dark-warning-color !default;
//
// Navigation can be rendered in 3 ways: plain, with dropdown and with drawer.

// Inline.
$ct-navigation-inline-column-gutter: $ct-item-list-horizontal-regular-column-gap !default;
$ct-navigation-inline-row-gutter: $ct-item-list-horizontal-regular-column-gap !default;

// Dropdown.
$ct-navigation-dropdown-zindex: 11 !default;
$ct-navigation-dropdown-border-radius: $ct-border-radius !default;
Expand Down
4 changes: 2 additions & 2 deletions components/00-base/collapsible/collapsible.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ CivicThemeCollapsible.prototype.closeGroup = function (group) {
// eslint-disable-next-line prefer-template
document.querySelectorAll('[data-collapsible-group=' + group + ']:not([data-collapsible-collapsed])').forEach((el) => {
if (el !== currentEl) {
el.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true }));
el.dispatchEvent(new CustomEvent('ct.collapsible.collapse', { bubbles: true, detail: { closeGroup: true } }));
}
});
}
Expand Down Expand Up @@ -255,7 +255,7 @@ CivicThemeCollapsible.prototype.collapse = function (animate, evt) {
}

if (evt && evt.target) {
if (evt.detail.keydown) {
if (evt.detail.keydown && !evt.detail.closeGroup) {
if (evt.target.closest('[data-collapsible="true"]') !== t.el) {
return;
}
Expand Down
138 changes: 137 additions & 1 deletion components/03-organisms/header/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,38 @@
.ct-header {
$root: &;

&__content-top2,
&__content-top2 {
margin-top: ct-spacing();
margin-bottom: ct-spacing();
}

&__content-top3 {
margin-top: ct-spacing();
margin-bottom: ct-spacing();

.ct-navigation {
$root-dropdown: '.ct-navigation';
&#{$root-dropdown}--dropdown {
#{$root-dropdown}__items {
#{$root-dropdown}__menu {
.ct-menu__item {
// Links - level 0.
&--level-0 {
margin-right: ct-spacing(2);

&:last-child {
margin-right: 0;
}

> .ct-link {
text-align: center;
}
}
}
}
}
}
}
}

&__middle {
Expand All @@ -34,6 +62,114 @@
display: flex;
justify-content: flex-end;
}

.ct-navigation {
$root-drawer: '.ct-navigation';

&#{$root-drawer}--drawer {
#{$root-drawer}__items {
#{$root-drawer}__menu {
.ct-menu__item {
// Links - level 0.
&--level-0 {
border-bottom: solid ct-particle(0.5);

> .ct-link {
display: block;
padding: ct-spacing(2);
text-align: center;

&::after {
right: ct-spacing();
margin-top: -1 * ct-particle(0.25);
top: ct-spacing(2);
}
}
}
}
}
}

@include ct-component-theme($root-drawer) using($root-drawer, $theme) {
#{$root-drawer}__items {
#{$root-drawer}__menu {
.ct-menu__item {
// Links - level 0.
&--level-0 {
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color);

&:hover {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);

border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color);
}

&:active {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);

border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color);
}

&[data-collapsible] {
@if $theme == 'light' {
color: $ct-navigation-light-drawer-color;
}
@else {
color: $ct-navigation-dark-drawer-color;
}

border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color);

&:hover {
@if $theme == 'light' {
color: $ct-navigation-light-drawer-hover-color;
}
@else {
color: $ct-navigation-dark-drawer-hover-color;
}

@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);

border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, hover, border-color);
}

&:active {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);

border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, active, border-color);
}
}

&[data-collapsible-collapsed] {
border-bottom-color: ct-component-var($root-drawer, $theme, drawer-menu-item, border-color);
}

&.ct-menu__item--active-trail {
border-bottom-color: ct-component-var($root-drawer, $theme, drawer, border-color);
}

> .ct-link {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, background-color);
@include ct-component-property($root-drawer, $theme, drawer, color);

&:hover {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, hover, background-color);
@include ct-component-property($root-drawer, $theme, drawer, hover, color);
}

&[aria-expanded='true'],
&:active {
@include ct-component-property($root-drawer, $theme, drawer-menu-item, active, background-color);
@include ct-component-property($root-drawer, $theme, drawer, active, color);
}
}
}
}
}
}
}
}
}
}

.ct-mobile-navigation-trigger {
Expand Down
4 changes: 2 additions & 2 deletions components/03-organisms/header/header.stories.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
{% include '@organisms/navigation/navigation.twig' with {
theme: theme,
items: secondary_navigation_items,
dropdown: 'dropdown',
type: 'dropdown',
modifier_class: 'ct-justify-content-end',
} only %}
{% endset %}
Expand All @@ -39,7 +39,7 @@
{% include '@organisms/navigation/navigation.twig' with {
theme: theme,
items: primary_navigation_items,
dropdown: 'drawer',
type: 'drawer',
dropdown_columns: primary_navigation_dropdown_columns,
dropdown_columns_fill: primary_navigation_dropdown_columns_fill,
modifier_class: 'ct-justify-content-end',
Expand Down
Loading

1 comment on commit 905dd99

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 Published on https://civictheme-uikit.netlify.app as production
🚀 Deployed on https://65f803c0ba0342364121c568--civictheme-uikit.netlify.app

Please sign in to comment.