Workaround to have tabindex for mobile dropdown but not on desktop
This commit is contained in:
parent
336c0c0db5
commit
b03eba2bd5
4 changed files with 91 additions and 4 deletions
|
@ -11,11 +11,11 @@ const hamburger_src_url = `url("${hamburger.src}")`;
|
|||
<span class="visually-hidden">Firq Website Logo</span>
|
||||
</a>
|
||||
<ul class="desktop">
|
||||
<slot />
|
||||
<slot name="desktop"/>
|
||||
</ul>
|
||||
<button class="mobile" aria-label="Navigation Button" tabindex="0" onclick="this.focus()">
|
||||
<ul>
|
||||
<slot />
|
||||
<slot name="mobile"/>
|
||||
</ul>
|
||||
<div class="placeholder"></div>
|
||||
<div class="hamburger-menu" role="menu"></div>
|
||||
|
|
81
src/components/navbarEntryDesktop.astro
Normal file
81
src/components/navbarEntryDesktop.astro
Normal 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>
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
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 embed from '../assets/embed.png'
|
||||
|
||||
|
@ -77,7 +78,12 @@ const mapped_navdata = navdata.map((item) => ({
|
|||
<Navbar>
|
||||
{
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue