I want to redirect to a totally different url with my Link component (from react-router-dom), but instead, it just adds those characters to my current url.
For example, if I click this Link being on "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc"
<Link to={`user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
<img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
<p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
</Link>
It goes to "http://localhost:3000/pin-detail/5HHceZ3LuAltt4AEKn2LYc/user-profile/104293279805278412025". I want that the link redirects me to "localhost:3000/user-profile/${pinDetail.postedBy?._id".
How can I do that?
You need to add a / before as saied on comment by Matt, like this
<Link to={`/user-profile/${pinDetail.postedBy?._id}`} className='flex gap-2 m5-5 items-center bg-white dark:bg-darkg rounded-lg mt-2'>
<img src={pinDetail.postedBy?.image} alt="user-profile" className='w-8 h-8 rounded-full object-cover' />
<p className='font-semibold capitalize dark:text-white'>{pinDetail.postedBy?.userName}</p>
</Link>
Related
When I scroll down after I've opened the menu bar in mobile and then scroll up, the logo and "x" button disappears and other areas of the page are showing instead. I know that the solution to it is make it so there won't be anything to scrol down since it's a menu bar but I can't find a way to it. I know that one thing that causes a scroll bar to appear is when you have margin and I've checked and no margin.
I've taken a video of the screen but apparentley can't upload a video here...
I've tried using h-screen and h-full, changed fixed property to sticky
Anyway here's the code
const Navbar = () => {
const [nav, setNav] = useState(false);
const { user, logout } = UserAuth();
const navigate = useNavigate();
const handleNav = () => {
setNav(!nav);
};
const handleSignOut = async () => {
try {
await logout();
navigate("/");
} catch (e) {
console.log(e.message);
}
};
return (
<div className=" md:rounded-div flex items-center justify-between h-20 font-bold">
<Link to="/">
<h1 className="text-2xl">Cryptoboss</h1>
</Link>
<div className="hidden md:block">
<ThemeToggle />
</div>
{user?.email ? (
<div>
<Link to="/account" className="hidden md:block p-4">
Account
</Link>
</div>
) : (
<div className="hidden md:block">
<Link to="/signin" className="p-4 hover:text-accent">
Sign In
</Link>
<Link
to="/signup"
className="bg-button text-btnText px-5 py-2 ml-2 rounded-2xl shadow-lg hover:shadow-2xl"
>
Sign Up
</Link>
</div>
)}
{/* Menu Icon */}
<div onClick={handleNav} className="block md:hidden cursor-pointer z-10">
{nav ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
</div>
{/* Mobile Menu */}
<div
className={
nav
? "md:hidden fixed left-0 top-20 flex flex-col items-center justify-between w-full h-full bg-primary ease-in duration-300 z-10"
: "fixed left-[-100%] top-20 h-[90%] flex flex-col items-center justify-between ease-in duration-300"
}
>
<ul className="w-full p-4">
<li onClick={handleNav} className="border-b py-6">
<Link to="/">Home</Link>
</li>
<li onClick={handleNav} className="border-b py-6">
<Link to="/account">Account</Link>
</li>
<li className=" py-6">
<ThemeToggle />
</li>
<div className="flex flex-row ">
<li>
<Link to="/signin">
<button
onClick={handleNav}
className="flex my-2 py-3 px-10 mr-11 ml-5 bg-primary text-primary border border-secondary rounded-2xl shadow-xl"
>
Sign In
</button>
</Link>
</li>
<li>
<Link onClick={handleNav} to="/signup">
<button className="flex my-2 py-3 px-10 bg-button text-btnText rounded-2xl shadow-xl">
Sign Up
</button>
</Link>
</li>
</div>
</ul>
{/* <div className="flex flex-col w-full h-screen inline-block p-4"></div> */}
</div>
</div>
);
};
export default Navbar;
I believe that the change that needs to be done is in the div below:
<div
className={
nav
? "md:hidden fixed left-0 top-20 flex flex-col items-center justify-between w-full h-full bg-primary ease-in duration-300 z-10"
: "fixed left-[-100%] top-20 h-[90%] flex flex-col items-center justify-between ease-in duration-300"
}
For context, I followed this navbar component guide https://dev.to/andrewespejo/how-to-design-a-simple-and-beautiful-navbar-using-nextjs-and-tailwindcss-26p1
As stated, I am creating a website, but the Hamburger menu, when clicked, won't drop down. I also used TailwindCSS to create responsiveness within the website, where the hamburger menu only shows within the mobile view of the website. I believe the ternary operator should be working, but I don't believe the onClick method is working.
import Link from 'next/link';
import { useState } from 'react';
export const Navbar = () => {
const [navbar, setNavbar] = useState(false);
const handleClick = () => {
setNavbar(!navbar);
console.log("clicked");
};
return (
<>
<nav className='flex items-center flex-wrap bg-blue-400 p-3 '>
<Link href='/'>
<a className='inline-flex items-center p-2 mr-4 '>
<svg
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
className='fill-current text-white h-8 w-8 mr-2'
>
<path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
</svg>
<span className='text-xl text-white font-bold uppercase tracking-wide'>
Portfolio
</span>
</a>
</Link>
<button className=' inline-flex p-3 hover:bg-blue-500 rounded lg:hidden text-white ml-auto hover:text-white outline-none' onClick={handleClick}>
<svg
className='w-6 h-6'
fill='none'
stroke='currentColor'
viewBox='0 0 24 24'
xmlns='http://www.w3.org/2000/svg'
>
<path
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={2}
d='M4 6h16M4 12h16M4 18h16'
/>
</svg>
</button>
<div className={` ${
navbar ? '' : 'hidden'
} w-full lg:inline-flex lg:flex-grow lg:w-auto`}>
<div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start flex flex-col lg:h-auto'>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-blue-500 hover:text-white '>
Home
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-blue-500 hover:text-white'>
Experience
</a>
</Link>
<Link href='/about'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-blue-500 hover:text-white'>
About
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-blue-500 hover:text-white'>
Projects
</a>
</Link>
<Link href='/'>
<a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-blue-500 hover:text-white'>
Contact
</a>
</Link>
</div>
</div>
</nav>
</>
);
};
`
I have tried testing the onclick function by adding test buttons but they weren't displaying on the navbar.
try giving the onclick an anonymous function.
<button className='inline-flex p-3 hover:bg-blue-500 rounded lg:hidden text-white ml-auto hover:text-white outline-none' onClick={()=>handleClick()}>
i'm trying to put OAuth in my project but after i log in with my gmail the default redirect page will show up and say's that i have to
Try signing in with a different account.
here's my code
import Image from "next/image"
import { signIn } from "next-auth/react"
export default function Login({ provider }) {
return (
<div className="flex flex-col items-center space-y-20 pt-48">
<Image
src="/image/pictures/twitter-icon-svg-28.jpg"
width={150}
height={150}
objectFit="contain"
className="bg-transparent"
/>
{Object.values(provider).map(provider => {
return (
<div key={provider.name} className="flex flex-col items-center space-y-20 pt-48">
<button onClick={() => signIn(provider.id, { callbackUrl: "/" })}>
<a href="#_" className="relative inline-flex items-center justify-center px-6 py-3 text-lg font-medium tracking-tighter text-white bg-gray-800 rounded-md group">
<span className="absolute inset-0 w-full h-full mt-1 ml-1 transition-all duration-300 ease-in-out bg-blue-600 rounded-md group-hover:mt-0 group-hover:ml-0"></span>
<span className="absolute inset-0 w-full h-full bg-white rounded-md "></span>
<span className="absolute inset-0 w-full h-full transition-all duration-200 ease-in-out delay-100 bg-blue-600 rounded-md opacity-0 group-hover:opacity-100 "></span>
<span className="relative text-blue-600 transition-colors duration-200 ease-in-out delay-100 group-hover:text-white">
Signin With {provider.name}
</span>
</a>
</button>
</div>
)
})}
</div>
)
}
i set everything needed for google credential and nextauth_URL in env.local file but i don't know why am i getting 302 redirect error and cant log in into my website
I am trying to create tooltip here by using Tailwind css and displaying it on Pebble SVG
<div className="relative items-center group">
<span tw="flex items-center gap-1">
Payment method
<Pebble />
</span>
<div tw="bottom-0 flex flex-col items-center hidden group-hover:flex">
<span tw="relative p-2 text-sm text-inkWhite-100 bg-inkBlack-100">
If you'd like to change your payment method, go to section.
</span>
<div tw="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
</div
Any other way around for it?
Its been a while since I coded in react and I'm working on teaching myself again. Also this is the first time I've used Tailwind CSS. I'm working with a navbar component that has a search bar to filter data within a database. I have everything setup correctly for the most part. The issue is that when you type in the search bar, the user img, and buttons moved like the nav sections is being pushed down when the filter response shows up below the search bar.
Here is my code for the navbar with the search bar
import React, { useState } from "react";
import UserDropdown from "../../components/Dropdowns/UserDropdown.js";
import AccountDropdown from "../Dropdowns/AccountDropdown.js";
export default function Navbar({ data }) {
const [filteredData, setFilteredData] = useState([]);
const [wordEntered, setWordEntered] = useState("");
const handleFilter = (event) => {
const searchWord = event.target.value;
setWordEntered(searchWord);
const newFilter = data.filter((value) => {
return value.dealership.toLowerCase().includes(searchWord.toLowerCase());
});
if (searchWord === "") {
setFilteredData([]);
} else {
setFilteredData(newFilter);
}
};
return (
<>
{/* Navbar */}
<div className="relative bg-lightBlue-600 md:pt-32 pb-32 pt-12">
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4">
<div className="w-full mx-autp items-center flex justify-between md:flex-nowrap flex-wrap md:px-10 px-4">
{/* Brand */}
<a
className="text-white text-sm uppercase hidden lg:inline-block font-semibold"
href="#pablo"
onClick={(e) => e.preventDefault()}
>
Dashboard
</a>
<div className="md:flex flex-row flex-wrap items-center lg:ml-auto mr-3">
<AccountDropdown />
</div>
{/* Form */}
<form className="md:flex hidden flex-row flex-wrap items-center lg:ml-auto mr-3">
<div className="relative flex w-full flex-wrap items-stretch">
<span className="z-10 h-full leading-snug font-normal absolute text-center text-blueGray-300 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
<i className="fas fa-search"></i>
</span>
<input
type="text"
placeholder="Search here..."
className="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 relative bg-white bg-white rounded text-sm shadow outline-none focus:outline-none focus:ring w-full pl-10"
value={wordEntered}
onChange={handleFilter}
/>
</div>
{filteredData.length != 0 && (
<div className="dataResult">
{filteredData.slice(0, 15).map((value) => {
return (
<a className="dataItem" href="/admin/dashboard">
<p>{value.dealership}</p>
</a>
);
})}
</div>
)}
</form>
{/* User */}
<ul className="flex-col md:flex-row list-none items-center hidden md:flex">
<UserDropdown />
</ul>
</div>
</nav>
</div>
{/* End Navbar */}
</>
);
}
Here are a few pics of what it does.
I guess it is because of align-items property. When the data shows, the height of the component is changing so alignment should be flex-start in css. You can remove items-center because its default value is flex-start in css. Or you can replace with items-start.
You wrote
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-center p-4">
And I think it should be like this
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex items-start p-4">
Or this
<nav className="absolute top-0 left-0 w-full z-10 bg-transparent md:flex-row md:flex-nowrap md:justify-start flex p-4">