JSFiddle - React, Tailwind, and code Playground

by Leonardo Quintana

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/JorgeAntrax/[email protected]/css/kimera.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<navbar>
	<navbrand>
		<item class="is-label">
			<h3>Kimera framework</h3>
		</item>
		<item class="is-toggle">
			<icon class="is-large"><i class="fa fa-bars"></i></icon>
		</item>
	</navbrand>
	<navmenu>
		<item>Usuarios</item>
		<item>Login</item>
		<item>Productos</item>
	</navmenu>
</navbar>

SCSS

navbar {
	background-color: #ff0050;
	color: #fff;
	navmenu {
		background-color: #fff;
		color: #ff0050;
    display: none;
    &.is-visible {
      display: flex;
    }
	}
	.is-toggle:hover, navmenu > item:hover {
		background-color: rgba(#000, .05);
	}
}

JavaScript

$("navbar .is-toggle").on('click', function(){
	$(this).siblings('navmenu').toggleClass('is-visible');
});