react-infinity-sidebar/src/index.css

A fully customizable and responsive sidebar component for React applications, built with TailwindCSS and Headless UI. Easily integrate dynamic navigation menus, dark mode, and various styling options. Designed for dashboards, admin panels, and modern web

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

.font-inter_medium {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 500;
}

.font-inter_regular {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 400;
}

::-webkit-scrollbar {
    width: 0;
}

.sidebar_layout_desktop::-webkit-scrollbar,
.sidebar_layout_content::-webkit-scrollbar {
    width: 5px !important;
}

.sidebar_layout_content::-webkit-scrollbar {
    width: 7px !important;
}

.sidebar_layout_desktop::-webkit-scrollbar-thumb,
.sidebar_layout_content::-webkit-scrollbar-thumb {
    background-color: rgb(214, 214, 214);
}

/* loader */
.loading1 {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.loader {
    position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    perspective: 800px;
}

.inner {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.inner.one {
    left: 0%;
    top: 0%;
    animation: rotate-one 1s linear infinite;
    border-bottom: 3px solid #42a8a0;
}

.inner.two {
    right: 0%;
    top: 0%;
    animation: rotate-two 1s linear infinite;
    border-right: 3px solid #21a8d1;
}

.inner.three {
    right: 0%;
    bottom: 0%;
    animation: rotate-three 1s linear infinite;
    border-top: 3px solid #42a8a0;
}

.sidebar_menu_line_clamp {
    white-space: nowrap;
    /* Matnni faqat bir qatorga joylashtiradi */
    overflow: hidden;
    /* Matn qator sig‘masa, kesadi */
    text-overflow: ellipsis;
    /* Kesilgan matn oxiriga "..." qo'shadi */
}

@keyframes rotate-one {
    0% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
    }
}

@keyframes rotate-two {
    0% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
    }
}

@keyframes rotate-three {
    0% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
    }

    100% {
        transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
    }
}

.sidebar_mobile_animation_open {
    animation: sidebar_mobile_animation_width_open 0.2s alternate;
}

.sidebar_mobile_animation_close {
    animation: sidebar_mobile_animation_width_close 0.2s alternate;
}

.drawer_open {
    animation: drawer_open 0.2s alternate;
}

.drawer_close {
    animation: drawer_close 0.2s alternate;
}


.drawer_animation_open {
    animation: drawer_animation_open 0.2s alternate;
}

.drawer_visible_content {
    animation: drawer_animation_open .8s alternate;
}

@keyframes drawer_animation_open {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes drawer_open {
    0% {
        width: 0;
    }

    100% {
        width: 375px;
    }
}

/* sidebar open */
@media (max-width: 992px) {
    @keyframes sidebar_mobile_animation_width_open {
        0% {
            width: 0;
        }

        100% {
            width: 80%;
        }
    }

}

@media (max-width: 378px) {
    @keyframes sidebar_mobile_animation_width_open {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes drawer_open {
        0% {
            width: 0;
        }

        100% {
            width: 100%;
        }
    }
}

/* sidebar close */
@media (max-width: 768px) {
    @keyframes sidebar_mobile_animation_width_close {
        0% {
            width: 80%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes drawer_close {
        0% {
            width: 30%;
        }

        100% {
            width: 0;
        }
    }
}

@media (max-width: 320px) {
    @keyframes sidebar_mobile_animation_width_close {
        0% {
            width: 100%;
        }

        100% {
            width: 0;
        }
    }

    @keyframes drawer_close {
        0% {
            width: 100%;
        }

        100% {
            width: 0;
        }
    }
}


/* darkmode */
.sidebar_switch_container label {
    width: 50px;
    height: 24px;
    position: relative;
    display: block;
    /* background: #ebebeb; */
    border-radius: 200px;
    box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.366), inset 0px -5px 10px rgba(255, 255, 255, 0.396);
    cursor: pointer;
    transition: 0.3s;
}

.sidebar_switch_container label:after {
    content: "";
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(180deg, #ffcc89, #d8860b);
    border-radius: 180px;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar_switch_container label svg {
    position: absolute;
    width: 15px;
    top: 4px;
    z-index: 10;
}

.sidebar_switch_container label svg.sun {
    left: 4.5px;
    fill: #fff;
    transition: 0.3s;
}

.sidebar_switch_container label svg.moon {
    left: 31px;
    fill: #7e7e7e;
    transition: 0.3s;
}

.sidebar_switch_container input {
    width: 0;
    height: 0;
    visibility: hidden;
}

.sidebar_switch_container input:checked+label {
    background: #242424;
}

.sidebar_switch_container input:checked+label:after {
    left: 50px;
    transform: translateX(-100%);
    background: linear-gradient(180deg, #777, #3a3a3a);
}

.sidebar_switch_container input:checked+label svg.sun {
    fill: #7e7e7e;
}

.sidebar_switch_container input:checked+label svg.moon {
    fill: #fff;
}

.sidebar_switch_container input:checked+label+.background {
    background: #242424;
}

.sidebar_switch_container input:active:after {
    width: 60px;
}


/* animate microphone effect */
.box_sidebar_infinity {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.object_sidebar_infinity {
    display: flex;
    justify-content: center;
    align-items: center;
}

.outline_sidebar_infinity {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid #B5A4A4;
    animation: pulse 3s ease-out infinite;
    position: absolute;
}

.button_sidebar_infinity {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #50CDDD;
    box-shadow: 0px 0px 5px #0084F9;
    position: absolute;
}

@keyframes pulse {
    0% {
        transform: scale(0);
        opacity: 0;
        border: 4px solid #0B3082;
    }

    50% {
        border: solid #A3FFC2;
        opacity: 0.8;
    }

    90% {
        transform: scale(2.2);
        opacity: 0.2;
        border: 1px solid #2E3CFF;
    }

    100% {
        transform: scale(2.4);
        opacity: 0;
        border: 0.5px solid #7A89FF;
    }
}

#delayed {
    animation-delay: 0.5s;
}

#circlein {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #6BD6E1;
    box-shadow: 0px -1px 3px #E0FF94;
    position: absolute;
}

.mic-icon_sidebar_infinity {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: #1E2D70;
}

.mic-icon_sidebar_infinity_gray {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: gray;
}