Add announcement banner to show updates or important information (#350)

* Add contrast color

* Add crypto-js for md5 hash

* Add announcement banner

src/layouts/AppLayout.tsx

@@ -11,6 +11,7 @@ import React from "react";
 import { Toaster } from "react-hot-toast";
 import OIDCProvider from "@/auth/OIDCProvider";
 import AnalyticsProvider from "@/contexts/AnalyticsProvider";
+import AnnouncementProvider from "@/contexts/AnnouncementProvider";
 import DialogProvider from "@/contexts/DialogProvider";
 import ErrorBoundaryProvider from "@/contexts/ErrorBoundary";
 import { GlobalThemeProvider } from "@/contexts/GlobalThemeProvider";
@@ -35,9 +36,11 @@ export default function AppLayout({ children }: { children: React.ReactNode }) {
             <GlobalThemeProvider>
               <ErrorBoundaryProvider>
                 <OIDCProvider>
-                  <TooltipProvider delayDuration={0}>
-                    {children}
-                  </TooltipProvider>
+                  <AnnouncementProvider>
+                    <TooltipProvider delayDuration={0}>
+                      {children}
+                    </TooltipProvider>
+                  </AnnouncementProvider>
                 </OIDCProvider>
               </ErrorBoundaryProvider>
             </GlobalThemeProvider>

src/layouts/DashboardLayout.tsx

@@ -9,6 +9,7 @@ import { useIsSm, useIsXs } from "@utils/responsive";
 import { AnimatePresence, motion } from "framer-motion";
 import { XIcon } from "lucide-react";
 import React from "react";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import ApplicationProvider, {
   useApplicationContext,
 } from "@/contexts/ApplicationProvider";
@@ -16,7 +17,7 @@ import CountryProvider from "@/contexts/CountryProvider";
 import GroupsProvider from "@/contexts/GroupsProvider";
 import UsersProvider from "@/contexts/UsersProvider";
 import Navigation from "@/layouts/Navigation";
-import Navbar from "./Header";
+import Navbar, { headerHeight } from "./Header";
 
 export default function DashboardLayout({
   children,
@@ -43,7 +44,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
   const isXs = useIsXs();
 
   const navOpenPageWidth = isSm ? "50%" : isXs ? "65%" : "80%";
-
+  const { bannerHeight } = useAnnouncement();
   return (
     <div className={cn("flex flex-col h-screen", mobileNavOpen && "flex")}>
       {mobileNavOpen && (
@@ -148,7 +149,7 @@ function DashboardPageContent({ children }: { children: React.ReactNode }) {
             <div
               className={"flex flex-row flex-grow"}
               style={{
-                height: "calc(100vh - 75px)",
+                height: `calc(100vh - ${headerHeight + bannerHeight}px)`,
               }}
             >
               <Navigation hideOnMobile />

src/layouts/Header.tsx

@@ -1,17 +1,21 @@
 "use client";
 
 import Button from "@components/Button";
+import { AnnouncementBanner } from "@components/ui/AnnouncementBanner";
 import DarkModeToggle from "@components/ui/DarkModeToggle";
 import UserDropdown from "@components/ui/UserDropdown";
-import { Navbar } from "flowbite-react";
+import { cn } from "@utils/helpers";
 import { MenuIcon } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import NetBirdLogo from "@/assets/netbird.svg";
 import NetBirdLogoFull from "@/assets/netbird-full.svg";
+import { useAnnouncement } from "@/contexts/AnnouncementProvider";
 import { useApplicationContext } from "@/contexts/ApplicationProvider";
 
+export const headerHeight = 75;
+
 export default function NavbarWithDropdown() {
   const router = useRouter();
   const Logo = useMemo(() => {
@@ -34,42 +38,55 @@ export default function NavbarWithDropdown() {
   }, []);
 
   const { toggleMobileNav } = useApplicationContext();
-
+  const { bannerHeight } = useAnnouncement();
   return (
     <>
-      <Navbar
-        fluid
-        className={
-          "border-b dark:border-zinc-700/40 fixed z-50 h-[75px] px-3 md:px-4 w-full"
-        }
+      <div
+        className={"fixed z-50 w-full"}
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
       >
-        <div className={"flex items-center gap-4 md:hidden"}>
-          <Button
-            className={"!px-3 md:hidden"}
-            variant={"default-outline"}
-            onClick={toggleMobileNav}
-          >
-            <div>
-              <MenuIcon size={20} className={"relative"} />
-            </div>
-          </Button>
-        </div>
-        <Navbar.Brand
-          onClick={() => router.push("/peers")}
-          className={"cursor-pointer hover:opacity-70 transition-all"}
+        <AnnouncementBanner />
+        <div
+          className={cn(
+            "bg-white px-2 py-4 dark:border-gray-700 dark:bg-nb-gray/50 backdrop-blur-lg sm:px-6",
+            "border-b dark:border-zinc-700/40 px-3 md:px-4 w-full",
+            "flex justify-between items-center transition-all",
+          )}
         >
-          {Logo}
-        </Navbar.Brand>
-
-        <div className="flex md:order-2 gap-4">
-          <div className={"hidden md:block"}>
-            <DarkModeToggle />
+          <div className={"flex items-center gap-4 md:hidden"}>
+            <Button
+              className={"!px-3 md:hidden"}
+              variant={"default-outline"}
+              onClick={toggleMobileNav}
+            >
+              <div>
+                <MenuIcon size={20} className={"relative"} />
+              </div>
+            </Button>
+          </div>
+          <div
+            onClick={() => router.push("/peers")}
+            className={"cursor-pointer hover:opacity-70 transition-all"}
+          >
+            {Logo}
           </div>
 
-          <UserDropdown />
+          <div className="flex md:order-2 gap-4">
+            <div className={"hidden md:block"}>
+              <DarkModeToggle />
+            </div>
+
+            <UserDropdown />
+          </div>
         </div>
-      </Navbar>
-      <div className={"h-[75px]"}></div>
+      </div>
+      <div
+        style={{
+          height: headerHeight + bannerHeight,
+        }}
+      ></div>
     </>
   );
 }