Skip to content

Instantly share code, notes, and snippets.

@MehulBawadia
Created January 8, 2019 12:03
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MehulBawadia/bfc7159c7957e3d67567c076a36573ec to your computer and use it in GitHub Desktop.
Save MehulBawadia/bfc7159c7957e3d67567c076a36573ec to your computer and use it in GitHub Desktop.
Vertical Navigation in Admin Panel. Uses Tailwind CSS and jQuery
<!-- Don't forget to include the Tailwind css file -->
<div class="flex w-full">
<div class="bg-grey-darkest h-screen">
<img src="https://jeroen.github.io/erum2018/logo.png" alt="Random Logo" class="block w-16 p-2 mx-auto mb-5">
<div class="w-64 navigationMenu">
<div class="mb-5">
<div class="flex text-white">
<div class="w-12 ml-1 text-center"><i class="fas fa-tachometer-alt"></i></div>
<div class="navItem"><a href="javascript:void(0)" class="relative no-underline text-grey-light hover:text-grey-lightest hover:border-4 border-brand">Link 1</a></div>
</div>
</div>
<div class="mb-5">
<div class="flex text-white">
<div class="w-12 ml-1 text-center"><i class="fas fa-terminal"></i></div>
<div class="navItem"><a href="javascript:void(0)" class="relative no-underline text-grey-light hover:text-grey-lightest hover:border-4 border-brand">Link 2</a></div>
</div>
</div>
</div>
</div>
<div class="w-full bg-white">
<div class="flex justify-between border-b bg-grey-light">
<div class="ml-5 my-5">
<a
href="javascript:void(0)"
class="text-2xl text-grey hover:text-grey-darkest focus:text-grey-darkest focus:outline-none toggleNavigationMenu"
>
<i class="fas fa-bars"></i>
</a>
</div>
<div class="mr-5 my-5">
<a
href="javascript:void(0)"
class="text-2xl text-grey hover:text-grey-darkest focus:text-grey-darkest focus:outline-none toggleNavigationMenu"
>
<i class="fas fa-sign-out-alt"></i>
</a>
</div>
</div>
</div>
</div>
// Don't forget to include the below jQuery in your code
// https://code.jquery.com/jquery-3.0.0.js
$('.toggleNavigationMenu').click(function (e) {
e.preventDefault();
var $navMenu = $('.navigationMenu');
if ($navMenu.hasClass('w-64')) {
$navMenu.removeClass('w-64').addClass('w-12');
$navMenu.find('.navItem').hide();
}
else {
$navMenu.removeClass('w-12').addClass('w-64');
$navMenu.find('.navItem').show();
}
return false;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment