Fixed navbar and theme bugs

docusaurus.config.ts

@@ -23,8 +23,8 @@ const config: Config = {
   // Google Analytics and Theme Scripts
   scripts: [
     {
-      src: '/theme-init.js',
-      async: false, // Load synchronously to prevent flash
+      src: '/instant-theme.js',
+      async: false,
     },
     {
       src: 'https://www.googletagmanager.com/gtag/js?id=G-W02Z2VJYCR',
@@ -80,11 +80,12 @@ const config: Config = {
     colorMode: {
       defaultMode: 'light',
       disableSwitch: false,
-      respectPrefersColorScheme: false,
+      respectPrefersColorScheme: false, // Let users manually control theme
     },
     navbar: {
-
+       title:"Recode Hive",
       logo: {
+
         alt: "RecodeHive Logo",
         src: "img/logo.png",
       },
@@ -97,7 +98,7 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4 w-xl">
-                <a class="border-r col-span-1" href="/courses/" style="color:black ; ">Tutorials</a>
+                <a class="border-r col-span-1" href="/courses/">Tutorials</a>
                 <div class="grid grid-cols-4 col-span-2">
                   <a href="/docs/sql/intro-sql" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
                   <a href="/docs/python/intro-python" class="nav__icons"> <img src="/icons/python.svg" title="Python" alt="Python" /> </a>
@@ -113,7 +114,7 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
-                <a class="border-r col-span-1" href="/courses/" style="color:black"> Courses </a>
+                <a class="border-r col-span-1" href="/courses/"> Courses </a>
                 <div class="grid grid-cols-4 col-span-2">
                   <a href="https://www.youtube.com/watch?v=GrTV59Y84S8&list=PLrLTYhoDFx-kiuFiGQqVpYYZ56pIhUW63&ab_channel=RecodeHive" class="nav__icons"> <img src="/icons/git.svg" alt="git" /> </a>
                   <a href="https://www.youtube.com/watch?v=O1ahDsq8DU0&list=PLrLTYhoDFx-k62rLLajSB-jeqKwLkDrkF&ab_channel=RecodeHive" class="nav__icons"> <img src="/icons/postman.svg" alt="Postman" /> </a>
@@ -128,7 +129,7 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
-                <a  class="border-r col-span-1" href="#" target="_self" style="color:black"> Interview Prep </a>
+                <a  class="border-r col-span-1" href="#" target="_self"> Interview Prep </a>
                 <div class="grid grid-cols-1 col-span-2">
                   <a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-technical" style="display:inline-flex;align-items:center;"></span> Technical</a> <br />
                   <a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-behavioral" style="display:inline-flex;align-items:center;"></span> Behavioral</a>

src/components/navbar/NavbarIcon.tsx

@@ -1,52 +1,20 @@
 import React from "react";
-import {
-  Book,
-  Eye,
-  LayoutDashboard,
-  DollarSign,
-  User,
-  Newspaper,
-  MoreHorizontal,
-  Github,
-  BadgeCheck,
-  FileText,
-  Users,
-  Tv,
-  Mic,
-  Lightbulb,
-  Puzzle,
-} from "lucide-react";
+import { NAVBAR_CONFIG, type NavbarIconName } from "../../constants/navbarConfig";
 
-const iconMap: Record<string, React.ReactNode> = {
-  Docs: <Book size={18} style={{ verticalAlign: "middle" }} />,
-  Showcase: <Eye size={18} style={{ verticalAlign: "middle" }} />,
-  Dashboard: <LayoutDashboard size={18} style={{ verticalAlign: "middle" }} />,
-  Donate: <DollarSign size={18} style={{ verticalAlign: "middle" }} />,
-  Devfolio: <User size={18} style={{ verticalAlign: "middle" }} />,
-  Blogs: <Newspaper size={18} style={{ verticalAlign: "middle" }} />,
-  More: <MoreHorizontal size={18} style={{ verticalAlign: "middle" }} />,
-  GitHub: <Github size={18} style={{ verticalAlign: "middle" }} />,
-  Badges: <BadgeCheck size={18} style={{ verticalAlign: "middle" }} />,
-  Ebooks: <FileText size={18} style={{ verticalAlign: "middle" }} />,
-  Roadmap: <LayoutDashboard size={18} style={{ verticalAlign: "middle" }} />,
-  Community: <Users size={18} style={{ verticalAlign: "middle" }} />,
-  Broadcast: <Tv size={18} style={{ verticalAlign: "middle" }} />,
-  Podcast: <Mic size={18} style={{ verticalAlign: "middle" }} />,
-  Behavioral: <Lightbulb size={18} style={{ verticalAlign: "middle" }} />,
-  Technical: <Puzzle size={18} style={{ verticalAlign: "middle" }} />,
-};
+interface NavbarIconProps {
+  name: NavbarIconName;
+}
+
+export default function NavbarIcon({ name }: NavbarIconProps) {
+  const IconComponent = NAVBAR_CONFIG[name];
+
+  if (!IconComponent) {
+    return null;
+  }
 
-export default function NavbarIcon({ name }: { name: string }) {
   return (
-    <span
-      style={{
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 4,
-        marginRight: 2,
-      }}
-    >
-      {iconMap[name] || null}
+    <span className="navbar-icon">
+      <IconComponent size={18} style={{ verticalAlign: "middle" }} />
     </span>
   );
 }

src/components/navbar/NavbarIconInjector.tsx

@@ -1,36 +1,36 @@
 import React, { useEffect } from "react";
+import { createRoot } from "react-dom/client";
 import NavbarIcon from "./NavbarIcon";
-
-const iconMap = [
-  { id: "nav-docs", name: "Docs" },
-  { id: "nav-showcase", name: "Showcase" },
-  { id: "nav-dashboard", name: "Dashboard" },
-  { id: "nav-donate", name: "Donate" },
-  { id: "nav-devfolio", name: "Devfolio" },
-  { id: "nav-blogs", name: "Blogs" },
-  { id: "nav-more", name: "More" },
-  // Sub nav items
-  { id: "nav-github", name: "GitHub" },
-  { id: "nav-badges", name: "Badges" },
-  { id: "nav-ebooks", name: "Ebooks" },
-  { id: "nav-roadmap", name: "Roadmap" },
-  { id: "nav-community", name: "Community" },
-  { id: "nav-broadcast", name: "Broadcast" },
-  { id: "nav-podcast", name: "Podcast" },
-  { id: "nav-technical", name: "Technical" },
-  { id: "nav-behavioral", name: "Behavioral" },
-];
+import { NAVBAR_ICONS, type NavbarIconName } from "../../constants/navbarConfig";
 
 export default function NavbarIconInjector() {
   useEffect(() => {
-    iconMap.forEach(({ id, name }) => {
-      const el = document.getElementById(id);
-      if (el && el.childNodes.length === 0) {
-        import("react-dom").then((ReactDOM) => {
-          (ReactDOM.default as any).render(<NavbarIcon name={name} />, el);
-        });
+    const roots = new Map<string, any>();
+
+    NAVBAR_ICONS.forEach((name: NavbarIconName) => {
+      const id = `nav-${name.toLowerCase()}`;
+      try {
+        const el = document.getElementById(id);
+        if (el && !roots.has(id)) {
+          const root = createRoot(el);
+          root.render(<NavbarIcon name={name} />);
+          roots.set(id, root);
+        }
+      } catch (error) {
+        console.warn(`Failed to inject navbar icon for ${name}:`, error);
       }
     });
+
+    return () => {
+      roots.forEach((root, id) => {
+        try {
+          root.unmount();
+        } catch (error) {
+          console.warn(`Failed to unmount navbar icon for ${id}:`, error);
+        }
+      });
+    };
   }, []);
+
   return null;
 }

src/components/ui/FirebaseAuthGithub.tsx

@@ -52,7 +52,7 @@ const FirebaseAuthGithub: React.FC = () => {
     <div style={{ textAlign: 'center' }} className='flex justify-center items-center gap-5 p-0'>
       <button onClick={handleGithubSignIn} className="bg-black text-white px-4 py-2 rounded flex items-center gap-2">
         <svg height="24" width="24" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
-        Sign in with GitHub
+        <span className="github-text">Sign in with GitHub</span>
       </button>
     </div>
   );

src/components/ui/NavbarFirebaseAuthGithub.tsx

@@ -1,34 +1,15 @@
-import React, { useEffect } from "react";
-import ReactDOM from "react-dom/client";
+import React, { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import FirebaseAuthGithub from "./FirebaseAuthGithub";
 
 const NavbarFirebaseAuthGithub: React.FC = () => {
-  useEffect(() => {
-    const container = document.getElementById("firebase-auth-github-navbar");
-    if (container && !container.hasChildNodes()) {
-      const root = ReactDOM.createRoot(container);
-      root.render(<FirebaseAuthGithub />);
-
-      // Force visibility on mobile after rendering
-      const ensureVisibility = () => {
-        const navbarItem = container.closest('.navbar__item');
-        if (navbarItem) {
-          navbarItem.style.display = 'block';
-          navbarItem.style.visibility = 'visible';
-          navbarItem.style.opacity = '1';
-        }
-        container.style.display = 'block';
-        container.style.visibility = 'visible';
-        container.style.opacity = '1';
-      };
+  const [container, setContainer] = useState<HTMLElement | null>(null);
 
-      // Ensure visibility immediately and after a short delay
-      ensureVisibility();
-      setTimeout(ensureVisibility, 100);
-      setTimeout(ensureVisibility, 500);
-    }
+  useEffect(() => {
+    setContainer(document.getElementById("firebase-auth-github-navbar"));
   }, []);
-  return null;
+
+  return container ? createPortal(<FirebaseAuthGithub />, container) : null;
 };
 
 export default NavbarFirebaseAuthGithub;

src/constants/navbarConfig.ts

@@ -0,0 +1,27 @@
+import {
+  Book, Eye, LayoutDashboard, DollarSign, User, Newspaper,
+  MoreHorizontal, Github, BadgeCheck, FileText, Users,
+  Tv, Mic, Lightbulb, Puzzle, Map
+} from "lucide-react";
+
+export const NAVBAR_CONFIG = {
+  Docs: Book,
+  Showcase: Eye,
+  Dashboard: LayoutDashboard,
+  Donate: DollarSign,
+  Devfolio: User,
+  Blogs: Newspaper,
+  More: MoreHorizontal,
+  GitHub: Github,
+  Badges: BadgeCheck,
+  Ebooks: FileText,
+  Roadmap: Map,
+  Community: Users,
+  Broadcast: Tv,
+  Podcast: Mic,
+  Technical: Puzzle,
+  Behavioral: Lightbulb
+} as const;
+
+export const NAVBAR_ICONS = Object.keys(NAVBAR_CONFIG) as (keyof typeof NAVBAR_CONFIG)[];
+export type NavbarIconName = keyof typeof NAVBAR_CONFIG;