Skip to content

Commit 66215bd

Browse files
alvaromateoalvaromateo
authored
WD-26280 - Navigation stops working when resizing window (#5348)
* WD-26280 - Move styles for global-nav to a separate file * WD-26280 - Update global-nav to fix resize bug
1 parent 9c89fee commit 66215bd

4 files changed

Lines changed: 103 additions & 100 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@babel/preset-react": "7.26.3",
3333
"@babel/preset-typescript": "7.26.0",
3434
"@canonical/cookie-policy": "3.6.5",
35-
"@canonical/global-nav": "3.7.2",
35+
"@canonical/global-nav": "3.7.3",
3636
"@canonical/react-components": "2.16.1",
3737
"@canonical/store-components": "0.54.2",
3838
"@dnd-kit/core": "6.3.1",

‎static/sass/_snapcraft_p-navigation.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@mixin snapcraft-p-navigation {
2+
@media (width < $breakpoint-navigation-threshold) {
3+
#navigation.p-navigation--sliding {
4+
@property --right {
5+
inherits: false;
6+
initial-value: 0%;
7+
syntax: "<percentage>";
8+
}
9+
10+
.p-navigation__nav {
11+
display: block;
12+
margin-top: 3.5rem;
13+
min-width: 100%;
14+
position: absolute;
15+
transform: translateX(var(--right));
16+
17+
// same function as for the global-nav dropdown
18+
transition: transform 0.333s cubic-bezier(0.215, 0.61, 0.355, 1);
19+
20+
// starts on the right outside of the screen
21+
--right: 110%;
22+
}
23+
24+
&.has-menu-open {
25+
overflow-x: hidden;
26+
}
27+
28+
&.has-menu-open .p-navigation__nav {
29+
--right: 0%;
30+
}
31+
32+
&.menu-closing .p-navigation__nav {
33+
--right: 110%;
34+
}
35+
36+
.p-navigation__items--section {
37+
margin: 0;
38+
padding: 0;
39+
}
40+
}
41+
}
42+
43+
@media (min-width: $breakpoint-navigation-threshold) {
44+
#navigation.p-navigation--sliding {
45+
&.has-menu-open {
46+
box-shadow: none;
47+
}
48+
49+
@property --up {
50+
inherits: false;
51+
initial-value: 0%;
52+
syntax: "<percentage>";
53+
}
54+
55+
.p-navigation__items {
56+
justify-content: space-between;
57+
58+
&--section {
59+
display: flex;
60+
margin: 0;
61+
padding: 0;
62+
}
63+
}
64+
65+
.p-navigation__item--dropdown-toggle {
66+
position: relative;
67+
}
68+
69+
.p-navigation__dropdown--container {
70+
// a bit extra % to be able to show the shadow of the box if present
71+
clip-path: rect(0 105% 105% 0);
72+
display: block;
73+
min-width: 100%;
74+
position: absolute;
75+
76+
> .p-navigation__dropdown {
77+
display: block;
78+
position: static;
79+
transform: translateY(calc(-1 * var(--up)));
80+
81+
// same function as for the global-nav dropdown
82+
transition: transform 0.333s cubic-bezier(0.215, 0.61, 0.355, 1);
83+
84+
&[aria-hidden="true"] {
85+
// extra 10% to not let the shadow show underneath the navbar
86+
--up: 110%;
87+
}
88+
89+
&[aria-hidden="false"] {
90+
--up: 0%;
91+
}
92+
}
93+
}
94+
}
95+
}
96+
}

‎static/sass/styles.scss‎

Lines changed: 2 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,8 @@ $color-social-icon-foreground: $color-light;
105105
@include snapcraft-embedded-card-modal;
106106
@import "snapcraft_p-file-input";
107107
@include snapcraft-p-file-input;
108+
@import "snapcraft_p-navigation";
109+
@include snapcraft-p-navigation;
108110
@import "patterns_pagination";
109111
@include snapcraft-p-pagination;
110112
@import "snapcraft_p-featured-snap";
@@ -506,101 +508,6 @@ html {
506508
position: relative;
507509
}
508510

509-
@media (width < $breakpoint-navigation-threshold) {
510-
#navigation.p-navigation--sliding {
511-
@property --right {
512-
inherits: false;
513-
initial-value: 0%;
514-
syntax: "<percentage>";
515-
}
516-
517-
.p-navigation__nav {
518-
display: block;
519-
margin-top: 3.5rem;
520-
min-width: 100%;
521-
position: absolute;
522-
transform: translateX(var(--right));
523-
524-
// same function as for the global-nav dropdown
525-
transition: transform 0.333s cubic-bezier(0.215, 0.61, 0.355, 1);
526-
527-
// starts on the right outside of the screen
528-
--right: 110%;
529-
}
530-
531-
&.has-menu-open {
532-
overflow-x: hidden;
533-
}
534-
535-
&.has-menu-open .p-navigation__nav {
536-
--right: 0%;
537-
}
538-
539-
&.menu-closing .p-navigation__nav {
540-
--right: 110%;
541-
}
542-
543-
.p-navigation__items--section {
544-
margin: 0;
545-
padding: 0;
546-
}
547-
}
548-
}
549-
550-
@media (min-width: $breakpoint-navigation-threshold) {
551-
#navigation.p-navigation--sliding {
552-
&.has-menu-open {
553-
box-shadow: none;
554-
}
555-
556-
@property --up {
557-
inherits: false;
558-
initial-value: 0%;
559-
syntax: "<percentage>";
560-
}
561-
562-
.p-navigation__items {
563-
justify-content: space-between;
564-
565-
&--section {
566-
display: flex;
567-
margin: 0;
568-
padding: 0;
569-
}
570-
}
571-
572-
.p-navigation__item--dropdown-toggle {
573-
position: relative;
574-
}
575-
576-
.p-navigation__dropdown--container {
577-
// a bit extra % to be able to show the shadow of the box if present
578-
clip-path: rect(0 105% 105% 0);
579-
display: block;
580-
min-width: 100%;
581-
position: absolute;
582-
583-
> .p-navigation__dropdown {
584-
display: block;
585-
position: static;
586-
transform: translateY(calc(-1 * var(--up)));
587-
588-
// same function as for the global-nav dropdown
589-
transition: transform 0.333s cubic-bezier(0.215, 0.61, 0.355, 1);
590-
591-
&[aria-hidden="true"] {
592-
// extra 10% to not let the shadow show underneath the navbar
593-
--up: 110%;
594-
}
595-
596-
&[aria-hidden="false"] {
597-
--up: 0%;
598-
}
599-
}
600-
}
601-
}
602-
}
603-
604511
.read-only-dark {
605512
color: $colors--theme--text-muted;
606513
}

‎yarn.lock‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1046,10 +1046,10 @@
10461046
resolved "https://registry.yarnpkg.com/@canonical/cookie-policy/-/cookie-policy-3.6.5.tgz#50d82df6da2970b6b5d78d066dd94fcc1317e591"
10471047
integrity sha512-CQJKSkuLXhSumkIIw4YPSjR7k9561hZ3EEdMPQTkAVTxXURhm3WzJm/uyrvcAuU/a//jzWa8ScltCaHFBdACew==
10481048

1049-
"@canonical/global-nav@3.7.2":
1050-
version "3.7.2"
1051-
resolved "https://registry.yarnpkg.com/@canonical/global-nav/-/global-nav-3.7.2.tgz#e89c2853f896da760764429ed9dcabac39f9d37b"
1052-
integrity sha512-l4HVBFJJ0/9qbLwpIE/HLt05TfHVF/uLXY+4EoxJ1ElkD38VunCWRFd8Wjp3WMC+mS8in8W3CG27emDlHy/Tig==
1049+
"@canonical/global-nav@3.7.3":
1050+
version "3.7.3"
1051+
resolved "https://registry.yarnpkg.com/@canonical/global-nav/-/global-nav-3.7.3.tgz#cac51536f54c88298571301e12504daa3408c1d3"
1052+
integrity sha512-1G4A2dgIHcqOCWfNJ5F9MWmXNSVGF39Nx53bIk2imiGXGALhDCOGFcnELx0q5uKP2aIy1pMd3D58qX93yX8tzg==
10531053
dependencies:
10541054
vanilla-framework "4.26.1"
10551055

0 commit comments

Comments
 (0)
⚡