Built Twitter Like App - 3

Install Icon

npm install react-icons

Add Sidebar Item

Modify file conmponent/layout/Sidebar.tsx:

import { BsHouseFill, BsBellFill } from 'react-icons/bs'
import { FaUser } from 'react-icons/fa'
import { BiLogOut } from 'react-icons/bi'

import SidebarLog from './SidebarLogo'
import SidebarItem from './SidebarItem'
import SiderbarTweetButton from './SiderbarTweetButton'

const Sidebar = () => {
    const items = [
        {
            label: 'Home',
            href:'/',
            icon: BsHouseFill
        },
        {
            label: 'Notifications',
            href:'/notifications',
            icon: BsBellFill
        },       
        {
            label: 'Profile',
            href:'/users/123',
            icon: FaUser
        },
        
    ]
    
    return(
        <div className='col-span-1 h-full pr-4 pr-6'>
          <div  className='flex flex-col items-end'>
            <div  className='space-y-2 lg:w-[230px]'>
                <SidebarLog />
                {items.map((item) =>(
                    <SidebarItem
                       key={item.href}
                       href={item.href}
                       label={item.label}
                       icon={item.icon}
                    />
                ))}

                <SidebarItem onclick={() => {}} icon={ BiLogOut } label='Logout' href='/'  />
                <SiderbarTweetButton />
            </div>
          </div>
        </div>
    );
}

export default Sidebar

Add file conmponent/layout/SidebarItem.tsx:

import React from "react";
import { IconType } from "react-icons";

interface SidebarItemProps {
    label: string;
    href: string;
    icon: IconType;
    onclick?:() => void;
}

const SidebarItem: React.FC<SidebarItemProps> =({
    label,
    href,
    icon: Icon,
    onclick
}) =>{
    return (
      //Phone View
      <div className="flex flex-row items-center">
        <div 
          className="
            relative
            rounded-full
            h-14
            w-14
            flex
            items-center
            justify-center
            p-4
            hover:bg-slate-300
            hover:bg-opacity-10
            cursor-pointer
            lg:hidden
          "
        >
          <Icon size={28} color="white" />
        </div>

        <div 
          className="
            relative
            hidden
            lg:flex
            items-center
            gap-4
            p-4
            rounded-full
            hover:bg-slate-300
            hover:bg-opacity-10
            cursor-pointer
          "
        >
          <Icon size={24} color="white" />
          <p className="hidden lg:block text-white text-xl">
             {label}
          </p>
        </div>
      </div>
    );
}

export default SidebarItem

Add file conmponent/layout/SidebarLogo.tsx:

import { useRouter } from "next/router";
import { BsTwitter } from 'react-icons/bs'

const SidebarLogo = () => {
    const router = useRouter();
    return(
        <div 
            onClick={()=> router.push('/')} 
            className="
            rounded-full
            h-14
            w-14
            p-4
            flex
            items-center
            hover:bg-sky-700
            hover:bg-opacity-10
            justify-center
            cursor-pointer
            transition
        ">
            <BsTwitter size={28} color= "white" className=""/>
        </div>
    );
}

export default SidebarLogo

Add file conmponent/layout/SiderbarTweetButton.tsx:

import { useRouter } from "next/router";
import { FaFeather } from "react-icons/fa"

const SiderbarTweetButton =() =>{
    const router = useRouter();

    return (
      <div onClick={() => router.push('/')}>
        <div
          className="
            mt-6
            lg:hidden
            rounded-full
            h-14
            w-14
            p-4
            flex
            items-center
            justify-center
            bg-sky-500
            hover:bg-opacity-80
            transition
            cursor-pointer
          "
        >
          <FaFeather size={24} color="white" />
        </div>
        <div
          className="
            mt-6
            hidden
            lg:block
            px-4
            py-2
            rounded-full
            bg-sky-500
            hover:bg-opacity-90
            transition
            cursor-pointer
          "
        >
          <p className="
            hidden
            lg:block
            text-center
            fond-semibold
            text-white
            text-[20px]
          ">
            Tweet
          </p>
        </div>
      </div>
    );
}

export default SiderbarTweetButton

Demo

Small Screen:

Large Screen: