Mirror of
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: dropdown links instead of Overview below main content

+143 -42
+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
··· 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
··· 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>