I am a newbie at coding, i am trying create my portfolio website. Although i am familiar with react and tailwind, i don’t have the knowledge to implement the exact functionalities i want.

So i used Claude AI for assistance. It did a pretty good job with everything else, except the Dark mode functionality doesnt work when i click the dark mode icon(highlighted in the image belo) until i comment out darkMode: 'class', in the tailwind.config.js file

enter image description here

The App.jsx file

import React, { useState, useEffect } from 'react';
import Navbar from './Navbar';

const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);

  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark');
    }
  }, [isDarkMode]);

  const toggleDarkMode = () => {
    setIsDarkMode(!isDarkMode);
  };

  return (
    <div className="min-h-screen bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
      <Navbar toggleDarkMode={toggleDarkMode} isDarkMode={isDarkMode} />
      {/* Rest of your app content */}
    </div>
  );
};

export default App;

The Navbar.jsx file

import React, { useState } from 'react';
import Sidebar from './Sidebar';

const Navbar = ({ toggleDarkMode, isDarkMode }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  return (
    <nav className="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white p-4">
      <div className="container mx-auto flex items-center justify-between">
        {/* Left section */}
        <div className="flex items-center space-x-4">
          <button 
            className="text-2xl" 
            aria-label="Menu" 
            onClick={() => setIsSidebarOpen(true)}
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>

        {/* Middle section - Profile name */}
        <div className="text-xl font-bold">Hussaini A</div>

        {/* Right section */}
        <div className="flex items-center space-x-2 md:space-x-4">
          <button 
            className="p-2 rounded-full bg-gray-200 dark:bg-gray-700" 
            aria-label="Toggle dark mode"
            onClick={toggleDarkMode}
          >
            {isDarkMode ? (
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            ) : (
              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
              </svg>
            )}
          </button>
          <button className="bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium">
            Follow
          </button>
        </div>
      </div>
      
      <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
    </nav>
  );
};

export default Navbar;

The Sidebar.jsx file

import React from 'react';

const Sidebar = ({ isOpen, onClose }) => {
  return (
    <div 
      className={`fixed top-0 left-0 h-full w-64 bg-white dark:bg-gray-800 p-4 transform transition-transform duration-300 ease-in-out ${
        isOpen ? 'translate-x-0' : '-translate-x-full'
      }`}
    >
      <button onClick={onClose} className="absolute top-4 right-4 text-gray-600 dark:text-gray-300">
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
      
      <div className="flex items-center mb-8">
        <img src="profile-placeholder.jpg" alt="Hussaini A" className="w-12 h-12 rounded-full mr-4" />
        <span className="text-lg font-bold dark:text-white">Hussaini A</span>
      </div>

      <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4">BLOG MENU</h3>
      <ul className="space-y-2">
        {['Home', 'React JS', 'GitHub', 'About', 'Badges', 'Newsletter'].map((item) => (
          <li key={item} className="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer">
            {item}
          </li>
        ))}
      </ul>

      <h3 className="text-sm font-semibold text-gray-500 dark:text-gray-400 mt-8 mb-4">BLOG SOCIALS</h3>
      <div className="flex space-x-4">
        {['github', 'globe', 'codepen', 'linkedin', 'rss'].map((icon) => (
          <a key={icon} href="#" className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400">
            <i className={`fab fa-${icon}`}></i>
          </a>
        ))}
      </div>
    </div>
  );
};

export default Sidebar;

The tailwind.config.js file

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: 'class',
  theme: {
    extend: {
    },
  },
  plugins: [],
}