Breaking News: Grepper is joining You.com. Read the official announcement!

collapsed sidebar

Doyin Atobaru answered on October 10, 2024 Popularity 2/10 Helpfulness 1/10

answer collapsed sidebar

related git status command

collapsed sidebar

Comment

import Image from 'next/image'
import { ChartNoAxesColumnIcon, ChevronRightIcon, SettingsIcon } from 'lucide-react'

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { getCurrentProduct } from '@/lib/utils'

type CollapsedSideNavbarProp = {
    openSideNav: () => void
}

const CollapsedSideNavbar = ({ openSideNav }: CollapsedSideNavbarProp) => {
    const currentProduct = getCurrentProduct()

    return (
        <div
            style={{ background: currentProduct.color.background }}
            className="h-screen flex flex-col p-2 space-y-3 items-center"
        >
            <div className="flex flex-col items-center gap-3">
                <div className="space-y-2 px-1 py-2">
                    <Image src={currentProduct.asset.collapsedLogo} width={28} height={28} alt="" />

                    <button
                        onClick={openSideNav}
                        className="flex items-center justify-center rounded-full w-8 h-8 bg-white/10 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
                    >
                        <ChevronRightIcon className="text-[#ACACAD]" width={16} height={16} />
                        <span className="sr-only">Close</span>
                    </button>
                </div>

                <div className="w-10 h-10 bg-[#0B0A0F] p-2  flex items-center justify-center rounded-lg border border-[#201C2C]">
                    <div className="p-1 rounded bg-[#201C2C] flex items-center justify-center">
                        <div className="border border-white rounded-full  flex items-center justify-center">
                            <ChartNoAxesColumnIcon
                                width={16}
                                height={16}
                                className="text-white p-0.5"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <div className="flex-1">
                <div className="w-10 h-12 grid place-items-center">
                    <Image src="/svgs/edit.svg" alt="" width={24} height={24} />
                </div>
            </div>

            <div className="flex flex-col gap-0.5 items-center">
                <Avatar>
                    <AvatarImage
                        src="https://github.com/kwpeepalytics.png"
                        width={40}
                        height={40}
                    />
                    <AvatarFallback>PA</AvatarFallback>
                </Avatar>

                <div className="h-11 w-10 grid place-items-center">
                    <SettingsIcon width={20} height={20} className="text-[#97A3BB]" />
                </div>

                <div className="h-11 w-10 grid place-items-center">
                    <Image src="/svgs/log-out.svg" width={20} height={20} alt="" />
                </div>
            </div>
        </div>
    )
}

export default CollapsedSideNavbar

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: sidebar whatever

Link to this answer
Share Copy Link

Contributed on Oct 10 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

git status command

Comment

git status [<options>] [--] [<pathspec>…]

Popularity 1/10 Helpfulness 1/10 Language shell

Source: git-scm.com

Tags: shell command git-status

Link to this answer
Share Copy Link

Contributed on Oct 10 2024

Disgusted Dotterel

0 Answers Avg Quality 2/10

collapsed sidebar

Contents

More Related Answers

collapsed sidebar

Closely Related Answers

git status command

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.