Fixes for Apple and Accessibility #23

Merged
Firq merged 7 commits from dev into main 2024-01-01 20:30:17 +00:00
4 changed files with 91 additions and 4 deletions
Showing only changes of commit b03eba2bd5 - Show all commits

View file

@ -11,11 +11,11 @@ const hamburger_src_url = `url("${hamburger.src}")`;
<span class="visually-hidden">Firq Website Logo</span> <span class="visually-hidden">Firq Website Logo</span>
</a> </a>
<ul class="desktop"> <ul class="desktop">
<slot /> <slot name="desktop"/>
</ul> </ul>
<button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()"> <button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
<ul> <ul>
<slot /> <slot name="mobile"/>
</ul> </ul>
<div class="placeholder"></div> <div class="placeholder"></div>
<div class="hamburger-menu" role="menu"></div> <div class="hamburger-menu" role="menu"></div>

View file

@ -0,0 +1,81 @@
---
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"
>
<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,6 +1,7 @@
--- ---
import Navbar from '../components/navbar.astro' import Navbar from '../components/navbar.astro'
import NavbarEntry from '../components/navbarEntry.astro' import NavbarEntryDesktop from '../components/navbarEntryDesktop.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'
@ -77,7 +78,12 @@ const mapped_navdata = navdata.map((item) => ({
<Navbar> <Navbar>
{ {
mapped_navdata.map((item) => ( mapped_navdata.map((item) => (
<NavbarEntry currentPage={currentpage} {...item} /> <NavbarEntryDesktop currentPage={currentpage} {...item} slot="desktop"/>
))
}
{
mapped_navdata.map((item) => (
<NavbarEntryMobile currentPage={currentpage} {...item} slot="mobile"/>
)) ))
} }
</Navbar> </Navbar>