faustjs/examples/next/faustwp-getting-started/components/NavigationMenu/NavigationMenu.module.scss at 051c1f64fd99e9934fd8c2e3bd1bad9eb4b2ee92 · wpengine/faustjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
@import '../../styles/breakpoints';

%visible {
	visibility: visible;
	opacity: 1;
}

%hidden {
	// Always visible for smaller viewports.
	@media (min-width: $breakpoint-small) {
		visibility: hidden;
		opacity: 0;
	}
}

.component {
	background-color: var(--wpe--navigation-menu--background-color);
}

.menu {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	margin: 0;
	position: relative;
	gap: 0.5rem;

	li {
		display: flex;
		align-items: center;
		position: relative;
		width: 100%;
		flex-direction: column;

		@media (min-width: $breakpoint-small) {
			width: auto;
			flex-direction: row;
		}

		&:focus-within ul,
		a:hover + ul,
		a:focus + ul {
			@extend %visible;
		}
	}

	a {
		color: var(--wpe--navigation-menu--color);
		padding: 0.5rem;
		display: block;
		transition: all 0.2s ease-out;
		width: 100%;
		white-space: nowrap;
		text-align: center;

		&:hover,
		&:focus {
			color: var(--wpe--navigation-menu--color--hover);
		}

		// Remove link underline when component is inside header.
		header & {
			text-decoration: none;
		}
	}

	li ul {
		@extend %hidden;
		background-color: var(--wpe--dropdown--background-color);
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;

		@media (min-width: $breakpoint-small) {
			position: absolute;
			left: -10px;
			top: 100%;
			text-align: left;
			box-shadow: var(--wpe--shadow--large);
			padding: 1rem;
			border-radius: 8px;
			transition: all 0.2s ease-out;
			width: inherit;
			border: var(--wpe--border--extra-light);
		}

		&:hover {
			@extend %visible;
		}

		li + li {
			@media (min-width: $breakpoint-small) {
				border-top: var(--wpe--border--light);
				margin-top: 3px; // Make room for default browser focus styles.
			}
		}
	}
}