From 549cb586c332c9eef7c4ad667f28755c396b74d9 Mon Sep 17 00:00:00 2001 From: Shayan Date: Mon, 25 May 2026 23:09:44 +0530 Subject: [PATCH] Enhanced the UI of the Navbar --- docusaurus.config.ts | 33 +++++++++++++++--------------- src/css/custom.css | 19 +++++++++++++++++ src/theme/Navbar/Content/index.tsx | 20 ++++++++++++++++-- 3 files changed, 53 insertions(+), 19 deletions(-) diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 43a3388e..35c3ca50 100644 --- a/docusaurus.config.ts +++ b/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: 'πŸ“š Docs', + html: ' Docs', position: "left", to: "/docs/", items: [ @@ -165,66 +164,66 @@ const config: Config = { }, { to: "/showcase", - html: '🌍 Showcase', + html: ' Showcase', position: "left", }, { to: "/dashboard", - html: 'πŸ“Š Dashboard', + html: ' Dashboard', position: "left", }, { to: "/our-sponsors/", - html: 'πŸ’° Donate', + html: ' Donate', position: "left", }, { type: "dropdown", - html: 'πŸ‘©πŸ»β€πŸ’» Devfolio', + html: ' 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: 'πŸ“° Blogs', + html: ' Blogs', position: "left", }, { type: "dropdown", - html: 'πŸ”— More', + html: ' 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", }, ], diff --git a/src/css/custom.css b/src/css/custom.css index cd898991..4e32f60d 100644 --- a/src/css/custom.css +++ b/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"], diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx index 86e71479..114406d7 100644 --- a/src/theme/Navbar/Content/index.tsx +++ b/src/theme/Navbar/Content/index.tsx @@ -1,4 +1,7 @@ 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"; @@ -6,7 +9,6 @@ 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 ( + + {logoAlt} + {siteConfig.title} + + ); +} + export default function NavbarContent(): ReactNode { const items = useNavbarItems(); @@ -90,7 +106,7 @@ export default function NavbarContent(): ReactNode { <> {/* Safe wrapper for mobile sidebar toggle */} - + }