Skip to content

Enhanced the UI of the Navbar and Fixed the Logo Issue #1740

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Shayan-Bhowmik wants to merge 1 commit into from
Closed

Enhanced the UI of the Navbar and Fixed the Logo Issue #1740

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions docusaurus.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -109,12 +108,12 @@ const config: Config = {
title: "recode hive",
logo: {
alt: "recode hive Logo",
src: "img/logo.png",
src: "/img/logo.png",
},
Comment on lines 108 to 112
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: [
Expand Down Expand Up @@ -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",
},

@sanjay-kv sanjay-kv May 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Shayan-Bhowmik

these icon changes didnt mention in the issue, + the spacing is reduced comparing to the current production.
So i will be rejecting this.

I appreciate the effort, you can make a small readme change and do a PR, i will assign level 2 for it and merge tag this issue as well.
cc @Adez017

@Shayan-Bhowmik Shayan-Bhowmik May 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay on it

{
label: "📺 Broadcast",
label: "◉ Broadcast",
to: "/broadcasts/",
},
{
label: "🎙️ Podcast",
label: "◍ Podcast",
to: "/podcasts/",
},
{
label: "🛍️ Merch Store",
label: "▧ Merch Store",
to: "/merch",
},
],
Expand Down
19 changes: 19 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {

Expand Down Expand Up @@ -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"],
Expand Down
20 changes: 18 additions & 2 deletions src/theme/Navbar/Content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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;
Comment on lines +81 to +84

@sanjay-kv sanjay-kv May 26, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Shayan-Bhowmik


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();

Expand All @@ -90,7 +106,7 @@ export default function NavbarContent(): ReactNode {
<>
{/* Safe wrapper for mobile sidebar toggle */}
<SafeMobileSidebarToggle />
<NavbarLogo />
<NavbarBrand />
<NavbarItems items={leftItems} />
</>
}
Expand Down
Loading