michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix #7056 Splashing Navigation Menu in portfolio template (#7078)

Browse source 
* Fix #7056 Splashing Navigation Menu in portfolio template

* Add menu back to no-JS view

* Fix desktop view in non-JS & menu styling

* chore: force ci

---------

Co-authored-by: Nate Moore <nate@astro.build>
Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Nel 2023-08-17 04:04:53 +08:00 committed by GitHub
parent e0d1439f2a
commit 9dd09e2c6a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
examples/portfolio/src/components/Nav.astro
View file

@ -36,7 +36,45 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
</template>
</menu-button>
</div>
<div id="menu-content">
<noscript class="menu-noscript">
<ul class="nav-items">
{
textLinks.map(({ label, href }) => (
<li>
<a
aria-current={Astro.url.pathname === href}
class:list={[
'link',
{
active:
Astro.url.pathname === href ||
(href !== '/' && Astro.url.pathname.startsWith(href)),
},
]}
href={href}
>
{label}
</a>
</li>
))
}
</ul>
</noscript>
<noscript style="display: contents;">
<div class="menu-footer">
<div class="socials">
{
iconLinks.map(({ href, icon, label }) => (
<a href={href} class="social">
<span class="sr-only">{label}</span>
<Icon icon={icon} />
</a>
))
}
</div>
</div>
</noscript>
<div id="menu-content" hidden>
<ul class="nav-items">
{
textLinks.map(({ label, href }) => (
@ -90,6 +128,8 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
// Hide menu (shown by default to support no-JS browsers).
const menu = document.getElementById('menu-content')!;
menu.hidden = true;
// Add "menu-content" class in JS to avoid covering content in non-JS browsers.
menu.classList.add('menu-content');
/** Set whether the menu is currently expanded or collapsed. */
const setExpanded = (expand: boolean) => {
@ -169,7 +209,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
z-index: -1;
}
#menu-content {
.menu-content {
position: absolute;
left: 0;
right: 0;
@ -254,7 +294,7 @@ const iconLinks: { label: string; href: string; icon: keyof typeof iconPaths }[]
font-size: var(--text-lg);
}
#menu-content {
.menu-content {
display: contents;
}