Develop Reference

Next.js Link not working on mobile, it works fine on desktop however on mobile its not clickable, tried router.push(`portfolio/${proj.slug.current}`)

return (
<div className="w-full">
{project.map((proj: projTypes, index: any) => {
return (
<div
key={index.toString()}
className="border-b border-b-slate-100 bg-white bg-no-repeat overflow-hidden"
>
<div className="flex flex-col lg:flex-row grow text-center lg:text-left py-10 text-green items-center justify-between h-full">
<div>
<button
onClick={() => router.push(`portfolio/${proj.slug.current}`)}
className="text-[25px] lg:text-[44px] font-bold font-display ease-in-out duration-300"
>
{proj.title}
</button>
</div>
<div className="flex w-1/3 gap-x-5 justify-center ease-in-out duration-900">
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.category}
</p>
<p className="ease-in-out duration-700 text-[14px] uppercase text-gray font-bold">
{proj.year}
</p>
</div>
</div>
</div>
);
})}
</div>
expected clickable items on mobile

Make Submenu on sidebar component Nextjs

So it to loop and subMenu on sidebar component, but instead of the subMenu showUp under the parents menu, it showUp on the Right side of the parents menu as pic below:
here is my code on how i try to loop the subMenu and The parents item to the react component:
return (
<div className=" my-4 border-gray-100 pb-4">
{items.map(({ icon: Icon, iconArrow: IconArrow, ...item }, index) => {
if (item.subMenu) {
return (
<div>
<Link href={item.link}>
<a
onClick={(e) => onMouseClick(e, item.link)}
className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
>
<Icon className="text-2xl text-white group-hover:text-red" />
<h3 className="text-base text-white group-hover:text-red font-semibold ">
{item.label}
</h3>
{item.subMenu && dropdown ? (
<>
<IconArrow className="pl-0 text-2xl text-white group-hover:text-red" />
</>
) : (
<></>
)}{" "}
{item.subMenu && dropdown ? (
<div>
{item.subMenu.map((subitem, index) => {
return <>makan</>;
})}
</div>
) : (
<></>
)}
</a>
</Link>
</div>
);
} else {
return (
// eslint-disable-next-line react/jsx-key
<div>
<Link href={item.link}>
<a
onClick={(e) => onMouseClick(e, item.link)}
className="flex mb-2 justify-start items-center gap-4 pl-5 hover:bg-gray-900 p-2 rounded-md group cursor-pointer hover:shadow-lg m-auto"
>
<Icon className="text-2xl text-white group-hover:text-red" />
<h3 className="text-base text-white group-hover:text-red font-semibold ">
{item.label}
</h3>
</a>
</Link>
</div>
);
}
})}
</div>
);
};
Can Some one tell me where did i do wrong here, here is where i call the sidebar component into the sidebar:
return (
<div className="h-full px-4 pt-8 bg-yellow flex flex-col peer-focus:left-0 peer:transition ease-out delay-150 duration-200">
<div className="flex flex-col justify-start item-center mb-4">
<Image src={Logo_Nabati} width={123} height={75} alt="logo Nabati" />
</div>
<Sidebarcomponent items={menuItems} />;
</div>
);

try this:
return (
<div className=" my-4 border-gray-100 pb-4 relative">
{items.map(({ icon: Icon, iconArrow: IconArrow, ...item }, index) => {
if (item.subMenu) {
return (
<div className="absolute top-full left-0">...</div>
);
} else {...})}
</div>
);
};

I assume you want to display the submenu under the "Master Data"? Put the component under it. Then in the anchor tag you have a flex. Add flex-col to change the direction of flex, top-bottom.

Element is not clickable in flex div

I have this jsx here and I am using tailwindcss. with this code i have basically just made this:
this post info bar
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-[#1d9bf0] group-hover:bg-opacity-10 cursor-pointer">
<ChatBubbleOutline className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
{user?.tag === post?.tag ? (
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
e.stopPropagation();
deleteDoc(doc(db, "posts", id));
router.push("/");
}}
>
<div className="icon group-hover:bg-red-600/10">
<TrashIcon className="h-5 group-hover:text-red-600" />
</div>
</div>
) : (
<div className="flex items-center space-x-1 group">
<div className="icon group-hover:bg-green-500/10">
<SwitchHorizontalIcon className="h-5 group-hover:text-green-500" />
</div>
</div>
)}
<div
className="flex items-center space-x-1 group"
onClick={(e) => {
likePost();
}}
>
<div className="icon group-hover:bg-pink-600/10">
{liked ? (
<HeartIconFilled className="h-5 text-pink-600" />
) : (
<HeartIcon className="h-5 group-hover:text-pink-600" />
)}
</div>
{post?.likes?.length > 0 && (
<span
className={`group-hover:text-pink-600 text-sm ${
liked &&
"text-pink-600"
}`}
>
{post?.likes.length}
</span>
)}
</div>
<div className="icon group">
<ShareIcon className="h-5 group-hover:text-[#1d9bf0]" />
</div>
</div>
Everything is working, and looks great, but for some reason, the first element in the flex div at the top is non clickable and there is no hover animation. The ChatBubbleOutline icon when hovered doesnt have any css showing and the onclick listener doesnt work, but every other icon after than does perfectly, why is this? And a strange thing is that when i go into md screen size or lower it works completly as i want it to but in xl screen size for a normal screen it doesnt work.
Here is the my css file
#layer components {
.hoverAnimation {
#apply hover:bg-[#d9d9d9] hover:bg-opacity-10 rounded-full cursor-pointer w-[52px] h-[52px] xl:w-auto xl:h-auto xl:py-3 xl:px-4 transition duration-200 ease-out;
}
.icon {
#apply cursor-pointer w-9 h-9 hover:bg-[#1d9bf0] hover:bg-opacity-10 flex items-center justify-center rounded-full transition ease-out;
}
}

Show and hide div in react js

How do I hide my page "section" when I click on a button. and show it another button is clicked
Here's my code
import './App.css';
import Typed from 'react-typed';
import { useState, useEffect } from 'react';
function App() {
return (
<div className='text-white'>
<div id='index' className='index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Roll</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={['simply', 'design']}
typeSpeed={70}
backSpeed={100}
loop/>
</div>
<p className='md:text-3xl sm:text-2xl text-xl font-bold py-4 '>best <a className='underline text-gray-300'>design</a> and <a className='underline text-gray-300'>simplistic.</a></p>
<button className='bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110 '>Create</button>//clicking this button will show the div below which has the id of info and hide this current div
</div>
<div id='info' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
<div id='ino' className='info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center'>
<h1>Hello</h1>
</div>
</div>
);
}
how do i make the onClick event work it out?

Just set a state let's call it for example hide and set default value false, and on the button click turn it to true.
And you can conditionally hide the button section and show the info section.
import "./App.css";
import Typed from "react-typed";
import { useState, useEffect } from "react";
function App() {
const [hide, setHide] = useState(false);
return (
<div className="text-white">
{!hide ? (
<div
id="index"
className="index max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<div className="flex justify-center items-center">
<h1 className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6">
Roll
</h1>
<Typed
className="md:text-7xl sm:text-6xl text-4xl font-bold md:py-6 text-gray-400"
strings={["simply", "design"]}
typeSpeed={70}
backSpeed={100}
loop
/>
</div>
<p className="md:text-3xl sm:text-2xl text-xl font-bold py-4 ">
best <a className="underline text-gray-300">design</a> and{" "}
<a className="underline text-gray-300">simplistic.</a>
</p>
<button
className="bg-white text-black w-[200px] transition-[0.5s] rounded-lg font-bold my-6 mx-auto py-3 ring-2 ring-gray-300 hover:bg-slate-300 hover:shadow-xl hover:shadow-white hover:scale-110"
onClick={() => setHide(true)}
>
Create
</button>
//clicking this button will show the div below which has the id of
info and hide this current div
</div>
) : (
<div
id="info"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
)}
<div
id="ino"
className="info max-w-[800px] mt-[-96px] w-full h-screen mx-auto text-center flex flex-col justify-center"
>
<h1>Hello</h1>
</div>
</div>
);
}

You should use useState() react hook.
For example:
import './App.css';
function App() {
const [visible, setVisible] = useState(true);
return (
<div className='text-white' style={{display: visible ? 'block' : 'none'}}>
<div>
<!--first part-->
<div className='flex justify-center items-center'>
<h1 className='md:text-7xl sm:text-6xl text-4xl font-bold md:py-6'>Web</h1>
<!--stuff here-->
</div>
<p>stuff here</p>
<button onClick={() => setVisible(!visible)}>Create</button>
<!--when i click on the button it will hide the first part(section) and show the second part -->
</div>
<!--first part end -->
<div>
<!--second part -->
<h1>Hello</h1>
</div>
</div>
);
You could check more details how to use useState() hook here https://reactjs.org/docs/hooks-state.html

problems with hook react

I am creating a step and I am using a hook to paint but it gives me this problem that if I am in 3, all the others paint me for example 4, 5, etc and I do not want that
export default function Registration() {
const [current, setCurrent] = useState(3)
return (
<div className="flex">
<div className="flex flex-col justify-center">
<div className="w-1 h-16 flex justify-center font-bold items-center">
1
</div>
<div className="w-1 h-8 flex justify-center font-bold items-end">2</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
3
</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
4
</div>
<div className="w-1 h-16 flex justify-center font-bold items-end">
5
</div>
</div>
<div className="w-10">
{current === 1 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
)}
{current === 2 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan cirlce rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 3 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 4 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 cirlce"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
{current === 5 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 cirlce rounded-full absolute z-1" />
<div className="w-1 h-16 bg-dark-15"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-16 bg-cyan" />
</div>
)}
</div>
</div>
)
}
the problem is that when I change for example the useState(3) it shows me like this:
when they should be 3, 4, and 5 they should be gray
and I wanted to ask how I can change through a button?

In your current sample you only check if it is equal.
To check if it is equal or more you need to change current === 1 to current >= 1
To change the current value you need to use the setter` you set for the state like this
<button onClick={() => setCurrent(4)}>Set to 4</button>
(This is a very static way to do it but just to demonstrate how it is done)
To make it a bit more dynamic you can add a function to do it
const changeCurrnet = (dir) => {
const tempCurrent = dir === "up" ? current + 1 : current - 1
setCurrent(tempCurrent )
}
<button onClick={() => changeCurrnet("up")}>Increase</button>
<button onClick={() => changeCurrnet("down")}>Decrease</button>

First of all, you can not figure out the problem because you are doing too many redundant elements in conditional rendering. For example, the first element :
{current === 1 ? (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
) : (
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1">
<BiCheck />
</div>
<div className="w-1 h-10 bg-cyan"></div>
</div>
)}
You are using the same 3 divs inside both of the states, you can reduce it to:
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current != 1) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
After this, debugging can be much easier. So, let's focus on the main problem, you need the current, and below circles to light. You are checking only for the equality, which makes the circle light if and only if the state equals its index. If you want to make it the index and all greater indices, then you need to check for >= not ===.
Your final code may look like:
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 1) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 2) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 3) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 4) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
<div className="relative flex justify-center items-end">
<div className="h-5 w-5 bg-cyan rounded-full absolute z-1"></div>
{(current >= 5) && (<BiCheck />)}
<div className="w-1 h-10 bg-cyan"></div>
</div>
To change using a button, you can then create an event listener on the button to change the state, and react will render the elements again depending on the newly changed state.