I am working on tailwind to build a sidebar, in which the logout button should be in the footer area of the sidebar.
the code can be seen in https://play.tailwindcss.com/PcvYlOmLtg
<div class="flex w-full bg-gray-50">
<nav class="h-screen w-64 flex-col justify-between rounded-md bg-white transition duration-150 ease-in-out">
<div class=" ">
<div class="flex items-center justify-between px-2 py-5">
<div class="mr-5 flex items-center">
<div class="mr-5">
<div class="relative inline-block shrink-0 cursor-pointer rounded-[.95rem]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="width: 24px;height:24px;">
<path xmlns="http://www.w3.org/2000/svg" d="M512 503.5H381.7a48 48 0 01-45.3-32.1L265 268.1l-9-25.5 2.7-124.6L338.2 8.5l23.5 67.1L512 503.5z" fill="#0473ff" data-original="#28b446" />
<path xmlns="http://www.w3.org/2000/svg" fill="#0473ff" data-original="#219b38" d="M361.7 75.6L265 268.1l-9-25.5 2.7-124.6L338.2 8.5z" />
</svg>
</div>
</div>
<div class="mr-2">
<a href="javascript:void(0)" class="dark:hover:text-primary hover:text-primary text-secondary-inverse text-[1.075rem] font-medium transition-colors duration-200 ease-in-out dark:text-neutral-400/90" target="_blank">name </a>
</div>
</div>
<a class="text-dark group relative inline-flex cursor-pointer items-center justify-end rounded-[.95rem] border-0 bg-transparent text-center align-middle text-base font-medium leading-normal shadow-none transition-colors duration-150 ease-in-out" href="javascript:void(0)" target="_blank">
<span class="group-hover:text-primary text-secondary-dark peer shrink-0 leading-none transition-colors duration-200 ease-in-out"> </span>
</a>
</div>
<div class="my-2 rounded-lg bg-[#dce3ef40]">
<ul class="space-y-0">
<li href="/overview" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
<div></div>
<a href="#">Overview</a>
</li>
<li href="/dataasset" class="flex cursor-pointer items-center space-x-4 px-4 py-2 font-bold text-blue-700 hover:bg-indigo-100">
<div></div>
<a href="#">dataset</a>
</li>
<li href="/dashboard" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
<div></div>
<a href="#">dashboard</a>
</li>
<li href="/user" class="flex cursor-pointer items-center space-x-4 px-4 py-2 hover:bg-indigo-100">
<div></div>
<a href="#">user</a>
</li>
</ul>
</div>
</div>
<div class="flex cursor-pointer items-center space-x-4 bg-white pb-10 pl-10 hover:bg-indigo-100">
<a> logout </a>
</div>
</nav>
</div>
the code failed to show the logout button in the footer, how would I fix this ?
You need to make 2 changes to your code:
flex
class to your <nav>
element. flex-col
only works on elements that you have explicitly set as flex containersgrow
class to the first <div>
inside your <nav>
. This will make it take as much vertical space as possible, effectively pushing your logout <div>
to the bottom.See the code with those classes already added here: https://play.tailwindcss.com/mduUz7GizJ