added announcement bar

layouts/MainLayout.tsx

@@ -1,8 +1,10 @@
 import Navbar from "@/components/Navbar";
+import AnnouncementBar from "@/components/AnnouncementBar";
 import Sidebar from "@/components/Sidebar";
-import { ReactNode, useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
+import getLatestVersion from "@/lib/client/getLatestVersion";
 
 interface Props {
   children: ReactNode;
@@ -17,16 +19,49 @@ export default function MainLayout({ children }: Props) {
       : (document.body.style.overflow = "auto");
   }, [modal]);
 
+  const showAnnouncementBar = localStorage.getItem("showAnnouncementBar");
+  const [showAnnouncement, setShowAnnouncement] = useState(
+    showAnnouncementBar ? showAnnouncementBar === "true" : true
+  );
+
+  useEffect(() => {
+    getLatestVersion(setShowAnnouncement);
+  }, []);
+
+  useEffect(() => {
+    if (showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "true");
+      setShowAnnouncement(true);
+    } else if (!showAnnouncement) {
+      localStorage.setItem("showAnnouncementBar", "false");
+      setShowAnnouncement(false);
+    }
+  }, [showAnnouncement]);
+
+  const toggleAnnouncementBar = () => {
+    setShowAnnouncement(!showAnnouncement);
+  };
+
   return (
     <>
       <ModalManagement />
 
+      {showAnnouncement ? (
+        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+      ) : undefined}
+
       <div className="flex">
         <div className="hidden lg:block">
-          <Sidebar className="fixed top-0" />
+          <Sidebar
+            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
+          />
         </div>
 
-        <div className="w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80">
+        <div
+          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
+            showAnnouncement ? "mt-10" : ""
+          }`}
+        >
           <Navbar />
           {children}
         </div>