Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/refactor navigation patterns #86

Merged
merged 11 commits into from
Mar 7, 2025
+1,457 −800
Merged

Feature/refactor navigation patterns #86

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fb76f8f
!feat: refactor navigation patterns
NicolaSaunders Feb 27, 2025
9014ad0
Add examples of each type of double level nav pattern
NicolaSaunders Feb 28, 2025
5211057
Remove unnecessary variable
NicolaSaunders Feb 28, 2025
59acd69
Add new nav pattern: combine links and buttons
NicolaSaunders Feb 28, 2025
96b6510
Remove Stylelint ignore comment
NicolaSaunders Feb 28, 2025
58318ba
Remove "exists" JS helper function
NicolaSaunders Feb 28, 2025
ea4f7ef
Update docs for refactored navigation patterns
NicolaSaunders Feb 28, 2025
1a5b5de
Ignore Sass used for overriding third-party packages
NicolaSaunders Feb 28, 2025
e6cd646
Simplify SVG sub menu icon, refactor Sass/JS
NicolaSaunders Mar 3, 2025
9621e18
Update docs
NicolaSaunders Mar 3, 2025
3b17366
feat!: refactor navigation patterns
NicolaSaunders Mar 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Simplify SVG sub menu icon, refactor Sass/JS
@NicolaSaunders
NicolaSaunders committed Mar 3, 2025
commit e6cd6468175a29dac760ab4e11c016d61ef8bbf0
3 changes: 1 addition & 2 deletions assets-src/js/main/nav-double-level.js
View file
Original file line number Diff line number Diff line change
@@ -31,8 +31,7 @@ const navDoubleLevel = function(menu, options) {
'<path class="close" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>' +
'</svg>',
submenuIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" class="icon icon--24" focusable="false" aria-hidden="true" fill="currentColor">' +
'<path class="control-vertical" d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />' +
'<path class="control-horizontal" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>' +
'<path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />' +
'</svg>',
submenuDirection: 'vertical',
submenuIntro: false,
4 changes: 0 additions & 4 deletions assets-src/styles/sass/65-advanced-navigation/_nav-double-both.scss
View file
Original file line number Diff line number Diff line change
@@ -14,10 +14,6 @@
padding-inline: rem(8);
}

[data-trigger="sub-nav"] .control-horizontal {
display: none;
}

[data-trigger="sub-nav"][aria-expanded="true"] svg {
transform: scaleY(-1);
}
32 changes: 12 additions & 20 deletions assets-src/styles/sass/65-advanced-navigation/_nav-double-with-intro.scss
View file
Original file line number Diff line number Diff line change
@@ -15,24 +15,20 @@
[data-trigger="sub-nav"] {
inline-size: 100%;
justify-content: space-between;
}

[data-trigger="sub-nav"] .control-horizontal {
@include mq($bp-tab-portrait) {
display: none;
}
}

[data-trigger="sub-nav"] .control-vertical {
display: none;
svg {
transform: rotate(-90deg);

@include mq($bp-tab-portrait) {
display: block;
@include mq($bp-tab-portrait) {
transform: none;
}
}
}

[data-trigger="sub-nav"][aria-expanded="true"] svg {
transform: scaleY(-1);
&[aria-expanded="true"] svg {
@include mq($bp-tab-portrait) {
transform: scaleY(-1);
}
}
}

> ul > li {
@@ -74,13 +70,9 @@
@include mq($bp-tab-portrait) {
display: none;
}
}

[data-button="mobile-back"] svg {
transform: scaleX(-1);

.control-vertical {
display: none;
svg {
transform: rotate(90deg);
}
}

34 changes: 10 additions & 24 deletions assets-src/styles/sass/65-advanced-navigation/_nav-double.scss
View file
Original file line number Diff line number Diff line change
@@ -26,10 +26,6 @@
justify-content: space-between;
}

[data-trigger="sub-nav"] .control-horizontal {
display: none;
}

[data-trigger="sub-nav"][aria-expanded="true"] svg {
transform: scaleY(-1);
}
@@ -47,24 +43,18 @@
inline-size: 100%;
justify-content: space-between;

&[aria-expanded="true"] svg {
svg {
transform: rotate(-90deg);

@include mq($bp-tab-portrait) {
transform: scaleY(-1);
transform: none;
}
}
}

[data-trigger="sub-nav"] .control-horizontal {
@include mq($bp-tab-portrait) {
display: none;
}
}

[data-trigger="sub-nav"] .control-vertical {
display: none;

@include mq($bp-tab-portrait) {
display: block;
&[aria-expanded="true"] svg {
@include mq($bp-tab-portrait) {
transform: scaleY(-1);
}
}
}

@@ -90,13 +80,9 @@
@include mq($bp-tab-portrait) {
display: none;
}
}

[data-button="mobile-back"] svg {
transform: scaleX(-1);

.control-vertical {
display: none;
svg {
transform: rotate(90deg);
}
}
}
2 changes: 1 addition & 1 deletion web/dist/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -374,7 +374,7 @@ const navDoubleLevel = function navDoubleLevel(menu, options) {
cloneTopLevelLink: true,
replaceTopLevelLinks: true,
mobileIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" class="icon icon--24" focusable="false" aria-hidden="true" fill="currentColor">' + '<path class="open" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>' + '<path class="close" d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>' + '</svg>',
submenuIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" class="icon icon--24" focusable="false" aria-hidden="true" fill="currentColor">' + '<path class="control-vertical" d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />' + '<path class="control-horizontal" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>' + '</svg>',
submenuIcon: '<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" class="icon icon--24" focusable="false" aria-hidden="true" fill="currentColor">' + '<path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" />' + '</svg>',
submenuDirection: 'vertical',
submenuIntro: false
};
2 changes: 1 addition & 1 deletion web/dist/js/main.min.js
View file

Large diffs are not rendered by default.

50 changes: 15 additions & 35 deletions web/dist/styles/advanced.css
View file
Original file line number Diff line number Diff line change
@@ -440,9 +440,6 @@ amplify-table-sort col.js-sorted {
inline-size: 100%;
justify-content: space-between;
}
#js-click-nav-vertical [data-trigger=sub-nav] .control-horizontal {
display: none;
}
#js-click-nav-vertical [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
@@ -457,22 +454,17 @@ amplify-table-sort col.js-sorted {
inline-size: 100%;
justify-content: space-between;
}
@media screen and (min-width: 48em) {
#js-click-nav-horizontal [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
#js-click-nav-horizontal [data-trigger=sub-nav] svg {
transform: rotate(-90deg);
}
@media screen and (min-width: 48em) {
#js-click-nav-horizontal [data-trigger=sub-nav] .control-horizontal {
display: none;
#js-click-nav-horizontal [data-trigger=sub-nav] svg {
transform: none;
}
}
#js-click-nav-horizontal [data-trigger=sub-nav] .control-vertical {
display: none;
}
@media screen and (min-width: 48em) {
#js-click-nav-horizontal [data-trigger=sub-nav] .control-vertical {
display: block;
#js-click-nav-horizontal [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
}
#js-click-nav-horizontal [data-nav=submenu] {
@@ -500,10 +492,7 @@ amplify-table-sort col.js-sorted {
}
}
#js-click-nav-horizontal [data-button=mobile-back] svg {
transform: scaleX(-1);
}
#js-click-nav-horizontal [data-button=mobile-back] svg .control-vertical {
display: none;
transform: rotate(90deg);
}

/* stylelint-enable no-descending-specificity */
@@ -519,9 +508,6 @@ amplify-table-sort col.js-sorted {
#js-click-nav-both [data-trigger=sub-nav] {
padding-inline: 0.5rem;
}
#js-click-nav-both [data-trigger=sub-nav] .control-horizontal {
display: none;
}
#js-click-nav-both [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
@@ -563,22 +549,19 @@ amplify-table-sort col.js-sorted {
inline-size: 100%;
justify-content: space-between;
}
#js-click-nav-intro [data-trigger=sub-nav] svg {
transform: rotate(-90deg);
}
@media screen and (min-width: 48em) {
#js-click-nav-intro [data-trigger=sub-nav] .control-horizontal {
display: none;
#js-click-nav-intro [data-trigger=sub-nav] svg {
transform: none;
}
}
#js-click-nav-intro [data-trigger=sub-nav] .control-vertical {
display: none;
}
@media screen and (min-width: 48em) {
#js-click-nav-intro [data-trigger=sub-nav] .control-vertical {
display: block;
#js-click-nav-intro [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
}
#js-click-nav-intro [data-trigger=sub-nav][aria-expanded=true] svg {
transform: scaleY(-1);
}
@media screen and (min-width: 48em) {
#js-click-nav-intro > ul > li {
position: static;
@@ -619,10 +602,7 @@ amplify-table-sort col.js-sorted {
}
}
#js-click-nav-intro [data-button=mobile-back] svg {
transform: scaleX(-1);
}
#js-click-nav-intro [data-button=mobile-back] svg .control-vertical {
display: none;
transform: rotate(90deg);
}
@media screen and (min-width: 48em) {
#js-click-nav-intro [data-nav=submenu] .nav__intro {
2 changes: 1 addition & 1 deletion web/dist/styles/advanced.min.css
View file

Large diffs are not rendered by default.