Skip to content

Commit df3c5ee

Browse files
smnandresmnandre
committed
[Site] Mobile menu
1 parent 554ebba commit df3c5ee

File tree

6 files changed

+195
-92
lines changed

6 files changed

+195
-92
lines changed

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

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

‎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: 72 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,82 @@
11
.AppHeader {
22
position: absolute;
3-
top: 1rem; // TODO responsive
4-
left: 0;
5-
right: 0;
3+
inset: 0 0 auto;
64
z-index: 2;
75

6+
padding: 1.5rem 0;
7+
88
@media (min-width: 576px) {
9-
top: 2rem;
10-
}
11-
@media (min-width: 768px) {
12-
top: 3rem;
9+
padding-top: 2rem;
1310
}
14-
}
11+
//@media (min-width: 768px) {
12+
// padding-top: 3rem;
13+
//}
1514

16-
.AppHeader {
15+
--color-background-rgb: 255 255 255;
1716
--text-color: var(--bs-body-color);
17+
1818
color: var(--text-color);
1919
}
2020
.AppHeader--white {
2121
--text-color: #fff;
2222
}
2323

24+
[data-bs-theme="dark"] {
25+
.AppHeader {
26+
--color-background-rgb: 0 0 0;
27+
}
28+
//.AppHeader--white {
29+
// --text-color: #fff;
30+
//}
31+
}
32+
33+
34+
body.locked {
35+
overflow-y: hidden;
36+
}
37+
38+
39+
.AppHeader::before {
40+
position: fixed;
41+
inset: 0;
42+
content: " ";
43+
backdrop-filter: blur(5px);
44+
background: rgb(var(--color-background-rgb) / 0.85);
45+
46+
// #0a0b0dde
47+
48+
opacity: 0;
49+
transform: scaleX(0);
50+
}
51+
@keyframes fade {
52+
from {
53+
opacity: 0;
54+
}
55+
to {
56+
opacity: 1;
57+
}
58+
}
59+
.AppHeader.open {
60+
background: var(--bs-body-bg-rgb);
61+
}
62+
.AppHeader.open::before {
63+
transform: scaleX(1);
64+
inset: 0;
65+
animation: fade 200ms;
66+
opacity: 1;
67+
}
68+
2469
.AppHeader_logo {
2570
--height: 2rem;
2671
height: var(--height);
2772
width: calc(161 / 30 * var(--height));
2873
background: url(../images/sf-ux.svg);
2974
background-size: 100%;
30-
75+
display: block;
3176
transition: filter 250ms ease-in;
3277

78+
flex-shrink: 0;
79+
3380
span {
3481
display: none;
3582
}
@@ -40,10 +87,21 @@
4087
}
4188
}
4289

43-
.AppHeader_toggler:focus {
44-
box-shadow: none;
45-
}
46-
4790
.AppHeader_toggler {
4891
color: currentColor;
92+
border: none;
93+
background: none;
94+
box-shadow: none !important;
95+
}
96+
.AppHeader_toggler span {
97+
display: none;
98+
}
99+
.AppHeader_toggler .Icon {
100+
font-size: 1.5rem !important;
101+
}
102+
103+
@media (min-width: 576px) {
104+
.AppHeader_toggler {
105+
display: none !important;
106+
}
49107
}

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

Lines changed: 71 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,94 @@
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: 575px) {
10+
flex-wrap: wrap;
11+
gap: 1rem;
12+
}
13+
}
14+
15+
16+
.AppNav_actions {
17+
flex-shrink: 0;
18+
flex-wrap: nowrap;
19+
display: flex;
20+
flex-direction: row-reverse;
21+
gap: 1rem;
22+
align-items: center;
23+
24+
@media (min-width: 575px) {
25+
order: 2;
26+
}
27+
}
28+
29+
30+
@media (max-width: 800px) {
31+
.AppHeader .AppNav_menu {
32+
transform: translateY(-20%);
33+
opacity: 0;
34+
transition: transform 250ms ease-out;
35+
z-index: -1;
36+
}
37+
.AppHeader.open .AppNav_menu {
38+
transform: translateY(0);
39+
opacity: 1;
40+
z-index: 1;
41+
}
342
}
443

44+
545
.AppNav_menu {
46+
647
gap: 2rem;
748
justify-content: flex-end;
8-
line-height: 2rem;
49+
//line-height: 2rem;
50+
align-items: center;
51+
display: flex;
52+
flex-direction: row;
953

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-
}
54+
@media (min-width: 800px) {
55+
margin-inline-start: auto;
56+
align-items: center;
57+
}
58+
59+
@media (max-width: 800px) {
60+
61+
width: 100%;
62+
flex-direction: column;
63+
align-items: normal;
64+
65+
padding: 1rem;
66+
gap: 1rem;
67+
}
68+
}
69+
70+
@media (max-width: 800px) {
71+
.AppNav_menu a {
72+
font-size: 1.5rem;
73+
padding: .5rem;
74+
opacity: 1;
1875
}
1976
}
2077

2178
.AppNav_item {
79+
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;
32-
line-height: 2rem;
90+
text-align: center;
91+
3392
&:hover {
3493
opacity: 1;
3594
}

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

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,32 @@
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 class="AppHeader_toggler AppNav_item AppNav_item--icon" type="button" data-action="ux-header#toggleMenu">
12+
<twig:Icon name="menu"/>
13+
<span aria-hidden="false">Menu</span>
14+
</button>
15+
16+
<twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode" />
17+
<a class="AppNav_item AppNav_item--icon" href="https://github.com/symfony/ux" aria-label="Symfony UX on GitHub">
18+
<twig:Icon name="github"/>
19+
</a>
1720
</div>
18-
</div>
19-
</nav>
21+
22+
<div class="AppNav_menu">
23+
<a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
24+
<a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
25+
<a href="{{ path('app_packages') }}" class="AppNav_item">Packages</a>
26+
<a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
27+
</div>
28+
29+
</nav>
30+
31+
</div>
2032
</header>

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

Lines changed: 0 additions & 46 deletions
This file was deleted.

0 commit comments

Comments
 (0)