Enhanced the UI of the Navbar and Fixed the Logo Issue by Shayan-Bhowmik · Pull Request #1740 · recodehive/recode-website

Shayan-Bhowmik · 2026-05-25T17:47:51Z

Description

This PR ensures the site logo displays correctly in dark mode and replaces navbar emoji labels with monochrome glyphs for a more professional, theme-consistent header. It also fixes a stray parse error in docusaurus.config.ts that prevented the dev server from starting.

Type of Change

Bug fix (non-breaking change that fixes an issue)
UI/UX improvement (design, layout, or styling updates)
New feature (e.g., new page, component, or functionality)
Performance optimization (e.g., code splitting, caching)
Documentation update (README, contribution guidelines, etc.)
Other (please specify):

Changes Made

Updated the site logo path to use an absolute static path (/img/logo.png) so it resolves on all routes.
Replaced the theme-wrapped NavbarLogo with an explicit brand render in src/theme/Navbar/Content/index.tsx to ensure consistent mounting across pages.
Added dark-mode-only CSS rules in src/css/custom.css to improve logo contrast without altering light mode appearance.
Replaced emoji labels in the navbar with monochrome glyphs (via html navbar labels in docusaurus.config.ts) and added .nav-symbol CSS for spacing and alignment.
Removed a stray, parse-breaking line from docusaurus.config.ts that caused docusaurus start to fail.
Deleted the unintended/untracked src/theme/Navbar/Logo/index.tsx file to avoid duplicate/conflicting logo components.

Modified files:

docusaurus.config.ts
src/theme/Navbar/Content/index.tsx
src/css/custom.css
Deleted: src/theme/Navbar/Logo/index.tsx (cleanup)

Dependencies

No new runtime dependencies were added.
No package or configuration version changes required for this PR.

Checklist

My code follows the style guidelines of this project.
I have tested my changes across major browsers and devices.
My changes do not generate new console warnings or errors.
I ran npm run build and attached screenshot(s) in this PR.

This is already assigned Issue to me, not an unassigned issue.

vercel · 2026-05-25T17:47:55Z

@Shayan-Bhowmik is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

github-actions · 2026-05-25T17:47:57Z

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

Get free Consultation use code recode50 to get free: Mentorship for free.
Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.
Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

github-actions · 2026-05-25T17:48:04Z

✅ Synchronized metadata from Issue #1715:

Labels: enhancement, level 1, recode, high priority, medium, gssoc:approved, type:docs
Milestone: None

Copilot

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

This PR customizes the Docusaurus navbar branding and visual styling, including a custom brand component, dark-mode logo treatment, and updated navbar item symbols.

Changes:

Replaced the default @theme/Navbar/Logo with a custom NavbarBrand component.
Added dark-mode-only CSS styling for the navbar logo and introduced a .nav-symbol helper class.
Updated docusaurus.config.ts navbar item markup to use symbol-based prefixes and adjusted the configured logo src.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File	Description
src/theme/Navbar/Content/index.tsx	Adds a custom navbar brand component and swaps it in for the theme logo component.
src/css/custom.css	Adds dark-mode styling around the logo and a `.nav-symbol` class for navbar item prefixes.
docusaurus.config.ts	Updates navbar item HTML/labels to use symbol prefixes and changes logo `src` path.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+  const logoAlt = logoConfig?.alt ?? siteConfig.title;
+
+  return (
+    <Link className="navbar__brand" to={useBaseUrl("/")} aria-label={siteConfig.title}>


sanjay-kv · 2026-05-26T00:35:31Z

+  const { siteConfig } = useDocusaurusContext();
+  const logoConfig = siteConfig.themeConfig.navbar.logo;
+  const logoSrc = useBaseUrl(logoConfig?.src ?? "img/logo.png");
+  const logoAlt = logoConfig?.alt ?? siteConfig.title;


@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>


      title: "recode hive",
      logo: {
        alt: "recode hive Logo",
-        src: "img/logo.png",
+        src: "/img/logo.png",
      },


          items: [
            {
-              label: "💻GitHub Profiles",
+              label: "◆ GitHub Profiles",


            },
            {
-              label: "🎖️ GitHub Badges",
+              label: "▣ GitHub Badges",


vercel · 2026-05-26T00:30:19Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
recode-website	Ready	Preview, Comment	May 26, 2026 12:31am

sanjay-kv · 2026-05-26T00:35:31Z

+  const { siteConfig } = useDocusaurusContext();
+  const logoConfig = siteConfig.themeConfig.navbar.logo;
+  const logoSrc = useBaseUrl(logoConfig?.src ?? "img/logo.png");
+  const logoAlt = logoConfig?.alt ?? siteConfig.title;


@Shayan-Bhowmik

sanjay-kv · 2026-05-26T00:36:49Z

-              label: "🤝 Community",
+              label: "◌ Community",
              to: "/community",
            },


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

Adez017 · 2026-05-29T05:02:15Z

As discussed above closing the PR @sanjay-kv

Enhanced the UI of the Navbar

549cb58

Copilot AI review requested due to automatic review settings May 25, 2026 17:47

github-actions Bot added in-review The current changes are in review and would need approval and testing before merging level 1 10 points recode this is label for leaderboard labels May 25, 2026

github-actions Bot added this to the recode:launch 3.0 milestone May 25, 2026

github-actions Bot added enhancement New feature or request gssoc:approved gssoc label high priority gssoc26 label medium gssoc26 label type:docs gssoc label 5pts labels May 25, 2026

Copilot AI reviewed May 25, 2026

View reviewed changes

sanjay-kv assigned Shayan-Bhowmik May 26, 2026

sanjay-kv added this to @recode-web May 26, 2026

sanjay-kv added level 3 50 points and removed level 1 10 points labels May 26, 2026

vercel Bot deployed to Preview May 26, 2026 00:31 View deployment

sanjay-kv requested changes May 26, 2026

View reviewed changes

Shayan-Bhowmik requested a review from sanjay-kv May 26, 2026 10:08

Adez017 closed this May 29, 2026

github-project-automation Bot moved this to Done in @recode-web May 29, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

Enhanced the UI of the Navbar and Fixed the Logo Issue#1740
Shayan-Bhowmik wants to merge 1 commit into
recodehive:mainfrom
Shayan-Bhowmik:Navbar-UI

Shayan-Bhowmik commented May 25, 2026

Uh oh!

vercel Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

sanjay-kv May 26, 2026

Uh oh!

vercel Bot commented May 26, 2026 •

edited

Loading

Uh oh!

sanjay-kv May 26, 2026

Uh oh!

sanjay-kv May 26, 2026

Uh oh!

Shayan-Bhowmik May 26, 2026

Uh oh!

Adez017 commented May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

Shayan-Bhowmik commented May 25, 2026

Description

Type of Change

Changes Made

Dependencies

Checklist

Uh oh!

vercel Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

github-actions Bot commented May 25, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

sanjay-kv May 26, 2026

Choose a reason for hiding this comment

Uh oh!

vercel Bot commented May 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sanjay-kv May 26, 2026

Choose a reason for hiding this comment

Uh oh!

sanjay-kv May 26, 2026

Choose a reason for hiding this comment

Uh oh!

Shayan-Bhowmik May 26, 2026

Choose a reason for hiding this comment

Uh oh!

Adez017 commented May 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented May 26, 2026 •

edited

Loading