import {useState} from 'react';
import {close, logo, menu} from '../assets';
import {navLinks} from '../constants';
const Navbar = () => {
const [toggle, setToggle] = useState(false);
return (
<nav className="w-full flex py-6 justify-between items-center navbar">
<img src={logo} alt="hoobank" className="w-[124px] h-[32px]" />
<ul className='list-none sm:flex hidden justify-end items-center flex-1'>
{navLinks.map((nav, index)=>(
<li
key={nav.id}className={`font-poppins font-normal cursor-pointer text-[16px] ${index === navLinks.length - 1 ? 'mr-0' : 'mr-10'} text-white mr-10`}
>
<a href={`#${nav.id}`}>
{nav.title}
</a>
</li>
))}
</ul>
<div className="sm:hidden flex flex-1 justify-end items-center">
<img
src="{toggle ? close : menu}
alt= "menu
className="w-[28px] h-[28px] object-contain"
onClick={() => setToggle((prev) => !prev)}
/>
<div
className={`${toggle ? 'flex' : 'hidden'} p-6 bg-black-gradient absolute top 20 right-0 mx-4 my-2 min-w-[140px] rounded-xl sidebar`}
>
<ul className='list-none flex flex-col justify-end items-center flex-1'>
{navLinks.map((nav, index)=>(
<li
key={nav.id}className={`font-poppins font-normal cursor-pointer text-[16px] ${index === navLinks.length - 1 ? 'mr-0' : 'mb-4'} text-white mr-10`}
>
<a href={`#${nav.id}`}>
{nav.title}
</a>
</li>
))}
</ul>
</div>
</div>
</nav>
)
}
export default Navbar
not able to render menu image
Related
I have the following page with three tabs("Info", "Rules", and "Wiki"):
import React, { useState, useEffect } from 'react';
import { Navbar } from '../components';
function Information() {
const [selectedTab, setSelectedTab] = useState('instrucciones');
return (
<>
<Navbar>Información y normativa</Navbar>
<div className="relative pt-16 pb-16 min-h-screen w-screen bg-gray-200">
<div className="w-full overflow-visible ">
<div className="flex overflow-x-scroll no-scrollbar max-w-full mt-4 ml-4 whitespace-nowrap">
<button
onClick={() => setSelectedTab('instrucciones')}
className={`flex-1 py-2 px-4 text-center text-black bg-white rounded-full ${
selectedTab === 'instrucciones'
? 'bg-primary font-bold active'
: 'hover:border-stone-400'
} mr-4`}
>
Instrucciones
</button>
<button
onClick={() => setSelectedTab('normativa')}
className={`flex-1 py-2 px-4 text-center text-black bg-white rounded-full ${
selectedTab === 'normativa'
? 'bg-primary font-bold active'
: 'hover:border-stone-400'
} mr-4`}
>
Normativa
</button>
<button
onClick={() => setSelectedTab('wiki')}
className={`flex-1 py-2 px-4 text-center text-black bg-white rounded-full ${
selectedTab === 'wiki'
? 'bg-primary font-bold active'
: 'hover:border-stone-400'
}`}
>
Wiki
</button>
</div>
{selectedTab === 'instrucciones' && (
<div>
<h1 className="mt-6 ml-3 p-3 text-left text-lg font-bold text-black">
INSTRUCTIONS
</h1>
</div>
)}
{selectedTab === 'normativa' && (
<div>
<h1 className="mt-6 ml-3 p-3 text-left text-lg font-bold text-black">
NORMATIVA
</h1>
</div>
)}
{selectedTab === 'wiki' && (
<div>
<h1 className="mt-6 ml-3 p-3 text-left text-lg font-bold text-black">
WIKI
</h1>
</div>
)}
</div>
</div>
</>
);
}
export default Information;
I´m trying to open it with the tab wiki active when the user clicks on the Information button from the page /wiki (that´s the route), for any other page, it should open with the tab Info. How can I go about it? I´ve tried using useLocation but i received a empty ''.
you recieved empty because you are not using any routing at all, you are using conditional rendering instead, which is wrong. you have to change a lot of things(you have to use things like BrowserRouter, Routes, Route, Link) so I recommend reading docs about routing https://reactrouter.com/en/main/router-components/browser-router
As I mention in my title Using tailwindcss and flowbite react Navbar. Toggle hamburger menu does not work properly.
I'm using flowbite react navbar component plugin for tailwindcss and got this weird hamburger menu with words in it. It supposes to be an icon instead of an Open main menu with an icon. Please refer to the code and image below for info.
Anyone had a solution for this?
Here is my code:
<Navbar
fluid={true}
rounded={false}>
<Navbar.Brand className='container flex flex-wrap items-center justify-between mx-auto'>
<Link
to='/'
className='flex items-center'>
<img
src={Logo}
className='h-6 mr-3 sm:h-9'
alt='Flowbite Logo'
/>
<span className='self-center text-xl font-semibold whitespace-nowrap dark:text-white'>
Logo here
</span>
</Link>
<div className='hidden lg:block'>
<Link
className='dark:text-white p-5'
to='/'>
Home
</Link>
<Link
className='dark:text-white p-5'
to='/academy'>
Academy
</Link>
<Link
className='dark:text-white p-5'
to='/signal'>
Signal
</Link>
</div>
<div className='flex md:order-2'>
{theme === 'dark' ? (
<button
onClick={handleThemeSwitch}
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-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
Light Mode
</button>
) : (
<button
onClick={handleThemeSwitch}
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-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800'>
Dark Mode
</button>
)}
</div>
<Navbar.Toggle />
<Navbar.Collapse className='p-5'>
<Link to='/'>
<Navbar.Link>Home</Navbar.Link>
</Link>
<Link to='/academy'>
<Navbar.Link>Academy</Navbar.Link>
</Link>
<Link to='/signal'>
<Navbar.Link>Signal Group</Navbar.Link>
</Link>
</Navbar.Collapse>
</Navbar.Brand>
</Navbar>
Nvm i will just revamp the whole thing manually instead using their navbar toggle
import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { Navbar } from 'flowbite-react';
import Logo from '../assets/logo.svg';
import { BsMenuUp } from 'react-icons/bs';
import { IconContext } from 'react-icons';
const Navigation = () => {
const [theme, setTheme] = useState('light');
const [toggle, setToggle] = useState(false);
useEffect(() => {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [theme]);
const handleThemeSwitch = () => {
setTheme(theme === 'dark' ? 'light' : 'dark');
};
return (
<Navbar fluid={true} rounded={false}>
<Navbar.Brand className="container flex flex-wrap items-center justify-between mx-auto">
<Link to="/" className="flex items-center">
<img src={Logo} className="h-6 mx-3 sm:h-9" alt="Flowbite Logo" />
<span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">
Some Logo Here
</span>
</Link>
<div className="hidden lg:block">
<Link className="dark:text-white p-5" to="/">
Home
</Link>
<Link className="dark:text-white p-5" to="/academy">
Academy
</Link>
<Link className="dark:text-white p-5" to="/signal">
About
</Link>
</div>
<div className="flex md:order-2">
{theme === 'dark' ? (
<button
onClick={handleThemeSwitch}
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-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Light Mode
</button>
) : (
<button
onClick={handleThemeSwitch}
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-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Dark Mode
</button>
)}
<div className="lg:hidden flex align-middle justify-center p-1 text-gray-800 dark:text-white">
<IconContext.Provider value={{ size: 30 }}>
<BsMenuUp onClick={(e) => setToggle(!toggle)} />
</IconContext.Provider>
</div>
</div>
</Navbar.Brand>
{toggle ? (
<div className="p-2 m-5 bg-white dark:bg-gray-600 rounded-lg dark:text-white w-full">
<div>
<Navbar.Link as={Link} to="/">
Home
</Navbar.Link>
<Navbar.Link as={Link} to="/academy">
Academy
</Navbar.Link>
<Navbar.Link as={Link}>About</Navbar.Link>
</div>
</div>
) : null}
</Navbar>
);
};
export default Navigation;
Initially I made a project and there the Navbar was completely ok. But I want to use the same Navbar on similar kind of project. But while type or copy paste the code the design is completely change. Even after a lot of search I can't find the actual problem as well as the solution also.
Both having same CSS file as well. Then where the problem occurs ?? Is there any change happened for Tailwind CSS design ?? Kindly let me know.
Navbar of previous project :
Navbar of present project :
Even though all codes are same. I put all the Navbar code below.
import { HiMenuAlt4 } from 'react-icons/hi';
import { AiOutlineClose } from 'react-icons/ai';
import logo from '../../images/logo.png';
const NavbarItem = ({ title, classProps }) => {
return (
<li className={`mx-4 cursor-pointer ${classProps}`}>
{title}
</li>
)
}
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(false); //Mobile View On or Not
return (
<nav className="w-full flex md:justify-center justify-between items-center p-4">
<div className="md:flex-[0.5] flex-initial justify-center items-center">
<img src={logo} alt="logo" className="w-32 cursor-pointer"/>
</div>
<ul className="text-white md:flex hidden list-none flex-row justify-between items-center flex-initial">
{["Buy","Sell","Transfer","Wallets","About Us"].map((item, index) => (
<NavbarItem key={item + index} title={item} />
))}
<li className="bg-[#3d4f79] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546]">
SIGN IN
</li>
</ul>
{/* Mobile View */}
<div className="flex relative">
{toggleMenu
? <AiOutlineClose fontSize={28} className="text-white md:hidden cursor-pointer" onClick={() => setToggleMenu(false)} />
: <HiMenuAlt4 fontSize={28} className="text-white md:hidden cursor-pointer" onClick={() => setToggleMenu(true)} />
}
{toggleMenu && (
<ul
className="z-10 fixed top-0 -right-2 p-3 w-[70vw] h-screen shadow-2x1 md:hidden list-none
flex flex-col justify-start items-end rounded-md blue-glassmorphism text-white animate-slide-in"
>
<li className="text-xl w-full my-2">
<AiOutlineClose onClick={() => setToggleMenu(false)} />
</li>
{["Market","Exchange","Tutorials","Wallets"].map((item, index) => (
<NavbarItem key={item + index} title={item} classProps="my-2 text-lg"/>
))}
</ul>
)}
</div>
</nav>
);
}
export default Navbar;```
by adding classname navbar fixed <nav className="fixed w-full flex md:justify-center justify-between items-center p-4">
I'm using TailwindCSS and react-icons, but I can't seem to load the icons used to toggle my menu.
import { useState } from "react";
import { HiMenuAlt4 } from "react-icons/hi";
import { AiOutlineClose } from "react-icons/ai";
import logo from "../../images/logo.png";
const NavbarItem = ({ title, classProps }) => {
return (
<li className={`mx-4 cursor-pointer ${classProps}`}>
{title}
</li>
);
};
const Navbar = () => {
const [toggleMenu, setToggleMenu] = useState(0);
return (
<nav className="w-full flex md:justify-center justify-between items-center p-4">
<div className="md:flex-[0.5] flex-initial justify-center items-center"
<img src={logo} alt="logo" className="w-32 cursor-pointer" />
</div>
<ul className="text-white md:flex hidden list-none justify-between items-center flex-initial">
{["Market", "Exchange", "Tutorials", "Wallets"].map((item, index) => (
<NavbarItem key={item + index} title={item} />
))}
<li className="bg-[#2952e3] py-2 px-7 mx-4 rounded-full cursor-pointer hover:bg-[#2546bd]">
Login
</li>
</ul>
<div className="flex relative">
{toggleMenu ? (
<AiOutlineClose
fontSize={28}
className="text-white md:hidden cursor-pointer"
onClick={() => setToggleMenu(false)}
/>
) : (
<HiMenuAlt4
fontSize={28}
className="text-white md:hidden cursor-pointer"
onClick={() => setToggleMenu(true)}
/>
)}
</div>
</nav>
);
};
export default Navbar;
I am new to Ract and building a multi step form in Next.js, where I also use Context. So my project structure is pretty wild and I don't get how / where to change the steps.status when moving to next step in the stepper. So far I have my context, managing half of states, basically the formData, but also the 'original' state of my stepper:
import { useState, createContext, useContext } from "react";
export const FormContext = createContext();
export default function FormProvider({ children }) {
const [data, setData] = useState({});
const [steps, setSteps] = useState([
{ name: 'Vertrag', status: 'current' },
{ name: 'Dateneingabe', status: 'upcoming' },
{ name: 'Bestätigung', status: 'upcoming' },
]);
const setFormValues = (values) => {
setData((prevValues) => ({
...prevValues,
...values,
}));
};
return (
<FormContext.Provider value={{ steps, data, setFormValues }}>
{children}
</FormContext.Provider>
);
}
export const useFormData = () => useContext(FormContext);
In Stepper.js I therefore import my formData:
import { CheckIcon } from '#heroicons/react/solid'
import { useContext } from 'react'
import { FormContext } from "../context";
// status: 'complete', 'current', 'upcoming'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export default function Stepper() {
const formData = useContext(FormContext);
const steps = formData.steps
return (
<nav aria-label="Progress">
<div className="flex items-center flex-col">
<ol className="flex items-center sm:flex-col md:flex-row mx-auto mt-32 mb-8">
{steps.map((step, stepIdx) => (
<li key={step.name} className={classNames(stepIdx !== steps.length - 1 ? 'pr-16 sm:pr-32' : '', 'relative')}>
{step.status === 'complete' ? (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-yellow-500" />
</div>
<a
href="#"
className="relative w-8 h-8 flex items-center justify-center bg-yellow-500 rounded-full hover:bg-yellow-500"
>
<span className="h-9 flex flex-col items-center">
<span className="relative top-2 z-10 w-8 h-8 flex items-center justify-center rounded-full group-hover:bg-indigo-800">
<CheckIcon className="w-5 h-5 text-white" aria-hidden="true" />
</span>
<span className="text-xs font-semibold tracking-wide text-gray-600 mt-8">{step.name}</span>
</span>
</a>
</>
) : step.status === 'current' ? (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-gray-200" />
</div>
<a
href="#"
className="relative w-8 h-8 flex items-center justify-center bg-white border-2 border-yellow-500 rounded-full"
aria-current="step"
>
<span className="h-9 flex flex-col items-center">
<span className="z-10 w-8 h-8 flex items-center justify-center rounded-full group-hover:bg-indigo-800">
<span className="relative h-2.5 w-2.5 bg-yellow-500 rounded-full relative" style={{top: '0.8rem'}} />
</span>
<span className="text-xs font-semibold tracking-wide text-gray-600" style={{marginTop: '2.72rem'}}>{step.name}</span>
</span>
</a>
</>
) : (
<>
<div className="absolute inset-0 flex items-center" aria-hidden="true">
<div className="h-0.5 w-full bg-gray-200" />
</div>
<a
href="#"
className="group relative w-8 h-8 flex items-center justify-center bg-white border-2 border-gray-300 rounded-full hover:border-gray-400"
>
<span className="h-9 flex flex-col items-center">
<span className="z-10 w-8 h-8 flex items-center justify-center rounded-full">
<span className="relative h-2.5 w-2.5 bg-transparent rounded-full group-hover:bg-gray-300" style={{top: '0.8rem'}} />
</span>
<span className="text-xs font-semibold tracking-wide text-gray-600" style={{marginTop: '2.72rem'}}>{step.name}</span>
</span>
</a>
</>
)}
</li>
))}
</ol>
</div>
</nav>
)
Moreover I have index.js page, where all the components come together
import { useState } from "react";
import Head from "next/head";
import Stepper from '../components/Stepper'
import styles from "../styles/styles.module.scss";
import FormCard from "../components/FormCard";
import Navbar from "../components/Navbar";
import { CheckIcon } from '#heroicons/react/solid'
import {
PersonalInfo,
ConfirmPurchase,
ContractInfo,
} from "../components/Forms";
import FormCompleted from "../components/FormCompleted";
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const App = () => {
const [formStep, setFormStep] = useState(0);
const nextFormStep = () => setFormStep((currentStep) => currentStep + 1);
const prevFormStep = () => setFormStep((currentStep) => currentStep - 1);
const [activeStep, setActiveStep] = useState(0);
const handleNextStep = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handlePrevoiusStep = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
return (
<div>
<Head>
<title>Next.js Multi Step Form</title>
</Head>
< Navbar />
< Stepper activeStep={activeStep} />
<div className={styles.container}>
<FormCard currentStep={formStep} prevFormStep={prevFormStep}>
{formStep >= 0 && (
<ContractInfo formStep={formStep} nextFormStep={nextFormStep} />
)}
{formStep >= 1 && (
<PersonalInfo formStep={formStep} nextFormStep={nextFormStep} />
)}
{formStep >= 2 && (
<ConfirmPurchase formStep={formStep} nextFormStep={nextFormStep} />
)}
{formStep > 2 && <FormCompleted />}
</FormCard>
</div>
<div className="mt-1 mb-5 sm:mt-8 sm:flex sm:justify-center lg:justify-center">
<div className="rounded-md shadow">
<a role="button" tabIndex={0}
onClick={ () => { prevFormStep(); handlePrevoiusStep() }}
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Back
</a>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<a
onClick={ () => { nextFormStep(); handleNextStep() }}
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Next
</a>
</div>
</div>
</div>
);
};
export default App;
As you see, Stepper is managed in three different files. But I am at least capable to change the activeStep index when clicking on Buttons, which already was a huge challenge for me. So now I also need the design to change. So that activeStep gets the step.status === 'current'. All stepps index < activeStep index should get step.status === 'complete' and logically all stepps index > activeStep index - step.status === 'upcoming'. Now I tried to handle this in index.js, but of course get back step is undefined, even though it is defined in Stepper.js through context.