Skip to content

Commit ad37000

Browse files
kbondkbond
committed
minor #1592 [Site] Fix mobile menu (smnandre)
This PR was merged into the 2.x branch. Discussion ---------- [Site] Fix mobile menu Improve mobile navigation & fix bugs | Foo | Foo | Bar | Bar | | --- | --- | --- | --- | | ![Capture d’écran 2024-03-08 à 19 34 26](https://github.com/symfony/ux/assets/1359581/fb327e36-5059-42f5-9b9a-9c88106c476b) | ![Capture d’écran 2024-03-08 à 19 34 40](https://github.com/symfony/ux/assets/1359581/569ebdb2-1fa8-40c4-b123-c6adfd13445c) | ![Capture d’écran 2024-03-08 à 19 34 35](https://github.com/symfony/ux/assets/1359581/e4818786-3d9e-4cbc-a2e4-75a010a8aca2) | ![Capture d’écran 2024-03-08 à 19 34 30](https://github.com/symfony/ux/assets/1359581/14ad91bd-126c-4b26-8b13-c45e7aa2a226) | Commits ------- 8df988b [Site] Mobile menu
2 parents 5f2fb7f + 8df988b commit ad37000

File tree

6 files changed

+206
-111
lines changed

6 files changed

+206
-111
lines changed

‎ux.symfony.com/assets/controllers/ux-header-controller.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Controller } from '@hotwired/stimulus';
2+
3+
export default class extends Controller {
4+
static targets = ['menuButton'];
5+
6+
initialize() {
7+
this.open = false;
8+
}
9+
10+
connect() {
11+
document.body.classList.remove('locked');
12+
}
13+
14+
disconnect() {
15+
document.body.classList.remove('locked');
16+
}
17+
18+
menuButtonDisconnected() {
19+
document.body.classList.remove('locked');
20+
}
21+
22+
toggleMenu() {
23+
this.open = !this.open;
24+
this.element.classList.toggle('open', this.open);
25+
document.body.classList.toggle('locked', this.open);
26+
}
27+
}

‎ux.symfony.com/assets/styles/components/_PackageBox.scss

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
}
2525
}
2626

27+
@media screen and (max-width: 800px) {
28+
.PackageBox {
29+
--space-large: 1rem;
30+
}
31+
}
32+
2733
.PackageBox::before {
2834
content: "";
2935
position: absolute;
@@ -65,7 +71,7 @@
6571
background-color: var(--color);
6672
width: var(--logo-size);
6773
height: var(--logo-size);
68-
border-radius: var(--border-radius-large);
74+
border-radius: 14%;
6975
display: flex;
7076
align-items: center;
7177
justify-content: center;
@@ -115,9 +121,8 @@
115121

116122
font-family: var(--font-family-title);
117123
font-weight: 700;
118-
font-size: 28px !important;
119-
line-height: 32px !important;
120-
letter-spacing: -1px;
124+
font-size: 1.5rem;
125+
line-height: 1.5;
121126
color: var(--bs-body-color);
122127
text-decoration: none;
123128
}

‎ux.symfony.com/assets/styles/sections/_header.scss

Lines changed: 62 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,57 @@
1+
:root {
2+
--header-breakpoint: 860px;
3+
}
4+
15
.AppHeader {
6+
--color-background-rgb: 255 255 255;
7+
--text-color: var(--bs-body-color);
28
position: absolute;
3-
top: 1rem; // TODO responsive
4-
left: 0;
5-
right: 0;
9+
inset: 0 0 auto;
610
z-index: 2;
11+
padding: 1.5rem 0;
12+
color: var(--text-color);
13+
@media (min-width: 860px) {
14+
padding-top: 2rem;
15+
}
16+
}
17+
[data-bs-theme="dark"] {
18+
.AppHeader {
19+
--color-background-rgb: 0 0 0;
20+
}
21+
}
22+
.AppHeader--white {
23+
--text-color: #fff;
24+
}
725

8-
@media (min-width: 576px) {
9-
top: 2rem;
26+
.AppHeader::before {
27+
position: fixed;
28+
inset: 0;
29+
content: " ";
30+
backdrop-filter: blur(5px);
31+
background: rgb(var(--color-background-rgb) / 0.85);
32+
opacity: 0;
33+
transform: scaleX(0);
34+
}
35+
@keyframes header-fade {
36+
from {
37+
opacity: 0;
1038
}
11-
@media (min-width: 768px) {
12-
top: 3rem;
39+
to {
40+
opacity: 1;
1341
}
1442
}
1543

16-
.AppHeader {
17-
--text-color: var(--bs-body-color);
18-
color: var(--text-color);
44+
body.locked {
45+
overflow-y: hidden;
1946
}
20-
.AppHeader--white {
21-
--text-color: #fff;
47+
.AppHeader.open {
48+
background: var(--bs-body-bg-rgb);
49+
}
50+
.AppHeader.open::before {
51+
transform: scaleX(1);
52+
inset: 0;
53+
animation: header-fade 200ms;
54+
opacity: 1;
2255
}
2356

2457
.AppHeader_logo {
@@ -27,23 +60,33 @@
2760
width: calc(161 / 30 * var(--height));
2861
background: url(../images/sf-ux.svg);
2962
background-size: 100%;
30-
63+
display: block;
3164
transition: filter 250ms ease-in;
32-
65+
flex-shrink: 0;
3366
span {
3467
display: none;
3568
}
36-
3769
.AppHeader--white &,
3870
[data-bs-theme="dark"] & {
3971
filter: invert(1);
4072
}
4173
}
4274

43-
.AppHeader_toggler:focus {
44-
box-shadow: none;
45-
}
46-
4775
.AppHeader_toggler {
4876
color: currentColor;
77+
border: none;
78+
background: none;
79+
box-shadow: none !important;
80+
}
81+
.AppHeader_toggler span {
82+
display: none;
83+
}
84+
.AppHeader_toggler .Icon {
85+
font-size: 1.5rem !important;
86+
}
87+
88+
@media (min-width: 860px) {
89+
.AppHeader_toggler {
90+
display: none !important;
91+
}
4992
}

‎ux.symfony.com/assets/styles/sections/_nav.scss

Lines changed: 73 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,95 @@
11
.AppNav {
22
color: inherit;
3+
position: relative;
4+
display: flex;
5+
flex-direction: row;
6+
gap: 1.5rem;
7+
justify-content: space-between;
8+
9+
@media (max-width: 859px) {
10+
flex-wrap: wrap;
11+
}
12+
position: relative;
13+
display: flex;
14+
flex-direction: row;
15+
gap: 1.5rem;
16+
justify-content: space-between;
17+
@media (max-width: 859px) {
18+
flex-wrap: wrap;
19+
}
20+
}
21+
22+
.AppNav_actions {
23+
flex-shrink: 0;
24+
flex-wrap: nowrap;
25+
display: flex;
26+
flex-direction: row-reverse;
27+
gap: 1.5rem;
28+
align-items: center;
29+
30+
@media (min-width: 860px) {
31+
order: 2;
32+
}
333
}
434

535
.AppNav_menu {
6-
gap: 2rem;
736
justify-content: flex-end;
8-
line-height: 2rem;
37+
display: flex;
38+
flex-direction: row;
39+
gap: 1.5rem;
40+
41+
@media (min-width: 860px) {
42+
margin-inline-start: auto;
43+
align-items: center;
44+
gap: 2rem;
45+
}
46+
}
47+
48+
@media (max-width: 859px) {
49+
.AppNav_menu {
50+
transform: translateY(-20%);
51+
opacity: 0;
52+
z-index: -1;
53+
transition: transform 250ms ease-out;
54+
width: 100%;
55+
flex-direction: column;
56+
padding: 1rem;
57+
gap: 1rem;
58+
}
59+
.AppHeader.open .AppNav_menu {
60+
transform: translateY(0);
61+
opacity: 1;
62+
z-index: 1;
63+
}
64+
.AppNav_menu a {
65+
font-size: 1.5rem;
66+
padding: .5rem;
67+
opacity: 1;
68+
}
69+
}
970

10-
@media (max-width: 575px) {
11-
display: flex;
12-
flex-direction: row;
13-
height: 3rem;
14-
place-content: center;
15-
.Icon--chevron-down {
16-
display: none;
17-
}
71+
@media (max-width: 800px) {
72+
.AppNav_menu a {
73+
font-size: 1.5rem;
74+
padding: .5rem;
75+
opacity: 1;
1876
}
1977
}
2078

2179
.AppNav_item {
2280
color: inherit;
23-
font-family: "Ubuntu";
81+
font-family: var(--font-family-title);
2482
font-size: 1rem;
25-
font-weight: 700;
83+
font-weight: 500;
2684
letter-spacing: 0;
2785
opacity: .85;
2886
transition: opacity 250ms;
2987
padding: 0;
3088
border: none;
3189
background: none;
90+
text-align: center;
3291
line-height: 2rem;
3392
position: relative;
34-
3593
&:hover {
3694
opacity: 1;
3795
}
@@ -44,16 +102,11 @@
44102
display: grid;
45103
place-content: center;
46104

47-
> .Icon {
105+
.Icon {
48106
font-size: 1.25rem;
49107
}
50108
}
51109

52-
.nav-component-img {
53-
height: 22px;
54-
width: 22px;
55-
border-radius: 4px;
56-
}
57110

58111
.AppNav_badge {
59112
position: absolute;
@@ -69,3 +122,4 @@
69122
height: 1rem;
70123
line-height: normal;
71124
}
125+

‎ux.symfony.com/templates/_header.html.twig

Lines changed: 35 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,39 @@
1-
<header class="AppHeader {{ theme is defined ? ('AppHeader--' ~ theme) }}">
2-
<nav class="navbar navbar-expand-sm AppNav--white">
3-
<div class="container-xxl px-4 px-md-5">
4-
<a href="{{ path('app_homepage') }}" class="AppHeader_logo" aria-label="Homepage">
1+
<header class="AppHeader {{ theme is defined ? ('AppHeader--' ~ theme) }}" data-controller="ux-header">
2+
<div class="container-xxl px-4 px-md-5">
3+
4+
<nav class="AppNav AppNav--white">
5+
6+
<a class="AppHeader_logo" href="{{ path('app_homepage') }}" aria-label="Homepage">
57
<span aria-hidden="false">Symfony UX</span>
68
</a>
7-
<button class="AppHeader_toggler navbar-toggler collapsed" type="button"
8-
data-bs-toggle="collapse" data-bs-target="#AppNav"
9-
aria-controls="AppNav" aria-expanded="false" aria-label="Toggle navigation"
10-
>
11-
<twig:Icon name="menu"/>
12-
</button>
13-
<div class="AppHeader_nav AppNav_menu navbar-collapse collapse" id="AppNav">
14-
{% block nav %}
15-
{{ include('_nav.html.twig') }}
16-
{% endblock %}
9+
10+
<div class="AppNav_actions">
11+
<button
12+
class="AppHeader_toggler AppNav_item AppNav_item--icon"
13+
aria-label="Toggle Menu"
14+
data-action="ux-header#toggleMenu"
15+
>
16+
<twig:Icon name="menu"/>
17+
</button>
18+
19+
<twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
20+
<a
21+
class="AppNav_item AppNav_item--icon"
22+
aria-label="Symfony UX on GitHub"
23+
href="https://github.com/symfony/ux"
24+
>
25+
<twig:Icon name="github"/>
26+
</a>
1727
</div>
18-
</div>
19-
</nav>
28+
29+
<div class="AppNav_menu">
30+
<a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
31+
<a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
32+
<a href="{{ path('app_packages') }}" class="AppNav_item">Packages</a>
33+
<a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
34+
</div>
35+
36+
</nav>
37+
38+
</div>
2039
</header>

0 commit comments

Comments
 (0)