Create dismissable beta banner

window.onload had to be changed to event listener to allow both scripts to run simultaneously

src/assets/js/cookieConsent.js

@@ -22,7 +22,7 @@ const saveAcceptToStorage = () =>
 const saveRejectToStorage = () =>
   storageType.setItem(consentPropertyName, false);
 
-window.onload = () => {
+window.addEventListener("load", function () {
   const consentPopup = document.getElementById("consent-popup");
   const acceptBtn = document.getElementById("accept");
   const rejectBtn = document.getElementById("reject");
@@ -52,4 +52,4 @@ window.onload = () => {
       consentPopup.classList.remove("hide");
     }, 2000);
   }
-};
+});

src/components/banner/BetaBanner.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "../../styles/icons.css";
+
+function BetaBanner() {
+  return (
+    <div
+      id="beta-banner"
+      className="hidden items-center justify-center h-24 bg-orange-400 gap-4"
+    >
+      <div className="flex gap-2">
+        <p className="text-xl font-bold text-gray-900">Beta testers needed!</p>
+        <p className="text-xl text-gray-900">Help us test our ‘Save to cloud’ feature</p>
+      </div>
+      <a className="flex text-xl h-12 justify-center items-center px-4 border-2 border-gray-900 rounded-md hover:bg-gray-900 hover:text-white">Join the beta</a>
+      <a
+        className="absolute right-8 flex justify-center items-center h-10 w-10 hover:bg-orange-600 rounded-md"
+        id="close"
+      >
+        <span className="icon icon-times"></span>
+      </a>
+    </div>
+  );
+}
+
+export default BetaBanner;

src/components/beta/banner.astro

@@ -1,3 +0,0 @@
-<section>
-    A new beta is available! <a href="/beta">Try it now!</a>
-</section>

src/components/beta/banner.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+
+function banner() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!sessionStorage.getItem("bannerDismissed")) {
+      setIsVisible(true);
+    }
+  }, []);
+
+  function onDismissBanner() {
+    sessionStorage.setItem("bannerDismissed", "true");
+    setIsVisible(false);
+  }
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      role="banner"
+      className="flex bg-orange-400 text-center text-gray-900 text-xl h-24 justify-center items-center gap-4"
+    >
+      <div className="flex gap-3 items-center">
+        <strong>Beta testers needed!</strong>Help us test our ‘Save to cloud’
+        feature<a href="/beta"></a>
+      </div>
+      <a className="border-2 border-gray-900 rounded-md py-0.5 px-2 text-gray-900 font-semibold hover:bg-gray-900 hover:text-white">
+        Join beta
+      </a>
+      <a
+        onClick={() => onDismissBanner()}
+        className="absolute right-8 flex h-10 w-10 items-center justify-center border-gray-900 hover:border-2 rounded-md"
+      >
+        <span className="icon icon-times"></span>
+      </a>
+    </div>
+  );
+}
+
+export default banner;

src/components/navigation/NavigationReact.jsx

@@ -63,7 +63,7 @@ function NavigationReact(props) {
   }
 
   return (
-    <nav className="fixed left-0 right-0 top-0 border-b-2 z-50 filter bg-white bg-opacity-90 backdrop-blur-xl ">
+    <nav className="border-b-2 z-50 filter bg-white bg-opacity-90 backdrop-blur-xl ">
       <div className="flex max-w-screen-xl mx-auto h-14 px-4 xl:px-0 items-center">
         <div className="flex-1">
           <a className="flex w-fit items-center gap-1 lg:gap-2" href="/">

src/layouts/BaseLayout.astro

@@ -4,6 +4,8 @@ import NavigationReact from "../components/navigation/NavigationReact";
 import CookieConsent from "../components/banner/CookieConsent";
 import "../styles/input.css";
 import { ViewTransitions } from "astro:transitions";
+import Banner from "../components/banner/BetaBanner";
+import BetaBanner from "../components/banner/BetaBanner";
 
 export interface Props {
   title: string;
@@ -24,14 +26,8 @@ const {
     <link href="/output.css" rel="stylesheet" />
     <meta name="generator" content={Astro.generator} />
     <link rel="sitemap" href="/sitemap-index.xml" />
-    <meta
-      name="title"
-      content={title}
-    />
-    <meta
-      name="description"
-      content={description}
-    />
+    <meta name="title" content={title} />
+    <meta name="description" content={description} />
     <meta
       name="keywords"
       content="Audacity, audio editing, audio recorder, open-source, audio software, sound editing, audio mixer"
@@ -39,19 +35,53 @@ const {
 
     <title>{title}</title>
     <script src="../assets/js/matomoTracking.js"></script>
+    <script>
+      window.addEventListener("load", function () {
+        const closeButton = document.getElementById("close");
+        const betaBanner = document.getElementById("beta-banner");
+
+        if(localStorage.getItem("dismissBanner") === "true"){
+          betaBanner?.classList.add("hidden");
+          betaBanner?.classList.remove("flex");
+        }
+
+        if(localStorage.getItem("dismissBanner") !== "true"){
+          betaBanner?.classList.remove("hidden");
+          betaBanner?.classList.add("flex");
+
+        }
+
+        function dismissBanner() {
+          console.log("Banner has been dismissed");
+          localStorage.setItem("dismissBanner", "true")
+          betaBanner?.classList.add("hidden");
+          betaBanner?.classList.remove("flex");
+
+          console.log(betaBanner?.classList);
+        }
+
+        closeButton?.addEventListener("click", dismissBanner);
+      });
+    </script>
   </head>
   <main class="flex flex-col h-screen">
     <body>
       <a class="skip-to-content" href="#main" aria-label="Skip to content"
         >Skip to content</a
       >
-      <NavigationReact client:load currentURL={Astro.request.url} />
-      <div class="mt-14 flex-1"><slot /></div>
+      <header class="sticky left-0 right-0 top-0">
+        <NavigationReact client:load currentURL={Astro.request.url} />
+        <BetaBanner />
+      </header>
+
+      <div class="flex-1">
+        <slot />
+      </div>
       <Footer />
       <CookieConsent client:load />
-
-      <script src="../assets/js/cookieConsent.js"></script>
     </body>
+    <script src="../assets/js/cookieConsent.js"></script>
   </main>
-  
+
+
 </html>

src/styles/icons.css

@@ -85,4 +85,8 @@
 
 .icon-cycle:before {
     content: "\F358"
-} 
+} 
+
+.icon-times:before {
+    content: "\EF14"
+}

src/styles/input.css

@@ -110,10 +110,6 @@
         &.hide{
            bottom:-412px;
         }
-
    
     }
-
-    
-    
 }