updated navbar

Author: Richajaishwal0

src/components/navbar/NavbarIcon.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import {
+  Book,
+  Eye,
+  LayoutDashboard,
+  DollarSign,
+  User,
+  Newspaper,
+  MoreHorizontal,
+  Github,
+  BadgeCheck,
+  FileText,
+  Users,
+  Tv,
+  Mic,
+  Lightbulb,
+  Puzzle,
+} from "lucide-react";
+
+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" }} />,
+};
+
+export default function NavbarIcon({ name }: { name: string }) {
+  return (
+    <span
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        marginRight: 2,
+      }}
+    >
+      {iconMap[name] || null}
+    </span>
+  );
+}

src/components/navbar/NavbarIconInjector.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+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" },
+];
+
+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);
+        });
+      }
+    });
+  }, []);
+  return null;
+}