SideBar

[kevinpauljacob]

[kevinpauljacob]

For the sidebar u can use https://insights-v1.vercel.app/ the login register sidebar i have created in this project.

[kevinpauljacob]

"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 = ({ showLogin, setShowLogin }) => {

const handleCloseLogin = () => {
    setShowLogin(false);
}

const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");

const handleUserNameChange = (e: React.ChangeEvent) => {
setUserName(e.target.value);
};

const handlePasswordChange = (e: React.ChangeEvent) => {
setPassword(e.target.value);
};

const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
// Perform login logic here using email and password
console.log("Login submitted!");
};

return (

Welcome Back!

Username:

Password:

Login

Don't have an account? Register

);
};

export default Login;

[kevinpauljacob]

this code above is the login component I have made. U can change this accordingly for what u need.

[kevinpauljacob]

"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(false);
const [showLogin, setShowLogin] = useState(false);
const [showRegister, setShowRegister] = useState(false);

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>
)

}

[kevinpauljacob]

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

[Ahad1317]

working on it