Better workaround for navbar + hopefully burger fix
All checks were successful
/ checking (push) Successful in 36s
/ build-site (push) Successful in 3m15s
/ publish (push) Successful in 7m3s
/ unlighthouse (push) Successful in 33s
/ deploy-unlighthouse-files (push) Successful in 10s
/ deploy-unlighthouse-site (push) Successful in 12s

This commit is contained in:
Firq 2024-01-01 20:10:57 +01:00
parent b03eba2bd5
commit 4b3a8898f6
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
4 changed files with 11 additions and 90 deletions

View file

@ -109,12 +109,12 @@ const hamburger_src_url = `url("${hamburger.src}")`;
.hamburger-menu { .hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center; mask: var(--hamburger_src_url) no-repeat center;
background-color: white; background-color: white;
width: 2em; width: 2rem;
height: 2em; height: 2rem;
position: static; position: static;
align-self: flex-start; align-self: flex-start;
padding-right: 1rem; margin-right: 1rem;
padding-top: 2rem; margin-top: 1rem;
} }
@media (min-width: 1140px) { @media (min-width: 1140px) {

View file

@ -1,12 +1,13 @@
--- ---
export interface Props { export interface Props {
currentPage?: string currentPage?: string
navtype: "mobile" | "desktop"
link: string link: string
text: string text: string
icon: ImageMetadata icon: ImageMetadata
} }
const { icon, text, link, currentPage } = Astro.props const { icon, text, link, navtype, currentPage } = Astro.props
let currPage = '' let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '') const slug = link.replace(new RegExp('/', 'g'), '')
@ -20,6 +21,7 @@ if (currentPage === slug) {
const icon_src_url = `url("${icon.src}")`; const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}` const fulllink = `/${slug}`
let extraattributes = navtype === "mobile" ? { tabindex: "0"} : {}
--- ---
<li> <li>
@ -29,6 +31,7 @@ const fulllink = `/${slug}`
aria-label={text} aria-label={text}
class={currPage} class={currPage}
role="menuitem" role="menuitem"
{...extraattributes}
> >
<div class="icon"></div> <div class="icon"></div>
{text} {text}

View file

@ -1,81 +0,0 @@
---
export interface Props {
currentPage?: string
link: string
text: string
icon: ImageMetadata
}
const { icon, text, link, currentPage } = Astro.props
let currPage = ''
const slug = link.replace(new RegExp('/', 'g'), '')
if (currentPage === slug) {
currPage = 'current'
} else if (currentPage === 'home' && link === '/') {
currPage = 'current'
}
const icon_src_url = `url("${icon.src}")`;
const fulllink = `/${slug}`
---
<li>
<a
href={fulllink}
rel="noopener noreferrer"
aria-label={text}
class={currPage}
role="menuitem"
tabindex="0"
>
<div class="icon"></div>
{text}
</a>
</li>
<style define:vars={{ icon_src_url }}>
li {
align-items: center;
justify-content: center;
text-align: left;
display: flex;
width: 200px;
}
li > a {
display: inline-flex;
color: white;
text-decoration: none;
justify-content: center;
align-items: center;
font-size: 1.4em;
height: 100%;
font-weight: bold;
gap: 0.2em;
}
li > a:hover {
color: var(--c-purplepink);
}
li > a:hover > .icon {
background-color: var(--c-purplepink);
}
.current {
color: var(--c-darkpurple) !important;
}
.current > .icon {
background-color: var(--c-darkpurple) !important;
}
.icon {
mask: var(--icon_src_url) no-repeat center;
background-color: white;
width: 1.4em;
height: 1.4em;
}
</style>

View file

@ -1,7 +1,6 @@
--- ---
import Navbar from '../components/navbar.astro' import Navbar from '../components/navbar.astro'
import NavbarEntryDesktop from '../components/navbarEntryDesktop.astro' import NavbarEntry from '../components/navbarEntry.astro'
import NavbarEntryMobile from '../components/navbarEntryMobile.astro'
import navdata from '../../static/data/_navdata.json' import navdata from '../../static/data/_navdata.json'
import embed from '../assets/embed.png' import embed from '../assets/embed.png'
@ -78,12 +77,12 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar> <Navbar>
{ {
mapped_navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntryDesktop currentPage={currentpage} {...item} slot="desktop"/> <NavbarEntry currentPage={currentpage} navtype="desktop" {...item} slot="desktop"/>
)) ))
} }
{ {
mapped_navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntryMobile currentPage={currentpage} {...item} slot="mobile"/> <NavbarEntry currentPage={currentpage} navtype="mobile" {...item} slot="mobile"/>
)) ))
} }
</Navbar> </Navbar>