Skip to content

sidebar #4

Description

@vanshika704

simple sidebar having normal social media functionalities
command : npm install react-icons
Source code :
import ("../index.css");
import { GoHome } from "react-icons/go";
import { SiYoutubeshorts } from "react-icons/si";
import { MdSubscriptions } from "react-icons/md";
import { SiYoutubemusic } from "react-icons/si";
import { BiSolidVideos } from "react-icons/bi";
import { HiDownload } from "react-icons/hi";
function Sidebar(){return (<>

          <aside className="fixed h-screen w-20 flex-col items-center border-r border-black bg-youtubeGray mt-0">
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center ">
                <GoHome size="20px" color="black"/>
                <span className="text-black mt-1 text-xs">Home</span>
            </div>
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center">
                <SiYoutubeshorts size="20px" color="black"/>
                <span className="text-black mt-1 text-xs">Shorts</span>
            </div>
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center">
                <MdSubscriptions size="20px" color="black" />
                <span className="text-black mt-1 text-xs">Subscriptions</span>
            </div>
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center">
                <SiYoutubemusic size="20px" color="black" />
                <span className="text-black mt-1 text-xs">Music</span>
            </div>
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center">
                <BiSolidVideos size="20px" color="black" />
                <span className="text-black mt-1 text-xs">You</span>
            </div>
            <div className="flex flex-col items-center h-[4.5rem] w-full justify-center">
                <HiDownload size="20px" color="black" />
                <span className="text-black mt-1 text-xs">Downloads</span>
            </div>
        </aside>
)} export default Sidebar;

https://github.com/vanshika704/windyui/blob/main/src/components/sidebar.jsx

image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions