theming and header

package.json

@@ -14,6 +14,7 @@
     "framer-motion": "^11.16.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-icons": "^5.4.0",
     "react-router": "^7.1.1",
     "tailwind-merge": "^2.6.0"
   },

src/App.jsx

@@ -1,18 +1,23 @@
 import { Route, Routes } from "react-router"
 import HomePage from "./pages/home"
-import Header from"./components/header"
+import Header from "./components/header"
 import Footer from "./components/footer"
 import PortfolioPage from "./pages/portfolio"
+import { ThemeProvider } from "./context/ThemeContext"
 
 export default function App() {
 	return (
 		<div>
-			<Header />
-			<Routes>
-				<Route path="/" element={<HomePage />} />
-				<Route path="/portfolio" element={<PortfolioPage />} />
-			</Routes>
-			<Footer />
+			<ThemeProvider>
+				<Header />
+				<div className="pt-[65px]">
+					<Routes>
+						<Route path="/" element={<HomePage />} />
+						<Route path="/portfolio" element={<PortfolioPage />} />
+					</Routes>
+				</div>
+				<Footer />
+			</ThemeProvider>
 		</div>
 	)
 }

src/components/header/index.jsx

@@ -1,5 +1,95 @@
-export default function Header () {
+import { Link } from "react-router"
+import logo from "../../assets/images/temp-logo.png"
+import { FiCamera } from "react-icons/fi";
+import { FaRegUser } from "react-icons/fa";
+import { AiOutlineClose, AiOutlineMenu } from 'react-icons/ai'
+import { useState } from "react";
+import { useTheme } from "../../context/ThemeContext"
+
+export default function Header() {
+    const [nav, setNav] = useState(false)
+    const { theme } = useTheme()
+
+    const handleNav = () => {
+        setNav(!nav)
+    }
+
     return (
-        <h1>PClub!</h1>
+        <>
+            <header className="
+                fixed top-0 left-0 right-0
+                h-[65px]
+                bg-navbar font-test text-primary
+                border-b-2 border-b-secondary  
+                flex justify-between items-center
+                px-10
+            ">
+                <Link to="/">
+                    <img
+                        src={logo}
+                        alt="PClub Logo"
+                        className={`w-[90px] ${theme === 'light' ? 'invert' : ''}`}
+                    />
+                </Link>
+                <div className="hidden md:flex items-center justify-center gap-5">
+                    <Link to="/">
+                        Events
+                    </Link>
+                    <Link to="/">
+                        Members
+                    </Link>
+                    <Link to="/">
+                        Blogs
+                    </Link>
+                    |
+                    <Link to="/">
+                        <div className="flex items-center gap-2">
+                            <FiCamera size={20} />
+                            <p>Photo Reel</p>
+                        </div>
+                    </Link>
+                </div>
+                <div onClick={handleNav} className='block md:hidden'>
+                    <AiOutlineMenu size={20} />
+                </div>
+                <div className="hidden md:block">
+                    <div className="flex items-center gap-2">
+                        <FaRegUser className="w-[17px] h-[17px]" />
+                        <p>Club Member</p>
+                    </div>
+                </div>
+
+            </header >
+            <div className={nav ? 'z-20 text-primary fixed left-0 top-0 w-[70%] border-r-2 border-secondary h-screen bg-green/50 backdrop-blur-2xl ease-in duration-100' : 'fixed left-[-100%] ease-in duration-100'}>
+                <div className="pt-10 pr-4 flex justify-between flex-col items-end w-[100%] text-primary">
+                    <div onClick={handleNav} className='block md:hidden'>
+                        {nav ? <AiOutlineClose size={30} /> : <AiOutlineMenu size={20} />}
+                    </div>
+                    <ul className='p-4 pt-10 flex flex-col gap-5 w-full'>
+                        <Link to="/">
+                            Events
+                        </Link>
+                        <Link to="/">
+                            Members
+                        </Link>
+                        <Link to="/">
+                            Blogs
+                        </Link>
+                        <hr className="border-secondary" />
+                        <Link to="/">
+                            <div className="flex items-center gap-2">
+                                <FiCamera size={20} />
+                                <p>Photo Reel</p>
+                            </div>
+                        </Link>
+                        <hr className="border-secondary" />
+                        <div className="flex items-center gap-2">
+                            <FaRegUser className="w-[17px] h-[17px]" />
+                            <p>Club Member</p>
+                        </div>
+                    </ul>
+                </div>
+            </div>
+        </>
     )
 }

src/context/TabContext.jsx

@@ -4,67 +4,67 @@ import { useState } from "react";
 export const TabContext = createContext(null);
 
 export const TabContextProvider = (props) => {
-    // the items that are to be shown on the menu bar
-    const navItems = [
-        { name: 'View all', href: '#' },
-        { name: 'Management', href: '#' },
-        { name: 'Design', href: '#' },
-        { name: 'Photographers', href: '#' },
-        { name: 'Operations', href: '#' }
-    ];
+  // the items that are to be shown on the menu bar
+  const navItems = [
+    { name: 'View all', href: '#' },
+    { name: 'Management', href: '#' },
+    { name: 'Design', href: '#' },
+    { name: 'Photographers', href: '#' },
+    { name: 'Operations', href: '#' }
+  ];
 
-    // the team members detail(may come from some CMS in future)
-    const teamMembers = [
-        {
-          id:'1',
-          name: 'Emily Donnavan',
-          role: 'Product Lead',
-          team: 'Management',
-          imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-        },
-        {
-          id:'2',
-          name: 'Jessica Dobrev',
-          role: 'Backend Lead',
-          team: 'Management',
-          imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-        },
-        {
-          id:'3',
-          name: 'Drew Cano',
-          role: 'Head of UX',
-          team: 'Operations',
-          imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-        },
-        {
-            id:'4',
-            name: 'Emily Donnavan',
-            role: 'Product Lead',
-            team: 'Photographers',
-            imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-          },
-          {
-            id:'5',
-            name: 'Jessica Dobrev',
-            role: 'Backend Lead',
-            team: 'Design',
-            imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-          },
-          {
-            id:'6',
-            name: 'Drew Cano',
-            role: 'Head of UX',
-            team: 'Design',
-            imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
-          },
-      ];
-
-    // state to control the selected tab
-    const [activeItem, setActiveItem] = useState('View all');
+  // the team members detail(may come from some CMS in future)
+  const teamMembers = [
+    {
+      id: '1',
+      name: 'Emily Donnavan',
+      role: 'Product Lead',
+      team: 'Management',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+    {
+      id: '2',
+      name: 'Jessica Dobrev',
+      role: 'Backend Lead',
+      team: 'Management',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+    {
+      id: '3',
+      name: 'Drew Cano',
+      role: 'Head of UX',
+      team: 'Operations',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+    {
+      id: '4',
+      name: 'Emily Donnavan',
+      role: 'Product Lead',
+      team: 'Photographers',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+    {
+      id: '5',
+      name: 'Jessica Dobrev',
+      role: 'Backend Lead',
+      team: 'Design',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+    {
+      id: '6',
+      name: 'Drew Cano',
+      role: 'Head of UX',
+      team: 'Design',
+      imageUrl: '/src/assets/images/placeholder.jpg?height=400&width=300',
+    },
+  ];
 
-    return (
-        <TabContext.Provider value={{navItems, activeItem, setActiveItem, teamMembers}}>
-            {props.children}
-        </TabContext.Provider>
-    )
+  // state to control the selected tab
+  const [activeItem, setActiveItem] = useState('View all');
+
+  return (
+    <TabContext.Provider value={{ navItems, activeItem, setActiveItem, teamMembers }}>
+      {props.children}
+    </TabContext.Provider>
+  )
 }

src/context/ThemeContext.jsx

@@ -0,0 +1,29 @@
+import { useContext, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { ThemeContext } from './ThemeContextValue';
+
+export function ThemeProvider({ children }) {
+    const [theme, setTheme] = useState('light');
+
+    useEffect(() => {
+        document.documentElement.setAttribute('data-theme', theme);
+    }, [theme]);
+
+    const toggleTheme = () => {
+        setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}
+
+ThemeProvider.propTypes = {
+    children: PropTypes.node.isRequired
+};
+
+export function useTheme() {
+    return useContext(ThemeContext);
+} 

src/context/ThemeContextValue.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const ThemeContext = createContext(); 

src/index.css

@@ -1,10 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Dela+Gothic+One&family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
+
 * {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
-	font-family: sans-serif;
-}
+	font-family: 'DM Sans', sans-serif;
+}

src/main.jsx

@@ -1,6 +1,7 @@
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import "./index.css"
+import "./styles/themes.css"
 import App from "./App.jsx"
 import { BrowserRouter } from "react-router"
 import { TabContextProvider } from "./context/TabContext.jsx"

src/styles/themes.css

@@ -0,0 +1,23 @@
+[data-theme="light"] {
+    --primary: #000000;
+    --secondary: #C8C8C8;
+    --tertiary: #9F9D9D;
+    --complement-primary: #FFFFFF;
+    --complement-secondary: #e2e2e2;
+    --accent-1: #291D1D;
+    --accent-2: #C4C4C4;
+    --highlight: #9EE068;
+    --navbar: rgba(255, 239, 239, 0.8);
+}
+
+[data-theme="dark"] {
+    --primary: #FFFFFF;
+    --secondary: #e3e3e3;
+    --tertiary: #9F9D9D;
+    --complement-primary: #000000;
+    --complement-secondary: #1a1a1a;
+    --accent-1: #291D1D;
+    --accent-2: #C4C4C4;
+    --highlight: #9EE068;
+    --navbar: rgba(20, 20, 20, 0.8);
+}