Skip to content

Commit

Permalink
Style desktop and mobile secondary nav
Browse files Browse the repository at this point in the history
  • Loading branch information
@shyusu4
shyusu4 committed Feb 10, 2025
1 parent e73ea71 commit 5ac1d25
Show file tree
Hide file tree
Showing 12 changed files with 176 additions and 173 deletions.
22 changes: 11 additions & 11 deletions ...tyleguide/templates/patterns/navigation/components/includes/subnav-child-menu-mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,29 +4,29 @@
<ul class="sub-nav-mobile__list sub-nav-mobile__list--child">
<li class="sub-nav-mobile__item sub-nav-mobile__item--back">
<button data-subnav-back class="sub-nav-mobile__link sub-nav-mobile__link--back">
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon-back" %}
Back to {{ grandparent.text }}
{% include "patterns/atoms/icons/icon.html" with name="chevron" classname="sub-nav-mobile__icon-back" %}
Back to {{ block.value.section_heading }}
</button>
</li>
<li class="sub-nav-mobile__item sub-nav-mobile__item--parent">
<a class="sub-nav-mobile__link sub-nav-mobile__link--parent" href="{% if parent.page %}{% pageurl parent.page %}{% elif parent.external_link %}{{ parent.external_link }}{% endif %}">
{{ parent.text }}
</a>
<span class="sub-nav-mobile__link sub-nav-mobile__link--parent" href="{% if parent.page %}{% pageurl parent.page %}{% elif parent.external_link %}{{ parent.external_link }}{% endif %}">
{{ child.value.section_heading }}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
</span>
</li>
{% for gchild in child.value.child_links %}
<li class="sub-nav-mobile__item">
<a class="sub-nav-mobile__link sub-nav-mobile__link--child sub-nav-mobile__link--no-children" href="{{ gchild.value.url }}">
<a class="sub-nav-mobile__link sub-nav-mobile__link--no-children" href="{{ gchild.value.url }}">
{{ gchild.value.text }}
{% if gchild.value.description %}
<span class="sub-nav-mobile__description">{{ gchild.value.description }}</span>
{% endif %}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
</a>
</li>
{% endfor %}
{% if child.value.section_link %}
<li class="sub-nav-mobile__item">
<a class="sub-nav-mobile__link sub-nav-mobile__link--child sub-nav-mobile__link--no-children" href="{{ child.value.section_link.url }}">
<span>{% firstof child.value.section_link_text child.value.section_link %}</span>
<a class="sub-nav-mobile__link sub-nav-mobile__link--no-children" href="{{ child.value.section_link.url }}">
{% firstof child.value.section_link_text child.value.section_link %}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
</a>
</li>
{% endif %}
Expand Down
4 changes: 2 additions & 2 deletions ...oject_styleguide/templates/patterns/navigation/components/includes/subnav-child-menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% for gchild in child.value.child_links %}
<li class="sub-nav-desktop__item">
<a href="{{ gchild.value.url }}" class="sub-nav-desktop__link">
<span>{{ gchild.value.text }}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
<span class="sub-nav-desktop__link-text">{{ gchild.value.text }}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
</a>
{% if gchild.value.description %}
<span class="sub-nav-desktop__description">{{ gchild.value.description }}</span>
Expand All @@ -15,7 +15,7 @@
{% if child.value.section_link %}
<li class="sub-nav-desktop__item" {% if forloop.last %}data-last-menu-item-desktop{% endif %}>
<a href="{{ child.value.section_link.url }}" class="sub-nav-desktop__link sub-nav-desktop__link--no-description">
<span>{% firstof child.value.section_link_text child.value.section_link %}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
<span class="sub-nav-desktop__link-text">{% firstof child.value.section_link_text child.value.section_link %}</span><span class="link-columns__tail">&nbsp;{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-desktop__arrow" %}</span>
</a>
</li>
{% endif %}
Expand Down
15 changes: 7 additions & 8 deletions ...ject_styleguide/templates/patterns/navigation/components/includes/subnav-menu-mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,29 @@
<ul class="sub-nav-mobile__list">
<li class="sub-nav-mobile__item sub-nav-mobile__item--back">
<button data-subnav-back class="sub-nav-mobile__link sub-nav-mobile__link--back">
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon-back" %}
{% include "patterns/atoms/icons/icon.html" with name="chevron" classname="sub-nav-mobile__icon-back" %}
Back to main menu
</button>
</li>
<li class="sub-nav-mobile__item sub-nav-mobile__item--parent">
<a class="sub-nav-mobile__link sub-nav-mobile__link--parent" href="{% if parent.page %}{% pageurl parent.page %}{% elif parent.external_link %}{{ parent.external_link }}{% endif %}">
{{ parent.text }}
</a>
<span class="sub-nav-mobile__link sub-nav-mobile__link--parent" href="{% if parent.page %}{% pageurl parent.page %}{% elif parent.external_link %}{{ parent.external_link }}{% endif %}">
{{ block.value.section_heading }}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
</span>
</li>
{% for child in links %}
{% if child.block_type == "link" %}
<li class="sub-nav-mobile__item">
<a href="{{ child.value.url }}" class="sub-nav-mobile__link sub-nav-mobile__link--no-children">
{{ child.value.text }}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon" %}
</a>
{% if child.value.description %}
<span class="sub-nav-mobile__description">{{ child.value.description }}</span>
{% endif %}
</li>
{% elif child.block_type == "menu" %}
<li class="sub-nav-mobile__item sub-nav-mobile__item--has-children">
<button class="sub-nav-mobile__link sub-nav-mobile__link--has-children" data-open-subnav aria-haspopup="true" aria-expanded="false">
{{ child.value.section_heading }}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="sub-nav-mobile__icon-mobile" %}
{% include "patterns/atoms/icons/icon.html" with name="chevron" classname="sub-nav-mobile__icon-front" %}
</button>
{% if child.value.child_links %}
{% include "patterns/navigation/components/includes/subnav-child-menu-mobile.html" with pages=child.value.child_links parent=child %}
Expand Down
18 changes: 8 additions & 10 deletions tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav-mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,20 @@
{% for block in page.navigation_set.navigation %}
{% if block.block_type == "link" %}
<li class="secondary-nav-mobile__item">
<a href="{{ block.value.url }}" class="secondary-nav-mobile__link">
<a href="{{ block.value.url }}" class="secondary-nav-mobile__link secondary-nav-mobile__link--no-children">
{{ block.value.text }}
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="secondary-nav-mobile__icon" %}
</a>
</li>
{% elif block.block_type == "menu" %}
<li class="secondary-nav-mobile__item secondary-nav-mobile__item--has-children" data-has-subnav>
<button
class="secondary-nav-mobile__link secondary-nav-mobile__link--has-children"
data-open-subnav
aria-haspopup="true"
aria-expanded="false">
{% if forloop.last %}data-last-menu-item-mobile{% endif %}
<span>{{ block.value.section_heading }}</span>
<div class="secondary-nav-mobile__icon-wrapper">
{% include "patterns/atoms/icons/icon.html" with name="arrow" classname="primary-nav-mobile__icon-mobile" only %}
</div>
class="secondary-nav-mobile__link secondary-nav-mobile__link--has-children"
data-open-subnav
aria-haspopup="true"
aria-expanded="false">
{{ block.value.section_heading }}
{% include "patterns/atoms/icons/icon.html" with name="chevron" classname="secondary-nav-mobile__icon-front" only %}
</button>
{% include "patterns/navigation/components/includes/subnav-menu-mobile.html" with links=block.value.child_links number=block.value.child_links|length %}
</li>
Expand Down
4 changes: 2 additions & 2 deletions tbx/project_styleguide/templates/patterns/navigation/components/secondary-nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% if block.block_type == "link" %}
<li class="secondary-nav-desktop__item">
<a href="{{ block.value.url }}" class="secondary-nav-desktop__link">
<span class="secondary-nav-desktop__text">{{ block.value.text }}</span>
{{ block.value.text }}
</a>
</li>
{% elif block.block_type == "menu" %}
Expand All @@ -16,7 +16,7 @@
data-open-subnav
aria-haspopup="true"
aria-expanded="false">
<span class="secondary-nav-desktop__text">{{ block.value.section_heading }}</span>
{{ block.value.section_heading }}
<div class="secondary-nav-desktop__icon-wrapper">
{% include "patterns/atoms/icons/icon.html" with name="chevron" classname="secondary-nav-desktop__icon-closed" only %}
{% include "patterns/atoms/icons/icon.html" with name="arrow-short" classname="secondary-nav-desktop__icon-open" only %}
Expand Down
9 changes: 6 additions & 3 deletions tbx/project_styleguide/templates/patterns/organisms/header/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,13 +47,16 @@
<div class="header__bottom grid__header-nav">
<div class="header__logo">
{% include "patterns/atoms/icons/icon.html" with name="logo" classname="logo" %}
<span class="logo__label">{% if page.final_division and page.final_division.label %} | {{ page.final_division.label }}{% endif %}</span>
<span class="logo__label">
{% if page.label %}{{ page.label }}{% endif %}
{% if page.final_division and page.final_division.label %}{{ page.final_division.label }}{% endif %}
</span>
</div>

{# Secondary desktop navigation #}
{# Secondary desktop navigation #}
{% include "patterns/navigation/components/secondary-nav.html" %}

{# Secondary mobile menu toggle #}
{# Secondary mobile menu toggle #}
<div class="header__secondary-menu-toggle">
<span class="sr-only">Menu</span>
<button class="button-menu-toggle" data-mobile-menu-toggle aria-haspopup="true" aria-expanded="false" aria-label="Mobile menu toggle">
Expand Down
15 changes: 14 additions & 1 deletion tbx/static_src/sass/components/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,20 @@
}

&__bottom {
padding: $spacer-small-plus 0 $spacer-mini-plus;
display: flex;
justify-content: space-between;
align-items: center;
padding: $spacer-small 0;

@include media-query(menu) {
padding: $spacer-small-plus 0 $spacer-mini-plus;
}
}

&__logo {
display: flex;
align-items: baseline;
gap: 7px;
}

&__primary-menu-toggle {
Expand Down
18 changes: 16 additions & 2 deletions tbx/static_src/sass/components/_logo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
@use 'config' as *;

.logo {
width: 168px;
height: 28px;
width: 108px;
height: 20px;
color: var(--color--heading);

@include media-query(menu) {
width: 158px;
height: 28px;
}

@include high-contrast-light-mode() {
color: var(--color--decoration);
}

&__label {
@include font-size(size-four);
color: var(--color--theme-primary);

@include media-query(menu) {
@include font-size(size-three);
}
}
}
20 changes: 9 additions & 11 deletions tbx/static_src/sass/components/navigation/_secondary-nav-desktop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ Styles for the secondary navigation at desktop (top level)
// There are separate nav elements for desktop and mobile
.secondary-nav-desktop {
$root: &;
margin-left: auto;


// at desktop the top level of the menu is always visible in the header
display: none;

Expand All @@ -20,8 +19,6 @@ Styles for the secondary navigation at desktop (top level)
// top level menu unordered list
&__list {
display: flex;
flex-direction: row;
justify-content: flex-end;
gap: 3vw;
overflow: visible;

Expand All @@ -38,17 +35,18 @@ Styles for the secondary navigation at desktop (top level)

// top level menu links
&__link {
@include link-styles(
$color: var(--color--link),
$interaction-color: var(--color--link),
$offset: 5px
);
font-weight: $weight--semibold;

&:focus {
@include focus-style();
}
}

// top level menu link text
&__text {
@include link-styles($interaction-color: var(--color--heading), $offset: 5px);
font-weight: $weight--semibold;
}

// desktop arrows
// wrapper ensures the text doesn't move when the icon changes
&__icon-wrapper {
Expand Down Expand Up @@ -97,4 +95,4 @@ Styles for the secondary navigation at desktop (top level)
display: block;
}
}
}
}
66 changes: 30 additions & 36 deletions tbx/static_src/sass/components/navigation/_secondary-nav-mobile.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@
Styles for the top level of the navigation at mobile
*/

// the nav element surrounding the whole navigation
// The nav element surrounding the whole navigation
// There are separate nav elements for desktop and mobile
.secondary-nav-mobile {
$root: &;

// At mobile the navigation is only revealed when the menu icon is clicked
// at mobile the navigation is only revealed when the menu icon is clicked
@include z-index(base);
@include nav-fixed-position($header-height: 12px, $full-height: false);
@include nav-fixed-position($header-height: 134px);
display: block;
background-color: var(--color--nav-background);
background-color: var(--color--background);

@include media-query(menu) {
display: none;
Expand All @@ -25,67 +25,61 @@ Styles for the top level of the navigation at mobile
opacity: 1;
}

// Top level menu unordered list
// top level menu unordered list
&__list {
display: flex;
flex-direction: column;
}

// top level menu list items
&__item {
position: relative;
width: 100%;
&--has-children {
background-color: var(--color--dark-background);
}
}

// top level menu links
&__link {
@include font-size('size-five');
display: flex;
padding: $spacer-small;
border-bottom: 1px solid var(--color--nav-border);
justify-content: space-between;
align-items: center;
width: 100%;
padding: $spacer-small;
border-bottom: 2px solid var(--color--border);

&:focus {
@include focus-style();
}

#{$root}__item:last-child & {
border-bottom: none;
}

// styles for links with children
&--has-children {
color: var(--color--heading);
justify-content: space-between;
color: var(--color--link);
}

// styles for links without children
&--no-children {
@include link-styles(
$color: var(--color--heading),
$interaction-color: var(--color--heading),
$underline-color: var(--color--heading)
$color: var(--color--link),
$interaction-color: var(--color--link),
$underline-color: var(--color--link)
);
}
}

// mobile arrow - appears if there are children
&__icon-mobile {
&__icon {
@include arrow-link-icon-styles(
$width: 18px,
$interaction-color: var(--color--theme-primary)
);
color: var(--color--theme-primary);
margin-left: 10px;
}

// indicates the mobile menu has another level
&__icon-front {
transform: rotate(-90deg);
width: 18px;
height: 21px;
flex-grow: 0;
flex-shrink: 0;
transition: transform $transition-quick;

#{$root}__link:hover & {
transform: translateX(10px);
}

@include media-query(menu) {
display: none;
}

@include reduced-motion() {
transition: none;
}
}
}
}
Loading

0 comments on commit 5ac1d25

Please sign in to comment.