Something went wrong. Try again.
Mirror of my GitHub Pages site www.spenser.black
Something went wrong. Try again.
2.5 kB · 124 lines
Astro
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125---const pages: [ description: string, link: string, attrs?: Record<string, string>,][] = [ ["Homepage", "/"], ["Ramblings", "/blog/"], ["Projects", "/projects/"], ["Steamdown", "/steamdown/", { title: "Markdown for Steam" }], ["Nickname", "/wm-nickname/", { title: "Generate a nickname" }],];---
<header> <div class="dropdown-container"> <button aria-expanded="false" aria-controls="nav-menu" id="nav-menu-button" class="primary">Navigation</button > <nav id="nav-menu"> { pages.map(([description, link, attrs]) => ( <a class="button primary" href={link} title={attrs?.title}> {description} </a> )) } </nav> </div> <div class="controls"> <div id="theme-dropdown" class="dropdown"> <button type="button" id="theme-dropdown-button" class="primary theme" aria-expanded="false" aria-controls="theme-dropdown" > Theme </button> <ul id="theme-dropdown-content" class="dropdown-content hide"> <li><button type="button" id="theme-system">System</button></li> <li><button type="button" id="theme-dark">Dark</button></li> <li><button type="button" id="theme-light">Light</button></li> </ul> </div> </div></header>
<script> const button = document.getElementById( "nav-menu-button", ) as HTMLButtonElement; const menu = document.getElementById("nav-menu") as HTMLElement; const cls = "expanded"; button.addEventListener("click", () => { if (menu.classList.contains(cls)) { menu.classList.remove(cls); button.setAttribute("aria-expanded", "false"); } else { menu.classList.add(cls); button.setAttribute("aria-expanded", "true"); } });</script><script> import "../scripts/theme-dropdown";</script>
<style lang="scss"> header { display: flex; flex-direction: row; justify-content: space-around; } .dropdown { ul { position: fixed; padding: 0; background-color: var(--contrast); margin-top: 0.1rem; li { display: block; * { color: var(--main-fg); background-color: var(--contrast); } } } }
#nav-menu-button { display: none; } nav a { margin: 0 0.5rem; } @media screen and (max-width: 999px) { #nav-menu-button { display: unset; } nav { &.expanded { display: flex; flex-direction: column; margin-top: 0.5rem; } a { margin-bottom: 0.5rem; } } } nav { display: none; } @media screen and (min-width: 1000px) { nav { display: unset; } }</style>