Skip to content

Commit a077073

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #366 from Richajaishwal0/navbar-fixing
Fixed navbar and theme bugs
2 parents 7afb9bb + 9d1d6e3 commit a077073

File tree

15 files changed

+587
-1152
lines changed

15 files changed

+587
-1152
lines changed

‎docusaurus.config.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ const config: Config = {
2323
// Google Analytics and Theme Scripts
2424
scripts: [
2525
{
26-
src: '/theme-init.js',
27-
async: false, // Load synchronously to prevent flash
26+
src: '/instant-theme.js',
27+
async: false,
2828
},
2929
{
3030
src: 'https://www.googletagmanager.com/gtag/js?id=G-W02Z2VJYCR',
@@ -80,11 +80,12 @@ const config: Config = {
8080
colorMode: {
8181
defaultMode: 'light',
8282
disableSwitch: false,
83-
respectPrefersColorScheme: false,
83+
respectPrefersColorScheme: false, // Let users manually control theme
8484
},
8585
navbar: {
86-
86+
title:"Recode Hive",
8787
logo: {
88+
8889
alt: "RecodeHive Logo",
8990
src: "img/logo.png",
9091
},
@@ -97,7 +98,7 @@ const config: Config = {
9798
{
9899
type: "html",
99100
value: `<div class="grid grid-cols-3 gap-4 w-xl">
100-
<a class="border-r col-span-1" href="/courses/" style="color:black ; ">Tutorials</a>
101+
<a class="border-r col-span-1" href="/courses/">Tutorials</a>
101102
<div class="grid grid-cols-4 col-span-2">
102103
<a href="/docs/sql/intro-sql" class="nav__icons"> <img src="/icons/sql.svg" title="SQL" alt="SQL" /> </a>
103104
<a href="/docs/python/intro-python" class="nav__icons"> <img src="/icons/python.svg" title="Python" alt="Python" /> </a>
@@ -113,7 +114,7 @@ const config: Config = {
113114
{
114115
type: "html",
115116
value: `<div class="grid grid-cols-3 gap-4">
116-
<a class="border-r col-span-1" href="/courses/" style="color:black"> Courses </a>
117+
<a class="border-r col-span-1" href="/courses/"> Courses </a>
117118
<div class="grid grid-cols-4 col-span-2">
118119
<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>
119120
<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>
@@ -128,7 +129,7 @@ const config: Config = {
128129
{
129130
type: "html",
130131
value: `<div class="grid grid-cols-3 gap-4">
131-
<a class="border-r col-span-1" href="#" target="_self" style="color:black"> Interview Prep </a>
132+
<a class="border-r col-span-1" href="#" target="_self"> Interview Prep </a>
132133
<div class="grid grid-cols-1 col-span-2">
133134
<a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-technical" style="display:inline-flex;align-items:center;"></span> Technical</a> <br />
134135
<a href="/interview-prep/" target="_self" class="nav__icons"><span id="nav-behavioral" style="display:inline-flex;align-items:center;"></span> Behavioral</a>

‎src/components/navbar/NavbarIcon.tsx‎

Lines changed: 13 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,20 @@
11
import React from "react";
2-
import {
3-
Book,
4-
Eye,
5-
LayoutDashboard,
6-
DollarSign,
7-
User,
8-
Newspaper,
9-
MoreHorizontal,
10-
Github,
11-
BadgeCheck,
12-
FileText,
13-
Users,
14-
Tv,
15-
Mic,
16-
Lightbulb,
17-
Puzzle,
18-
} from "lucide-react";
2+
import { NAVBAR_CONFIG, type NavbarIconName } from "../../constants/navbarConfig";
193

20-
const iconMap: Record<string, React.ReactNode> = {
21-
Docs: <Book size={18} style={{ verticalAlign: "middle" }} />,
22-
Showcase: <Eye size={18} style={{ verticalAlign: "middle" }} />,
23-
Dashboard: <LayoutDashboard size={18} style={{ verticalAlign: "middle" }} />,
24-
Donate: <DollarSign size={18} style={{ verticalAlign: "middle" }} />,
25-
Devfolio: <User size={18} style={{ verticalAlign: "middle" }} />,
26-
Blogs: <Newspaper size={18} style={{ verticalAlign: "middle" }} />,
27-
More: <MoreHorizontal size={18} style={{ verticalAlign: "middle" }} />,
28-
GitHub: <Github size={18} style={{ verticalAlign: "middle" }} />,
29-
Badges: <BadgeCheck size={18} style={{ verticalAlign: "middle" }} />,
30-
Ebooks: <FileText size={18} style={{ verticalAlign: "middle" }} />,
31-
Roadmap: <LayoutDashboard size={18} style={{ verticalAlign: "middle" }} />,
32-
Community: <Users size={18} style={{ verticalAlign: "middle" }} />,
33-
Broadcast: <Tv size={18} style={{ verticalAlign: "middle" }} />,
34-
Podcast: <Mic size={18} style={{ verticalAlign: "middle" }} />,
35-
Behavioral: <Lightbulb size={18} style={{ verticalAlign: "middle" }} />,
36-
Technical: <Puzzle size={18} style={{ verticalAlign: "middle" }} />,
37-
};
4+
interface NavbarIconProps {
5+
name: NavbarIconName;
6+
}
7+
8+
export default function NavbarIcon({ name }: NavbarIconProps) {
9+
const IconComponent = NAVBAR_CONFIG[name];
10+
11+
if (!IconComponent) {
12+
return null;
13+
}
3814

39-
export default function NavbarIcon({ name }: { name: string }) {
4015
return (
41-
<span
42-
style={{
43-
display: "inline-flex",
44-
alignItems: "center",
45-
gap: 4,
46-
marginRight: 2,
47-
}}
48-
>
49-
{iconMap[name] || null}
16+
<span className="navbar-icon">
17+
<IconComponent size={18} style={{ verticalAlign: "middle" }} />
5018
</span>
5119
);
5220
}

‎src/components/navbar/NavbarIconInjector.tsx‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
import React, { useEffect } from "react";
2+
import { createRoot } from "react-dom/client";
23
import NavbarIcon from "./NavbarIcon";
3-
4-
const iconMap = [
5-
{ id: "nav-docs", name: "Docs" },
6-
{ id: "nav-showcase", name: "Showcase" },
7-
{ id: "nav-dashboard", name: "Dashboard" },
8-
{ id: "nav-donate", name: "Donate" },
9-
{ id: "nav-devfolio", name: "Devfolio" },
10-
{ id: "nav-blogs", name: "Blogs" },
11-
{ id: "nav-more", name: "More" },
12-
// Sub nav items
13-
{ id: "nav-github", name: "GitHub" },
14-
{ id: "nav-badges", name: "Badges" },
15-
{ id: "nav-ebooks", name: "Ebooks" },
16-
{ id: "nav-roadmap", name: "Roadmap" },
17-
{ id: "nav-community", name: "Community" },
18-
{ id: "nav-broadcast", name: "Broadcast" },
19-
{ id: "nav-podcast", name: "Podcast" },
20-
{ id: "nav-technical", name: "Technical" },
21-
{ id: "nav-behavioral", name: "Behavioral" },
22-
];
4+
import { NAVBAR_ICONS, type NavbarIconName } from "../../constants/navbarConfig";
235

246
export default function NavbarIconInjector() {
257
useEffect(() => {
26-
iconMap.forEach(({ id, name }) => {
27-
const el = document.getElementById(id);
28-
if (el && el.childNodes.length === 0) {
29-
import("react-dom").then((ReactDOM) => {
30-
(ReactDOM.default as any).render(<NavbarIcon name={name} />, el);
31-
});
8+
const roots = new Map<string, any>();
9+
10+
NAVBAR_ICONS.forEach((name: NavbarIconName) => {
11+
const id = `nav-${name.toLowerCase()}`;
12+
try {
13+
const el = document.getElementById(id);
14+
if (el && !roots.has(id)) {
15+
const root = createRoot(el);
16+
root.render(<NavbarIcon name={name} />);
17+
roots.set(id, root);
18+
}
19+
} catch (error) {
20+
console.warn(`Failed to inject navbar icon for ${name}:`, error);
3221
}
3322
});
23+
24+
return () => {
25+
roots.forEach((root, id) => {
26+
try {
27+
root.unmount();
28+
} catch (error) {
29+
console.warn(`Failed to unmount navbar icon for ${id}:`, error);
30+
}
31+
});
32+
};
3433
}, []);
34+
3535
return null;
3636
}

‎src/components/navbar/docs.tsx‎

Whitespace-only changes.

‎src/components/ui/FirebaseAuthGithub.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ const FirebaseAuthGithub: React.FC = () => {
5252
<div style={{ textAlign: 'center' }} className='flex justify-center items-center gap-5 p-0'>
5353
<button onClick={handleGithubSignIn} className="bg-black text-white px-4 py-2 rounded flex items-center gap-2">
5454
<svg height="24" width="24" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82a7.65 7.65 0 0 1 2-.27c.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
55-
Sign in with GitHub
55+
<span className="github-text">Sign in with GitHub</span>
5656
</button>
5757
</div>
5858
);

‎src/components/ui/NavbarFirebaseAuthGithub.tsx‎

Lines changed: 7 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,15 @@
1-
import React, { useEffect } from "react";
2-
import ReactDOM from "react-dom/client";
1+
import React, { useEffect, useState } from "react";
2+
import { createPortal } from "react-dom";
33
import FirebaseAuthGithub from "./FirebaseAuthGithub";
44

55
const NavbarFirebaseAuthGithub: React.FC = () => {
6-
useEffect(() => {
7-
const container = document.getElementById("firebase-auth-github-navbar");
8-
if (container && !container.hasChildNodes()) {
9-
const root = ReactDOM.createRoot(container);
10-
root.render(<FirebaseAuthGithub />);
11-
12-
// Force visibility on mobile after rendering
13-
const ensureVisibility = () => {
14-
const navbarItem = container.closest('.navbar__item');
15-
if (navbarItem) {
16-
navbarItem.style.display = 'block';
17-
navbarItem.style.visibility = 'visible';
18-
navbarItem.style.opacity = '1';
19-
}
20-
container.style.display = 'block';
21-
container.style.visibility = 'visible';
22-
container.style.opacity = '1';
23-
};
6+
const [container, setContainer] = useState<HTMLElement | null>(null);
247

25-
// Ensure visibility immediately and after a short delay
26-
ensureVisibility();
27-
setTimeout(ensureVisibility, 100);
28-
setTimeout(ensureVisibility, 500);
29-
}
8+
useEffect(() => {
9+
setContainer(document.getElementById("firebase-auth-github-navbar"));
3010
}, []);
31-
return null;
11+
12+
return container ? createPortal(<FirebaseAuthGithub />, container) : null;
3213
};
3314

3415
export default NavbarFirebaseAuthGithub;

‎src/constants/navbarConfig.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import {
2+
Book, Eye, LayoutDashboard, DollarSign, User, Newspaper,
3+
MoreHorizontal, Github, BadgeCheck, FileText, Users,
4+
Tv, Mic, Lightbulb, Puzzle, Map
5+
} from "lucide-react";
6+
7+
export const NAVBAR_CONFIG = {
8+
Docs: Book,
9+
Showcase: Eye,
10+
Dashboard: LayoutDashboard,
11+
Donate: DollarSign,
12+
Devfolio: User,
13+
Blogs: Newspaper,
14+
More: MoreHorizontal,
15+
GitHub: Github,
16+
Badges: BadgeCheck,
17+
Ebooks: FileText,
18+
Roadmap: Map,
19+
Community: Users,
20+
Broadcast: Tv,
21+
Podcast: Mic,
22+
Technical: Puzzle,
23+
Behavioral: Lightbulb
24+
} as const;
25+
26+
export const NAVBAR_ICONS = Object.keys(NAVBAR_CONFIG) as (keyof typeof NAVBAR_CONFIG)[];
27+
export type NavbarIconName = keyof typeof NAVBAR_CONFIG;

0 commit comments

Comments
 (0)