Binoculars navbar using HTML, CSS and JavaScript

HTML

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Binoculars navbar using HTML, CSS and JavaScript</title>
</head>

<body>
    <nav>
        <ul class="binoculars-nav">
            <li>Dashboard</li>
            <li>Bookmarks</li>
            <li>Articles</li>
            <li>E-learning</li>
            <li>Profile</li>
            <li>Category</li>
        </ul>
        <ul class="nav-inner">
            <li>
                <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <g id="SVGRepo_iconCarrier">
                        <g id="Layer_2" data-name="Layer 2">
                            <g id="invisible_box" data-name="invisible box">
                                <rect width="48" height="48" fill="none"></rect>
                            </g>
                            <g id="Q3_icons" data-name="Q3 icons">
                                <g>
                                    <path d="M20,4H6A2,2,0,0,0,4,6V20a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V6A2,2,0,0,0,20,4Z">
                                    </path>
                                    <path
                                        d="M42,4H28a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H42a2,2,0,0,0,2-2V6A2,2,0,0,0,42,4Z">
                                    </path>
                                    <path
                                        d="M20,26H6a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V28A2,2,0,0,0,20,26Z">
                                    </path>
                                    <path
                                        d="M42,26H28a2,2,0,0,0-2,2V42a2,2,0,0,0,2,2H42a2,2,0,0,0,2-2V28A2,2,0,0,0,42,26Z">
                                    </path>
                                </g>
                            </g>
                        </g>
                    </g>
                </svg>
            </li>
            <li>
                <svg fill="#000000" viewBox="0 0 256 256" id="Flat" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_iconCarrier">
                        <path
                            d="M192,24H96A16.01833,16.01833,0,0,0,80,40V56H64A16.01833,16.01833,0,0,0,48,72V224a8.00026,8.00026,0,0,0,12.65039,6.50977l51.34277-36.67872,51.35743,36.67872A7.99952,7.99952,0,0,0,176,224V184.6897l19.35059,13.82007A7.99952,7.99952,0,0,0,208,192V40A16.01833,16.01833,0,0,0,192,24Zm0,152.45508-16-11.42676V72a16.01833,16.01833,0,0,0-16-16H96V40h96Z">
                        </path>
                    </g>
                </svg>
            </li>
            <li>
                <svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve"
                    fill="#000000">
                    <g id="SVGRepo_iconCarrier">
                        <g>
                            <path class="st0"
                                d="M421.073,221.719c-0.578,11.719-9.469,26.188-23.797,40.094v183.25c-0.016,4.719-1.875,8.719-5.016,11.844 c-3.156,3.063-7.25,4.875-12.063,4.906H81.558c-4.781-0.031-8.891-1.844-12.047-4.906c-3.141-3.125-4.984-7.125-5-11.844V152.219 c0.016-4.703,1.859-8.719,5-11.844c3.156-3.063,7.266-4.875,12.047-4.906h158.609c12.828-16.844,27.781-34.094,44.719-49.906 c0.078-0.094,0.141-0.188,0.219-0.281H81.558c-18.75-0.016-35.984,7.531-48.25,19.594c-12.328,12.063-20.016,28.938-20,47.344 v292.844c-0.016,18.406,7.672,35.313,20,47.344C45.573,504.469,62.808,512,81.558,512h298.641c18.781,0,36.016-7.531,48.281-19.594 c12.297-12.031,20-28.938,19.984-47.344V203.469c0,0-0.125-0.156-0.328-0.313C440.37,209.813,431.323,216.156,421.073,221.719z">
                            </path>
                            <path class="st0"
                                d="M498.058,0c0,0-15.688,23.438-118.156,58.109C275.417,93.469,211.104,237.313,211.104,237.313 c-15.484,29.469-76.688,151.906-76.688,151.906c-16.859,31.625,14.031,50.313,32.156,17.656 c34.734-62.688,57.156-119.969,109.969-121.594c77.047-2.375,129.734-69.656,113.156-66.531c-21.813,9.5-69.906,0.719-41.578-3.656 c68-5.453,109.906-56.563,96.25-60.031c-24.109,9.281-46.594,0.469-51-2.188C513.386,138.281,498.058,0,498.058,0z">
                            </path>
                        </g>
                    </g>
                </svg>
            </li>
            <li>
                <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_iconCarrier">
                        <path d="M5 0C3.34315 0 2 1.34315 2 3V13C2 14.6569 3.34315 16 5 16H14V14H4V12H14V0H5Z"
                            fill="currentColor"></path>
                    </g>
                </svg>
            </li>
            <li>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_iconCarrier">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM7.07 18.28C7.5 17.38 10.12 16.5 12 16.5C13.88 16.5 16.51 17.38 16.93 18.28C15.57 19.36 13.86 20 12 20C10.14 20 8.43 19.36 7.07 18.28ZM12 14.5C13.46 14.5 16.93 15.09 18.36 16.83C19.38 15.49 20 13.82 20 12C20 7.59 16.41 4 12 4C7.59 4 4 7.59 4 12C4 13.82 4.62 15.49 5.64 16.83C7.07 15.09 10.54 14.5 12 14.5ZM12 6C10.06 6 8.5 7.56 8.5 9.5C8.5 11.44 10.06 13 12 13C13.94 13 15.5 11.44 15.5 9.5C15.5 7.56 13.94 6 12 6ZM10.5 9.5C10.5 10.33 11.17 11 12 11C12.83 11 13.5 10.33 13.5 9.5C13.5 8.67 12.83 8 12 8C11.17 8 10.5 8.67 10.5 9.5Z"
                            fill="currentColor"></path>
                    </g>
                </svg>
            </li>
            <li>
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <g id="SVGRepo_iconCarrier">
                        <path d="M5 7H19" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path d="M5 12L19 12" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                        <path d="M5 17L19 17" stroke="currentColor" stroke-width="3" stroke-linecap="round"
                            stroke-linejoin="round"></path>
                    </g>
                </svg>
            </li>
        </ul>
    </nav>
    </div>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

nav {
    --binoculars-nav-top-offset: 5px;
    --items: 6;
    --item-width: 90px;
    --current-item: 0;
    --enter-nav: 0;
    /* --colorful: 0; */
    position: relative;
}

nav .nav-inner,
nav .binoculars-nav {
    list-style: none;
    display: flex;
    white-space: nowrap;
}

nav .binoculars-nav {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    transform: translate(calc(var(--x) * var(--item-width)), calc(var(--y) * (var(--item-width) * 0.5)));
    bottom: calc(100% + var(--binoculars-nav-top-offset));
    width: calc(var(--items) * var(--item-width));
    height: 100%;
    opacity: var(--enter-nav);
    background-color: hsl(calc(10 + var(--current-item) * 50), 80%, calc(50% * var(--enter-nav)), max(0.5, calc(var(--enter-nav) * 1)));

clip-path: inset(0 calc(100% - (var(--item-width) * (var(--current-item) + 1))) 0 calc(var(--item-width) * var(--current-item)) round 10px);
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

nav .binoculars-nav li {
    width: var(--item-width);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(0 0 0 / 0.8);
}

nav .nav-inner {
    border-radius: 50px;
    background-color: hsl(calc(10 + var(--current-item) * 50), 100%, max(calc(100% * (1 - var(--enter-nav))), calc(90% * var(--enter-nav))));
    border: 1px solid rgba(0 0 0 / 0.15);
    box-shadow: 0 10px 10px -5px rgba(0 0 0 / 0.15);
    transition: background-color 0.3s;
}

nav .nav-inner li {
    --item-hover: 0;
    width: calc(var(--item-width));
    aspect-ratio: 2/1.2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(calc(10 + var(--i) * 50), 80%, calc(50% * var(--item-hover)), max(0.5, calc(var(--item-hover) * 1)));
    border-radius: 50%;
    transition: color 0.3s;
}

nav .nav-inner li svg {
    width: 45px;
    padding: 5px;
    aspect-ratio: 1;
    fill: currentColor;
    border-radius: 50%;
    overflow: visible;
    transition: background-color 0.3s;
    cursor: pointer;
}

nav .nav-inner li:hover {
    --item-hover: 1;
}

JS