Merge pull request #315 from Richajaishwal0/main

Replaced navibar and dashboard emojis with Professional Icons

Author: sanjay-kv

docusaurus.config.ts

@@ -87,13 +87,13 @@ const config: Config = {
       items: [
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">📚</span> Docs',
+          html: '<span id="nav-docs"></span> Docs',
           position: "left",
           items: [
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4 w-xl">
-                <a class="border-r col-span-1" href="/courses/">Tutorials</a>
+                <a class="border-r col-span-1" href="/courses/" style="color:black ; ">Tutorials</a>
                 <div class="grid grid-cols-4 col-span-2">
                   <a href="/docs/category/sql/" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
                   <a href="/docs/category/python/" class="nav__icons"> <img src="/icons/python.svg" title="Python" alt="Python" /> </a>
@@ -109,7 +109,7 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
-                <a class="border-r col-span-1" href="/courses/"> Courses </a>
+                <a class="border-r col-span-1" href="/courses/" style="color:black"> 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>
@@ -124,73 +124,73 @@ const config: Config = {
             {
               type: "html",
               value: `<div class="grid grid-cols-3 gap-4">
-                <a  class="border-r col-span-1" href="#" target="_self"> Interview Prep </a>
+                <a  class="border-r col-span-1" href="#" target="_self" style="color:black"> Interview Prep </a>
                 <div class="grid grid-cols-1 col-span-2">
-                  <a href="/interview-prep/" target="_self" class="nav__icons"> 🧩Technical </a> <br />
-                  <a href="/interview-prep/" target="_self" class="nav__icons"> 💡Behavioral </a>
+                  <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>
                 </div>
               </div>`,
             },
           ],
         },
         {
           to: "/showcase",
-          html: '<span class="nav-emoji">🌍</span> Showcase',
+          html: '<span id="nav-showcase"></span> Showcase',
           position: "left",
         },
         {
           to: "/dashboard",
-          html: '<span class="nav-emoji">📊</span> Dashboard',
+          html: '<span id="nav-dashboard"></span> Dashboard',
           position: "left",
         },
         {
           to: "/our-sponsors/",
-          html: '<span class="nav-emoji">💰</span> Donate',
+          html: '<span id="nav-donate"></span> Donate',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">👩🏻‍💻</span> Devfolio',
+          html: '<span id="nav-devfolio"></span> Devfolio',
           position: "left",
           items: [
             {
-              label: "💻GitHub Profiles",
+              html: '<span id="nav-github" style="display:inline-flex;align-items:center;"></span> GitHub Profiles',
               to: "https://dev.recodehive.com/devfolio",
             },
             {
-              label: "🎖️ GitHub Badges",
+              html: '<span id="nav-badges" style="display:inline-flex;align-items:center;"></span> GitHub Badges',
               to: "/badges/github-badges/",
             }, 
           ],
         },
         {
           to: "/blogs",
-          html: '<span class="nav-emoji">📰</span> Blogs',
+          html: '<span id="nav-blogs"></span> Blogs',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">🔗</span> More',
+          html: '<span id="nav-more"></span> More',
           position: "left",
           items: [
             {
-              label: "📚 E-books",
+              html: '<span id="nav-ebooks" style="display:inline-flex;align-items:center;"></span> E-books',
               to: "https://learn.recodehive.com/datascience",
             },
             {
-              label: "🛣️ Roadmap",
+              html: '<span id="nav-roadmap" style="display:inline-flex;align-items:center;"></span> Roadmap',
               to: "#",
             },
             {
-              label: "🤝 Community",
+              html: '<span id="nav-community" style="display:inline-flex;align-items:center;"></span> Community',
               to: "/community",
             },
             {
-              label: "📺 Broadcast",
+              html: '<span id="nav-broadcast" style="display:inline-flex;align-items:center;"></span> Broadcast',
               to: "/broadcasts/",
             },
             {
-              label: "🎙️ Podcast",
+              html: '<span id="nav-podcast" style="display:inline-flex;align-items:center;"></span> Podcast',
               to: "/podcasts/",
             },
           ],

src/components/CustomSidebar.module.css

@@ -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/CustomSidebar.tsx

@@ -0,0 +1,36 @@
+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" },
+  { id: "nav-technical", name: "Technical" },
+  { id: "nav-behavioral", name: "Behavioral" },
+];
+
+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;
+}