Mirror of
feat: dropdown links instead of Overview below main content
+143
-42
+141
src/components/DropdownLinks.astro
+141
src/components/DropdownLinks.astro
···
1
+
---
2
+
import { DashboardData } from "../data";
3
+
4
+
const pluginLinks = DashboardData.plugins.map((plugin) => ({
5
+
name: plugin.name,
6
+
link: `/plugins/${plugin.packageName}`,
7
+
}));
8
+
9
+
const localeLinks = DashboardData.locales.map((locale) => ({
10
+
label: locale.label,
11
+
link: `/languages/${locale.lang}`,
12
+
}));
13
+
---
14
+
15
+
<nav class="top-dropdown-menu">
16
+
<ul class="menu-list">
17
+
<li class="menu-item">
18
+
<button aria-haspopup="true" aria-expanded="false" class="menu-button">
19
+
View by plugin ▾
20
+
</button>
21
+
<ul class="submenu">
22
+
<li><a href="/">View All (Homepage)</a></li>
23
+
{
24
+
pluginLinks.map((plugin) => (
25
+
<li>
26
+
<a href={plugin.link}>{plugin.name}</a>
27
+
</li>
28
+
))
29
+
}
30
+
</ul>
31
+
</li>
32
+
<li class="menu-item">
33
+
<button aria-haspopup="true" aria-expanded="false" class="menu-button">
34
+
View by language ▾
35
+
</button>
36
+
<ul class="submenu">
37
+
{
38
+
localeLinks.map((locale) => (
39
+
<li>
40
+
<a href={locale.link}>{locale.label}</a>
41
+
</li>
42
+
))
43
+
}
44
+
</ul>
45
+
</li>
46
+
</ul>
47
+
</nav>
48
+
49
+
<style>
50
+
/* Container */
51
+
.top-dropdown-menu {
52
+
background-color: var(--ln-color-gray-1);
53
+
font-family: var(--ln-font-body);
54
+
padding: 0.5rem 1rem;
55
+
border-bottom: 1px solid var(--ln-color-gray-3);
56
+
display: flex;
57
+
justify-content: center;
58
+
}
59
+
60
+
/* Top-level menu */
61
+
.menu-list {
62
+
list-style: none;
63
+
margin: 0;
64
+
padding: 0;
65
+
display: flex;
66
+
gap: 2rem;
67
+
}
68
+
69
+
.menu-item {
70
+
position: relative;
71
+
}
72
+
73
+
.menu-button {
74
+
all: unset;
75
+
cursor: pointer;
76
+
font-weight: 600;
77
+
color: var(--ln-color-black);
78
+
padding: 0.25rem 0.5rem;
79
+
border-radius: 0.25rem;
80
+
transition: background-color 0.2s ease;
81
+
user-select: none;
82
+
}
83
+
84
+
.menu-button:hover,
85
+
.menu-button:focus {
86
+
background-color: var(--ln-color-blue);
87
+
color: var(--ln-color-white);
88
+
outline-offset: 2px;
89
+
outline: 2px solid var(--ln-color-blue);
90
+
}
91
+
92
+
/* Submenu (dropdown) */
93
+
.submenu {
94
+
list-style: none;
95
+
position: absolute;
96
+
top: 110%;
97
+
left: 0;
98
+
background-color: var(--ln-color-gray-1);
99
+
padding: 0.5rem 0;
100
+
margin: 0;
101
+
min-width: 180px;
102
+
box-shadow: 0 6px 12px var(--ln-color-gray-3);
103
+
border-radius: 0.25rem;
104
+
opacity: 0;
105
+
pointer-events: none;
106
+
transform: translateY(10px);
107
+
transition:
108
+
opacity 0.25s ease,
109
+
transform 0.25s ease;
110
+
z-index: 100;
111
+
}
112
+
113
+
/* Show submenu on hover */
114
+
.menu-item:hover > .submenu,
115
+
.menu-item:focus-within > .submenu {
116
+
opacity: 1;
117
+
pointer-events: auto;
118
+
transform: translateY(0);
119
+
}
120
+
121
+
/* Submenu links */
122
+
.submenu li {
123
+
padding: 0;
124
+
}
125
+
126
+
.submenu a {
127
+
display: block;
128
+
padding: 0.4rem 1rem;
129
+
color: var(--ln-color-black);
130
+
text-decoration: none;
131
+
font-weight: 500;
132
+
transition: background-color 0.15s ease;
133
+
}
134
+
135
+
.submenu a:hover,
136
+
.submenu a:focus {
137
+
background-color: var(--ln-color-blue);
138
+
color: var(--ln-color-white);
139
+
outline: none;
140
+
}
141
+
</style>
-40
src/components/Overview.astro
-40
src/components/Overview.astro
···
1
-
---
2
-
import { DashboardData } from "../data";
3
-
4
-
const pluginLinks = DashboardData.plugins.map((plugin) => ({
5
-
name: plugin.name,
6
-
link: `/plugins/${plugin.packageName}`,
7
-
}));
8
-
9
-
const localeLinks = DashboardData.locales.map((locale) => ({
10
-
label: locale.label,
11
-
link: `/languages/${locale.lang}`,
12
-
}));
13
-
---
14
-
15
-
<h2 id="by-plugin">
16
-
<a href="#by-plugin">View by plugin</a>
17
-
</h2>
18
-
<ul>
19
-
<li><a href="/">View All (Homepage)</a></li>
20
-
{
21
-
pluginLinks.map((plugin) => (
22
-
<li>
23
-
<a href={plugin.link}>{plugin.name}</a>
24
-
</li>
25
-
))
26
-
}
27
-
</ul>
28
-
29
-
<h2 id="by-language">
30
-
<a href="#by-language">View by language</a>
31
-
</h2>
32
-
<ul>
33
-
{
34
-
localeLinks.map((locale) => (
35
-
<li>
36
-
<a href={locale.link}>{locale.label}</a>
37
-
</li>
38
-
))
39
-
}
40
-
</ul>
+2
-2
src/layouts/LunariaLayout.astro
+2
-2
src/layouts/LunariaLayout.astro
···
4
4
import { convertToKeyStatuses, type DataPerPlugin } from "../utils";
5
5
import "../styles/globals.css";
6
6
import "../styles/variables.css";
7
-
import Overview from "../components/Overview.astro";
7
+
import DropdownLinks from "../components/DropdownLinks.astro";
8
8
9
9
interface Props {
10
10
title: string;
···
40
40
🚧 This website is under development. Some important features are still
41
41
missing.
42
42
</div>
43
+
<DropdownLinks />
43
44
<main>
44
45
<div class="limit-to-viewport">
45
46
<h1>{title}</h1>
···
47
48
<StatusByLocale {keyStatuses} />
48
49
</div>
49
50
<StatusByKey {keyStatuses} />
50
-
<Overview />
51
51
</main>
52
52
</body>
53
53
</html>