-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #33 from Bug-Bust3rs/dev
feat : dark mode
- Loading branch information
Showing
16 changed files
with
432 additions
and
332 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,69 @@ | ||
| import React, { useState } from 'react'; | ||
| import { Link } from 'react-router-dom'; | ||
| import { Menu, X } from 'lucide-react'; | ||
| import logo from '../assets/Unite__Logo.png'; | ||
| import { UserRound } from 'lucide-react'; | ||
|
|
||
| interface NavLink { | ||
| label: string; | ||
| to: string; | ||
| } | ||
|
|
||
| import logo from '../../public/Unite__Logo.png' | ||
| import { useTheme } from '../context/ThemeCOntext'; | ||
| import { Moon , SunMoon } from 'lucide-react'; | ||
| const Navbar: React.FC = () => { | ||
| const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); | ||
| const [isOpen, setIsOpen] = useState(false); | ||
| const { isDarkMode, toggleTheme } = useTheme() | ||
|
|
||
| const toggleNavbar = () => { | ||
| setMobileDrawerOpen(!mobileDrawerOpen); | ||
| const toggleMenu = () => { | ||
| setIsOpen(!isOpen); | ||
| }; | ||
|
|
||
| const navItems: NavLink[] = [ | ||
| { label: 'About Us', to: '/' }, | ||
| { label: 'Posts', to: '/' }, | ||
| { label: 'Services', to: '/' }, | ||
| { label: 'Testimonials', to: '/' }, | ||
| { label: 'Contact Us', to: '/' }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <nav className="sticky top-0 z-50 py-6 px-20 backdrop-blur-lg "> | ||
| <div className="container px-24 mx-auto relative lg:text-sm"> | ||
| <div className="flex justify-between items-center"> | ||
| <div className="flex items-center flex-shrink-0"> | ||
| <img className="h-10 w-10 mr-2" src={logo} alt="Logo" /> | ||
| <span className="text-[1.5rem] font-bold tracking-tight poppins-semibold ">UNITE</span> | ||
| </div> | ||
| <ul className="hidden lg:flex ml-14 space-x-12 "> | ||
| {navItems.map((item, index) => ( | ||
| <li className='hover:text-blue-500 font-semibold text-[1rem]' key={index}> | ||
| <Link to={item.to}>{item.label}</Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <div className="hidden lg:flex justify-center items-center"> | ||
| <button className='mr-16'> | ||
| { <UserRound />} | ||
| </button> | ||
| </div> | ||
| <div className="lg:hidden md:flex flex-col justify-end ml-5"> | ||
| <button onClick={toggleNavbar}> | ||
| {mobileDrawerOpen ? <X /> : <Menu />} | ||
| <nav className="bg-white dark:bg-gray-900 fixed w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600"> | ||
| <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> | ||
| <Link to={'/'} className="flex items-center space-x-3 rtl:space-x-reverse"> | ||
| <img src={logo} className="h-8" alt="Flowbite Logo" /> | ||
| <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Unite</span> | ||
| </Link> | ||
| <div className="flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse"> | ||
| <button type="button" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"><Link to={'/login'}>Sign In</Link> </button> | ||
| <button | ||
| onClick={toggleMenu} | ||
| data-collapse-toggle="navbar-sticky" | ||
| type="button" | ||
| className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" | ||
| aria-controls="navbar-sticky" | ||
| aria-expanded={isOpen} | ||
| > | ||
| <span className="sr-only">Open main menu</span> | ||
| <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"> | ||
| <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15" /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| <div className={`items-center justify-between ${isOpen ? 'block' : 'hidden'} w-full md:flex md:w-auto md:order-1`} id="navbar-sticky"> | ||
| <ul className="flex flex-col p-4 md:p-0 mt-4 font-medium border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700"> | ||
| <li> | ||
| <Link to="/" className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 md:dark:text-blue-500" aria-current="page">Home</Link> | ||
| </li> | ||
| <li> | ||
| <Link to="/about" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</Link> | ||
| </li> | ||
| <li> | ||
| <Link to="/services" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</Link> | ||
| </li> | ||
| <li> | ||
| <Link to="/contact" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Contact</Link> | ||
| </li> | ||
| <li> | ||
| <button | ||
| onClick={toggleTheme} | ||
| className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700" | ||
| > | ||
| {isDarkMode ? <SunMoon /> : <Moon/>} | ||
| </button> | ||
| </div> | ||
| </li> | ||
|
|
||
|
|
||
|
|
||
| </ul> | ||
| </div> | ||
| {mobileDrawerOpen && ( | ||
| <div className="fixed right-0 z-20 bg-slate-100 w-full p-12 flex flex-col justify-center items-center lg:hidden"> | ||
| <ul> | ||
| {navItems.map((item, index) => ( | ||
| <li className='hover:text-cyan-500 font-semibold py-4' key={index} > | ||
| <Link to={item.to}>{item.label}</Link> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| <div className="flex space-x-6"> | ||
| <Link to="#" className="py-2 px-3 border rounded-xl"> | ||
| Sign In | ||
| </Link> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </nav> | ||
| ); | ||
| }; | ||
|
|
||
| export default Navbar; | ||
| export default Navbar; |
Oops, something went wrong.