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

* 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>

1 files changed, 43 insertions, 3 deletions

diff --git a/examples/portfolio/src/components/Nav.astro b/examples/portfolio/src/components/Nav.astro
index 680b00c0b..2e9717884 100644
--- a/examples/portfolio/src/components/Nav.astro
+++ b/examples/portfolio/src/components/Nav.astro
@@ -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;
 		}