hide nav bar on index load

hackclub · Oct 17, 2023 · df4deb9 · df4deb9 · vercel · Oct 17, 2023
1 parent 963838a
commit df4deb9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/astro/src/components/Navbar.astro b/astro/src/components/Navbar.astro
@@ -15,6 +15,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx'
     position: sticky;
     top: 0;
     z-index: 1000;
+    opacity: 0;
   }
 
   nav a {

diff --git a/astro/src/components/landing/Background.astro b/astro/src/components/landing/Background.astro
@@ -81,7 +81,6 @@
   const svgElement = document.querySelector('.svg-container')
   subpathElements.forEach(element => svgElement.appendChild(element))
 
-  document.querySelector("nav").style.opacity = 0;
   setTimeout(() => {
     fadeIn(document.querySelector("nav"), 1500);
     document.querySelectorAll(".fade-in").forEach(el => {

diff --git a/astro/src/layouts/Layout.astro b/astro/src/layouts/Layout.astro
@@ -6,11 +6,13 @@ import Navbar from '../components/Navbar.astro'
 export interface Props {
   title: string | undefined
   description: string | undefined
+  showNav: string | undefined
 }
 
-let { title, description } = Astro.props
+let { title, description, showNav } = Astro.props
 title = `Blot | ${title}` || 'Blot'
 description = description || 'Blot editor!'
+showNav = showNav || 'true'
 ---
 
 <!DOCTYPE html>
@@ -22,8 +24,12 @@ description = description || 'Blot editor!'
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
   </head>
-  <body>
-    <Navbar />
+  <body data-shownav={showNav}>
+    <Navbar/>
     <slot />
+    <script client:load>
+      const showNav = document.body.dataset.shownav;
+      if (showNav === "true") document.querySelector("nav").style.opacity = 1;
+    </script>
   </body>
 </html>
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
@@ -251,6 +251,7 @@ try {
 </style>
 
 <Layout
+  showNav="false"
   title="Blot"
   description="Blot, the plotter bot from Hack Club: you code art, we send you a machine.">
   <div class="lead-section">
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ import GitHubIcon from '../ui/GitHubIcon.tsx' @@
         position: sticky;
         top: 0;
         z-index: 1000;
+        opacity: 0;
       }
       nav a {
@@ Expand Down @@