<body>
<!-- Header here -->
<header>
<nav class="
flex flex-wrap
items-center
justify-between
w-full
py-4
md:py-0
px-4
text-lg text-gray-700
bg-white
">
<div>
<a href="#">
Logo
</a>
</div>
<svg xmlns="http://www.w3.org/2000/svg" id="menu-button" class="h-6 w-6 cursor-pointer md:hidden block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<div class="hidden w-full md:flex md:items-center md:w-auto" id="menu">
<ul class="
pt-4
text-base text-gray-700
md:flex
md:justify-between
md:pt-0">
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Startsida</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Tidsbokning</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Kontrakt</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Kalender</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Dokument</a>
</li>
<li>
<a class="md:p-4 py-2 block hover:text-purple-400" href="#">Mina sidor</a>
</li>
</li>
</ul>
</div>
</nav>
</header>
<!-- Sidebar -->
<aside>
<div class="w-60 h-full shadow-md bg-white px-1 absolute">
<ul class="relative">
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Startsida</a>
</li>
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Tidsbokning</a>
</li>
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Kontrakt</a>
</li>
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Kalender</a>
</li>
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Dokument</a>
</li>
<li class="relative">
<a class="flex items-center text-sm py-4 px-6 h-12 overflow-hidden text-gray-700 text-ellipsis whitespace-nowrap rounded hover:text-gray-900 hover:bg-green-100 transition duration-300 ease-in-out" href="#!">Mina sidor</a>
</li>
</ul>
</div>
</aside>
<div class="px-4">
<div class="
flex
justify-center
items-center
bg-white
mx-auto
max-w-2xl
rounded-lg
my-16
p-16
">
<h1 class="text-2xl font-medium">Navbar</h1>
</div>
</div>
</body>@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&display=swap');
.emoji {
font-family: 'Noto Emoji', sans-serif;
}const button = document.querySelector('#menu-button');
const menu = document.querySelector('#menu');
button.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.