Navbar

Component

For Dark - Light Mode

ThemeContext.tsx:

'use client';
  
import React, { createContext, useContext, useState, useEffect } from 'react';
 
type Theme = 'light' | 'dark';
 
interface ThemeContextType {
theme: Theme;
toggleTheme: () => void;
}
 
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
 
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [theme, setTheme] = useState<Theme>('dark');
 
useEffect(() => {
  const savedTheme = localStorage.getItem('theme') as Theme | null;
  if (savedTheme) {
    setTheme(savedTheme);
  }
}, []);
 
useEffect(() => {
  document.documentElement.classList.toggle('dark', theme === 'dark');
  localStorage.setItem('theme', theme);
}, [theme]);
 
const toggleTheme = () => {
  setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
};
 
return (
  <ThemeContext.Provider value={{ theme, toggleTheme }}>
    {children}
  </ThemeContext.Provider>
);
};
 
export const useTheme = () => {
const context = useContext(ThemeContext);
if (context === undefined) {
  throw new Error('useTheme must be used within a ThemeProvider');
}
return context;
};

layout.tsx:

import ThemeProvider from 'your-path';
 
export default function Layout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={inter.className}>
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Dependencies

npmi lucide-react

Usage Methods

Pass navItems as a prop to allow customisation of menu links.
Use a JSON file for navItems data to facilitate editing and extending links.
Outsource the search component to a separate component to improve modularity.
Create a separate MobileMenu component to manage the mobile menu and improve code readability.
Pass the theme as a prop and manage it in a higher-level component to make the component more flexible.
Handle clicks outside the mobile menu in a custom hook to make the code cleaner and reusable.
Allow customisation of icons via props to allow different icons to be used.
Add a prop to pass callback functions for menu and theme events to allow customised event handling.

Navbar

Component

For Dark - Light Mode

Dependencies

Usage Methods

On this page