Open kevinpauljacob opened 1 year ago
For the sidebar u can use https://insights-v1.vercel.app/ the login register sidebar i have created in this project.
"use client" import React, { useState } from "react"; import { PiArrowBendDoubleUpRightDuotone } from 'react-icons/pi'
interface LoginProps {
showLogin: boolean;
setShowLogin: React.Dispatch<React.SetStateAction
const Login: React.FC
const handleCloseLogin = () => {
setShowLogin(false);
}
const [userName, setUserName] = useState(""); const [password, setPassword] = useState("");
const handleUserNameChange = (e: React.ChangeEvent
const handlePasswordChange = (e: React.ChangeEvent
const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); // Perform login logic here using email and password console.log("Login submitted!"); };
return (
); };
export default Login;
this code above is the login component I have made. U can change this accordingly for what u need.
"use client" import { useState } from "react" import Link from "next/link" import Image from "next/image" import { SlMenu } from 'react-icons/sl' import { BsBell } from 'react-icons/bs' import { PiPenNibBold, PiArrowBendDoubleUpLeftDuotone } from 'react-icons/pi'
import me from '/public/assets/me.jpg' import Login from "../auth/Login" import Register from "../auth/Register"
export default function Navbar() {
const [showMenu, setShowMenu] = useState
const handleMenu = () => {
setShowMenu(!showMenu);
}
const handleLogin = () => {
setShowLogin(!showLogin);
if(showRegister) setShowRegister(false);
}
const handleRegister = () => {
setShowRegister(!showRegister);
if(showLogin) setShowLogin(false);
}
const links = [
{name: "Latest Articles", href: "/"},
{name: "Your Reading List", href: "/readinglist"},
{name: "Explore Creators", href: "/creators"}
];
return (
<header>
<nav className="flex justify-between items-end border-b border-black/20 sm:pb-5 pb-3">
<div className="flex items-end">
<h3 className="text-2xl font-bold mr-2">
INSIGHTS
</h3>
<ul className="hidden md:flex mb-[3px]">
{
links.map((link, index) => (
<Link key={index} href={link.href} className="text-sm lg:text-md font-semibold mx-2">{link.name}</Link>
))
}
</ul>
</div>
{/* <div className="flex justify-between items-center">
<div>
<BsBell/>
</div>
<Image className="w-12 h-12 mx-3 filter grayscale rounded-full" src={me} alt="Kevin Paul"/>
<Link href="/write" className="flex items-center bg-black/10 rounded-md p-2">
<span className="text-sm font-semibold mr-2">Write</span>
<div>
<PiPenNibBold/>
</div>
</Link>
</div> */}
<div className="flex">
<button onClick={handleLogin} className="font-semibold mr-2">Login</button>
<button onClick={handleRegister} className="font-semibold mx-2">Register</button>
<SlMenu onClick={handleMenu} className="md:hidden text-xl ml-2"/>
</div>
</nav>
<div className={`${showLogin ? "right-0 transition ease-in duration-500" : "right-0 translate-x-[700px] transition ease-out duration-500"} fixed z-20 top-0 flex justify-end h-screen bg-white rounded-l-md shadow-2xl min-h-screen sm:w-[385px] w-full`}>
<Login showLogin={showLogin} setShowLogin={setShowLogin}/>
</div>
<div className={`${showRegister ? "right-0 transition ease-in duration-500" : "right-0 translate-x-[700px] transition ease-out duration-500"} fixed z-20 top-0 flex justify-end h-screen bg-white rounded-l-md shadow-2xl min-h-screen sm:w-[385px] w-full`}>
<Register showRegister={showRegister} setShowRegister={setShowRegister}/>
</div>
<div className={`${showMenu ? "md:hidden left-0 transition ease-in duration-500" : "left-0 -translate-x-[700px] transition ease-out duration-500"} fixed z-20 top-0 flex justify-center items-center h-screen bg-white text-black rounded-l-md shadow-2xl min-h-screen sm:w-[385px] w-full`}>
<ul className="flex flex-col justify-center items-center md:hidden mb-[3px]">
{
links.map((link, index) => (
<Link key={index} href={link.href} className="text-md lg:text-md font-semibold underline m-2">{link.name}</Link>
))
}
</ul>
<button onClick={handleMenu} className="fixed top-5 left-5 text-3xl">
<PiArrowBendDoubleUpLeftDuotone/>
</button>
</div>
</header>
)
}
This is where i have imported the login component notice that the sidebar comes from right and we need from left. Just use the styles given for this component
working on it