refactor code to improve readability and maintainability + redesigned announcement bar

layouts/AuthRedirect.tsx

@@ -9,7 +9,6 @@ interface Props {
   children: ReactNode;
 }
 
-const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
 const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
 
 export default function AuthRedirect({ children }: Props) {
@@ -26,6 +25,8 @@ export default function AuthRedirect({ children }: Props) {
     const isPublicPage = router.pathname.startsWith("/public");
     const hasInactiveSubscription =
       account.id && !account.subscription?.active && stripeEnabled;
+
+    // There are better ways of doing this... but this one works for now
     const routes = [
       { path: "/login", isProtected: false },
       { path: "/register", isProtected: false },
@@ -53,9 +54,7 @@ export default function AuthRedirect({ children }: Props) {
         redirectTo("/dashboard");
       } else if (
         isUnauthenticated &&
-        !routes.some(
-          (e) => router.pathname.startsWith(e.path) && !e.isProtected
-        )
+        routes.some((e) => router.pathname.startsWith(e.path) && e.isProtected)
       ) {
         redirectTo("/login");
       } else {

layouts/MainLayout.tsx

@@ -1,5 +1,5 @@
 import Navbar from "@/components/Navbar";
-import AnnouncementBar from "@/components/AnnouncementBar";
+import Announcement from "@/components/Announcement";
 import Sidebar from "@/components/Sidebar";
 import { ReactNode, useEffect, useState } from "react";
 import getLatestVersion from "@/lib/client/getLatestVersion";
@@ -33,27 +33,20 @@ export default function MainLayout({ children }: Props) {
   };
 
   return (
-    <>
+    <div className="flex" data-testid="dashboard-wrapper">
       {showAnnouncement ? (
-        <AnnouncementBar toggleAnnouncementBar={toggleAnnouncementBar} />
+        <Announcement toggleAnnouncementBar={toggleAnnouncementBar} />
       ) : undefined}
-
-      <div className="flex" data-testid="dashboard-wrapper">
-        <div className="hidden lg:block">
-          <Sidebar
-            className={`fixed ${showAnnouncement ? "top-10" : "top-0"}`}
-          />
-        </div>
-
-        <div
-          className={`w-full sm:pb-0 pb-20 flex flex-col min-h-${
-            showAnnouncement ? "full" : "screen"
-          } lg:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
-        >
-          <Navbar />
-          {children}
-        </div>
+      <div className="hidden lg:block">
+        <Sidebar className={`fixed top-0`} />
       </div>
-    </>
+
+      <div
+        className={`w-full sm:pb-0 pb-20 flex flex-col min-h-screen lg:ml-80`}
+      >
+        <Navbar />
+        {children}
+      </div>
+    </div>
   );
 }