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
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:
parent
b03eba2bd5
commit
4b3a8898f6
4 changed files with 11 additions and 90 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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}
|
|
@ -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>
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue