;
<nav
class="sticky bg-[#fafafa] dark:bg-black top-0 flex px-5 py-6 justify-between h-fit items-center w-full mx-auto border-b dark:border-zinc-900 border-gray-200">
<a href="#">
<!-- LOGO -->
<svg class="text-zinc-900 dark:text-zinc-50" width="97" height="27" viewBox="0 0 97 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.576 32.576C10.176 32.576 8.272 31.792 6.864 30.224C5.488 28.624 4.8 26.352 4.8 23.408V11.696H0.48V7.952H4.896L5.808 0.079999H9.12V7.952H16.032V11.696H9.12V23.744C9.12 25.6 9.504 26.896 10.272 27.632C11.072 28.368 12.016 28.736 13.104 28.736C13.904 28.736 14.656 28.608 15.36 28.352C16.096 28.096 16.768 27.792 17.376 27.44L18.576 30.896C17.936 31.28 17.072 31.648 15.984 32C14.896 32.384 13.76 32.576 12.576 32.576ZM31.5326 32.576C29.4526 32.576 27.5646 32.048 25.8686 30.992C24.1726 29.936 22.8126 28.448 21.7886 26.528C20.7966 24.576 20.3006 22.288 20.3006 19.664C20.3006 17.168 20.7966 14.928 21.7886 12.944C22.8126 10.96 24.2046 9.392 25.9646 8.24C27.7566 7.056 29.8046 6.464 32.1086 6.464C33.5486 6.464 34.8446 6.72 35.9966 7.232C37.1806 7.712 38.2046 8.32 39.0686 9.056V7.04H43.0046V25.952C43.0046 27.168 43.2926 27.968 43.8686 28.352C44.4766 28.704 45.1326 28.88 45.8366 28.88L44.9246 32.24C41.8526 32.24 39.9966 30.992 39.3566 28.496C38.6206 29.52 37.6126 30.464 36.3326 31.328C35.0846 32.16 33.4846 32.576 31.5326 32.576ZM32.4926 28.736C33.7086 28.736 34.8606 28.448 35.9486 27.872C37.0366 27.264 37.9486 26.512 38.6846 25.616V12.224C37.8206 11.616 36.8606 11.136 35.8046 10.784C34.7806 10.4 33.6926 10.208 32.5406 10.208C31.0046 10.208 29.6446 10.608 28.4606 11.408C27.3086 12.176 26.3966 13.264 25.7246 14.672C25.0526 16.048 24.7166 17.664 24.7166 19.52C24.7166 21.312 25.0526 22.912 25.7246 24.32C26.3966 25.696 27.3246 26.784 28.5086 27.584C29.6926 28.352 31.0206 28.736 32.4926 28.736ZM61.2169 32.576C58.8489 32.576 56.7689 32.032 54.9769 30.944C53.2169 29.824 51.8569 28.288 50.8969 26.336C49.9369 24.352 49.4569 22.08 49.4569 19.52C49.4569 17.12 49.9369 14.928 50.8969 12.944C51.8889 10.96 53.2969 9.392 55.1209 8.24C56.9449 7.056 59.0889 6.464 61.5529 6.464C62.9609 6.464 64.1929 6.592 65.2489 6.848C66.3369 7.104 67.3769 7.472 68.3689 7.952L67.0729 11.6C66.1769 11.152 65.3129 10.832 64.4809 10.64C63.6809 10.416 62.7849 10.304 61.7929 10.304C59.5529 10.304 57.6649 11.12 56.1289 12.752C54.6249 14.352 53.8729 16.576 53.8729 19.424C53.8729 21.152 54.1929 22.72 54.8329 24.128C55.4729 25.536 56.3529 26.656 57.4729 27.488C58.6249 28.32 59.9689 28.736 61.5049 28.736C62.7209 28.736 63.7609 28.608 64.6249 28.352C65.4889 28.064 66.4169 27.664 67.4089 27.152L68.7529 30.8C67.7609 31.344 66.6409 31.776 65.3929 32.096C64.1769 32.416 62.7849 32.576 61.2169 32.576ZM83.8208 32.576C81.4528 32.576 79.3248 32.032 77.4368 30.944C75.5488 29.824 74.0608 28.288 72.9728 26.336C71.9168 24.352 71.3888 22.08 71.3888 19.52C71.3888 16.832 71.9328 14.512 73.0208 12.56C74.1088 10.608 75.5968 9.104 77.4848 8.048C79.3728 6.992 81.4848 6.464 83.8208 6.464C86.1568 6.464 88.2528 6.992 90.1088 8.048C91.9968 9.104 93.4848 10.608 94.5728 12.56C95.6928 14.48 96.2528 16.768 96.2528 19.424C96.2528 22.08 95.7088 24.4 94.6208 26.384C93.5328 28.336 92.0448 29.856 90.1568 30.944C88.3008 32.032 86.1888 32.576 83.8208 32.576ZM83.8208 28.736C86.3488 28.736 88.3168 27.888 89.7248 26.192C91.1328 24.464 91.8368 22.24 91.8368 19.52C91.8368 17.856 91.4848 16.336 90.7808 14.96C90.0768 13.552 89.1168 12.432 87.9008 11.6C86.7168 10.736 85.3568 10.304 83.8208 10.304C81.2928 10.304 79.3248 11.136 77.9168 12.8C76.5088 14.464 75.8047 16.672 75.8047 19.424C75.8047 21.088 76.1568 22.64 76.8608 24.08C77.5648 25.488 78.5088 26.624 79.6928 27.488C80.9088 28.32 82.2848 28.736 83.8208 28.736Z"
fill="currentColor" />
</svg>
</a>
<!-- MENU ICON -->
<svg
id="menu"
class="dark:text-white text-slate-950 cursor-pointer sm:hidden"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
<!-- SIDE BAR -->
<!-- Toggle flex and hidden class of UL for visibility -->
<ul
id="sidemenu"
class="flex sm:!flex hidden sm:justify-center gap-8 font-semibold text-slate-700 dark:text-zinc-400 max-sm:fixed max-sm:inset-[0_0_auto_auto] max-sm:flex-col max-sm:h-screen max-sm:pr-32 max-sm:pl-8 max-sm:pt-16 max-sm:border-l dark:max-sm:border-zinc-900 max-sm:backdrop-blur-md max-sm:bg-white/50 dark:max-sm:bg-black/50">
<li class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors p-6 absolute top-0 right-0 sm:hidden">
<!-- CLOSE ICON -->
<svg
id="close"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</li>
<li><a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors" href="#">Home</a></li>
<li><a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors" href="#">Services</a></li>
<li><a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors" href="#">About</a></li>
<li><a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors" href="#">Contact</a></li>
</ul>
</nav>
<!--Updated2 -->let menu = document.querySelector("#menu");
let close = document.querySelector("#close");
let sidemenu = document.querySelector("#sidemenu");
menu.onclick = toggleSideBar;
close.onclick = toggleSideBar;
function toggleSideBar() {
sidemenu.classList.toggle("hidden");
};
<nav class="sticky top-0 flex px-5 py-5 h-fit justify-between items-center w-full mx-auto border-b dark:border-zinc-900 border-gray-200">
<!-- LOGO -->
<a href="#"> <svg class="dark:text-white text-slate-950" width="81" height="25" viewBox="0 0 81 28" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M10.48 27.48C8.48 27.48 6.89333 26.8267 5.72 25.52C4.57333 24.1867 4 22.2933 4 19.84V10.08H0.4V6.96H4.08L4.84 0.399999H7.6V6.96H13.36V10.08H7.6V20.12C7.6 21.6667 7.92 22.7467 8.56 23.36C9.22667 23.9733 10.0133 24.28 10.92 24.28C11.5867 24.28 12.2133 24.1733 12.8 23.96C13.4133 23.7467 13.9733 23.4933 14.48 23.2L15.48 26.08C14.9467 26.4 14.2267 26.7067 13.32 27C12.4133 27.32 11.4667 27.48 10.48 27.48ZM26.2772 27.48C24.5439 27.48 22.9705 27.04 21.5572 26.16C20.1439 25.28 19.0105 24.04 18.1572 22.44C17.3305 20.8133 16.9172 18.9067 16.9172 16.72C16.9172 14.64 17.3305 12.7733 18.1572 11.12C19.0105 9.46667 20.1705 8.16 21.6372 7.2C23.1305 6.21333 24.8372 5.72 26.7572 5.72C27.9572 5.72 29.0372 5.93333 29.9972 6.36C30.9839 6.76 31.8372 7.26667 32.5572 7.88V6.2H35.8372V21.96C35.8372 22.9733 36.0772 23.64 36.5572 23.96C37.0639 24.2533 37.6105 24.4 38.1972 24.4L37.4372 27.2C34.8772 27.2 33.3305 26.16 32.7972 24.08C32.1839 24.9333 31.3439 25.72 30.2772 26.44C29.2372 27.1333 27.9039 27.48 26.2772 27.48ZM27.0772 24.28C28.0905 24.28 29.0505 24.04 29.9572 23.56C30.8639 23.0533 31.6239 22.4267 32.2372 21.68V10.52C31.5172 10.0133 30.7172 9.61333 29.8372 9.32C28.9839 9 28.0772 8.84 27.1172 8.84C25.8372 8.84 24.7039 9.17333 23.7172 9.84C22.7572 10.48 21.9972 11.3867 21.4372 12.56C20.8772 13.7067 20.5972 15.0533 20.5972 16.6C20.5972 18.0933 20.8772 19.4267 21.4372 20.6C21.9972 21.7467 22.7705 22.6533 23.7572 23.32C24.7439 23.96 25.8505 24.28 27.0772 24.28Z" /> <path fill="currentColor" d="M51.4047 27.48C49.4314 27.48 47.698 27.0267 46.2047 26.12C44.738 25.1867 43.6047 23.9067 42.8047 22.28C42.0047 20.6267 41.6047 18.7333 41.6047 16.6C41.6047 14.6 42.0047 12.7733 42.8047 11.12C43.6314 9.46667 44.8047 8.16 46.3247 7.2C47.8447 6.21333 49.6314 5.72 51.6847 5.72C52.858 5.72 53.8847 5.82667 54.7647 6.04C55.6714 6.25333 56.538 6.56 57.3647 6.96L56.2847 10C55.538 9.62667 54.818 9.36 54.1247 9.2C53.458 9.01333 52.7114 8.92 51.8847 8.92C50.018 8.92 48.4447 9.6 47.1647 10.96C45.9114 12.2933 45.2847 14.1467 45.2847 16.52C45.2847 17.96 45.5514 19.2667 46.0847 20.44C46.618 21.6133 47.3514 22.5467 48.2847 23.24C49.2447 23.9333 50.3647 24.28 51.6447 24.28C52.658 24.28 53.5247 24.1733 54.2447 23.96C54.9647 23.72 55.738 23.3867 56.5647 22.96L57.6847 26C56.858 26.4533 55.9247 26.8133 54.8847 27.08C53.8714 27.3467 52.7114 27.48 51.4047 27.48ZM70.2413 27.48C68.2679 27.48 66.4946 27.0267 64.9213 26.12C63.3479 25.1867 62.1079 23.9067 61.2013 22.28C60.3213 20.6267 59.8813 18.7333 59.8813 16.6C59.8813 14.36 60.3346 12.4267 61.2413 10.8C62.1479 9.17333 63.3879 7.92 64.9613 7.04C66.5346 6.16 68.2946 5.72 70.2413 5.72C72.1879 5.72 73.9346 6.16 75.4813 7.04C77.0546 7.92 78.2946 9.17333 79.2013 10.8C80.1346 12.4 80.6013 14.3067 80.6013 16.52C80.6013 18.7333 80.1479 20.6667 79.2413 22.32C78.3346 23.9467 77.0946 25.2133 75.5213 26.12C73.9746 27.0267 72.2146 27.48 70.2413 27.48ZM70.2413 24.28C72.3479 24.28 73.9879 23.5733 75.1613 22.16C76.3346 20.72 76.9213 18.8667 76.9213 16.6C76.9213 15.2133 76.6279 13.9467 76.0413 12.8C75.4546 11.6267 74.6546 10.6933 73.6413 10C72.6546 9.28 71.5213 8.92 70.2413 8.92C68.1346 8.92 66.4946 9.61333 65.3213 11C64.1479 12.3867 63.5612 14.2267 63.5612 16.52C63.5612 17.9067 63.8546 19.2 64.4413 20.4C65.0279 21.5733 65.8146 22.52 66.8013 23.24C67.8146 23.9333 68.9613 24.28 70.2413 24.28Z" /> </svg> </a>
<!-- MENU ICON -->
<svg class="sm:hidden dark:text-white text-slate-950" id="menu" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="3" y1="12" x2="21" y2="12" /> <line x1="3" y1="6" x2="21" y2="6" /> <line x1="3" y1="18" x2="21" y2="18" /> </svg>
<!-- NAV LINKS -->
<ul
id="sidemenu"
class="flex w-full sm:!flex hidden items-center sm:justify-center gap-8 font-semibold text-slate-700/90 dark:text-zinc-300 max-sm:fixed max-sm:inset-[0_0_auto_auto] max-sm:flex-col max-sm:h-screen max-sm:w-screen max-sm:pt-16 max-sm:backdrop-blur-md max-sm:bg-white/50 dark:max-sm:bg-black/50">
<li class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors p-6 absolute top-0 right-0 sm:hidden">
<!-- X ICON -->
<svg id="close" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <line x1="18" y1="6" x2="6" y2="18" /> <line x1="6" y1="6" x2="18" y2="18" /> </svg>
</li>
<li class="sm:ml-auto"> <a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors relative before:absolute before:w-full before:h-0.5 before:-bottom-7 before:scale-0 before:transition-transform before:origin-center dark:before:bg-zinc-100 before:bg-slate-700 hover:before:scale-100" href="#" >Home</a > </li>
<li> <a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors relative before:absolute before:w-full before:h-0.5 before:-bottom-7 before:scale-0 before:transition-transform before:origin-center dark:before:bg-zinc-100 before:bg-slate-700 hover:before:scale-100" href="#" >Services</a > </li>
<li> <a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors relative before:absolute before:w-full before:h-0.5 before:-bottom-7 before:scale-0 before:transition-transform before:origin-center dark:before:bg-zinc-100 before:bg-slate-700 hover:before:scale-100" href="#" >About</a > </li>
<li class="sm:mr-auto"> <a class="dark:hover:text-zinc-100 hover:text-slate-950 cursor-pointer transition-colors relative before:absolute before:w-full before:h-0.5 before:-bottom-7 before:scale-0 before:transition-transform before:origin-center dark:before:bg-zinc-100 before:bg-slate-700 hover:before:scale-100" href="#" >Contact</a > </li>
<li class="flex gap-4 flex-wrap justify-center">
<button class="dark:bg-black text-black/80 dark:text-white/80 bg-transparent focus-visible:outline-black/50 dark:border-white border-black/80 px-4 py-1.5 rounded border-[1.5px] transition-colors duration-100 focus-visible:outline text-base">
Login
</button>
<button class="bg-black dark:text-black/80 text-white/90 dark:bg-white focus-visible:outline-black/50 dark:border-white border-black/80 px-4 py-1.5 rounded border-[1.5px] transition-colors duration-100 focus-visible:outline text-base">
Signup
</button>
</li>
</ul>
</nav>let menu = document.querySelector("#menu");
let close = document.querySelector("#close");
let sidemenu = document.querySelector("#sidemenu");
menu.onclick = toggleSideBar;
close.onclick = toggleSideBar;
function toggleSideBar() {
sidemenu.classList.toggle("hidden");
}