Enhanced the UI of the Navbar

Author: Shayan-Bhowmik

docusaurus.config.ts

@@ -7,7 +7,6 @@ dotenv.config({ path: ".env.local" });
 dotenv.config();
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
-
 const algoliaAppId = process.env.ALGOLIA_APP_ID?.trim();
 const algoliaSearchApiKey = process.env.ALGOLIA_SEARCH_API_KEY?.trim();
 const algoliaIndexName = process.env.ALGOLIA_INDEX_NAME?.trim();
@@ -109,12 +108,12 @@ const config: Config = {
       title: "recode hive",
       logo: {
         alt: "recode hive Logo",
-        src: "img/logo.png",
+        src: "/img/logo.png",
       },
       items: [
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">📚</span> Docs',
+          html: '<span class="nav-symbol" aria-hidden="true">🗀</span> Docs',
           position: "left",
           to: "/docs/",
           items: [
@@ -165,66 +164,66 @@ const config: Config = {
         },
         {
           to: "/showcase",
-          html: '<span class="nav-emoji">🌍</span> Showcase',
+          html: '<span class="nav-symbol" aria-hidden="true">◇</span> Showcase',
           position: "left",
         },
         {
           to: "/dashboard",
-          html: '<span class="nav-emoji">📊</span> Dashboard',
+          html: '<span class="nav-symbol" aria-hidden="true">⊞</span> Dashboard',
           position: "left",
         },
         {
           to: "/our-sponsors/",
-          html: '<span class="nav-emoji">💰</span> Donate',
+          html: '<span class="nav-symbol" aria-hidden="true">$</span> Donate',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">👩🏻‍💻</span> Devfolio',
+          html: '<span class="nav-symbol" aria-hidden="true">⌘</span> Devfolio',
           position: "left",
           items: [
             {
-              label: "💻GitHub Profiles",
+              label: "◆ GitHub Profiles",
               to: "https://dev.recodehive.com/devfolio",
             },
             {
-              label: "🎖️ GitHub Badges",
+              label: "▣ GitHub Badges",
               to: "/badges/github-badges/",
             },
           ],
         },
         {
           to: "/blogs",
-          html: '<span class="nav-emoji">📰</span> Blogs',
+          html: '<span class="nav-symbol" aria-hidden="true">✦</span> Blogs',
           position: "left",
         },
         {
           type: "dropdown",
-          html: '<span class="nav-emoji">🔗</span> More',
+          html: '<span class="nav-symbol" aria-hidden="true">⋯</span> More',
           position: "left",
           items: [
             {
-              label: "📚 E-books",
+              label: "▸ E-books",
               to: "/ebooks",
             },
             {
-              label: "🗺️ Roadmap",
+              label: "➜ Roadmap",
               to: "/roadmaps",
             },
             {
-              label: "🤝 Community",
+              label: "◌ Community",
               to: "/community",
             },
             {
-              label: "📺 Broadcast",
+              label: "◉ Broadcast",
               to: "/broadcasts/",
             },
             {
-              label: "🎙️ Podcast",
+              label: "◍ Podcast",
               to: "/podcasts/",
             },
             {
-              label: "🛍️ Merch Store",
+              label: "▧ Merch Store",
               to: "/merch",
             },
           ],

src/css/custom.css

@@ -617,6 +617,17 @@ body {
     0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.5);
 }
 
+/* Dark-mode-only navbar logo treatment so the brand mark stays visible on black navbars. */
+[data-theme="dark"] .navbar__logo {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 9999px;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.14),
+    0 8px 18px rgba(0, 0, 0, 0.35);
+  padding: 0.18rem;
+  filter: brightness(1.08) contrast(1.05);
+}
+
 /* =====  SECTION 10: DESKTOP NAVBAR ENHANCEMENTS ===== */
 @media (min-width: 1300px) {
 
@@ -811,6 +822,14 @@ body {
   border-radius: 50%;
 }
 
+.nav-symbol {
+  display: inline-block;
+  margin-right: 0.35rem;
+  font-size: 0.95em;
+  line-height: 1;
+  font-weight: 700;
+}
+
 /* Ensure monochrome icons (GitHub, Next.js) are visible in dark mode */
 [data-theme="dark"] .dropdown-content .nav__icons img[alt="GitHub"],
 [data-theme="dark"] .dropdown-content .nav__icons img[alt="Nextjs"],

src/theme/Navbar/Content/index.tsx

@@ -1,12 +1,14 @@
 import React, { type ReactNode, useMemo } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { useThemeConfig, ErrorCauseBoundary } from "@docusaurus/theme-common";
 import { splitNavbarItems } from "@docusaurus/theme-common/internal";
 import NavbarItem, { type Props as NavbarItemConfig } from "@theme/NavbarItem";
 import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
 import AlgoliaSiteSearch from "@site/src/components/AlgoliaSiteSearch";
 // import SearchBar from '@theme/SearchBar';
 import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
-import NavbarLogo from "@theme/Navbar/Logo";
 // import NavbarSearch from '@theme/Navbar/Search';
 
 // Safe wrapper component that handles the mobile sidebar toggle
@@ -75,6 +77,20 @@ function NavbarContentLayout({
   );
 }
 
+function NavbarBrand(): ReactNode {
+  const { siteConfig } = useDocusaurusContext();
+  const logoConfig = siteConfig.themeConfig.navbar.logo;
+  const logoSrc = useBaseUrl(logoConfig?.src ?? "img/logo.png");
+  const logoAlt = logoConfig?.alt ?? siteConfig.title;
+
+  return (
+    <Link className="navbar__brand" to={useBaseUrl("/")} aria-label={siteConfig.title}>
+      <img className="navbar__logo" src={logoSrc} alt={logoAlt} />
+      <strong className="navbar__title">{siteConfig.title}</strong>
+    </Link>
+  );
+}
+
 export default function NavbarContent(): ReactNode {
   const items = useNavbarItems();
 
@@ -90,7 +106,7 @@ export default function NavbarContent(): ReactNode {
         <>
           {/* Safe wrapper for mobile sidebar toggle */}
           <SafeMobileSidebarToggle />
-          <NavbarLogo />
+          <NavbarBrand />
           <NavbarItems items={leftItems} />
         </>
       }