JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<div class="dash-menu-trigger">MENU</div>
<div class="dashmenu">
  <div class="dash-toggle-holder">
    <select class="language-selection" class="form-control" onchange="set_language($(this).val());">
                      <option value="1">English</option>
                        <option value="2">Spanish</option>
                      </select>
    <a href="#" class="dash-menu-toggle"><span>BASIC</span><span class="selected">MANAGER</span></a>
    </div>
  <div class="dash-menu">
    <section class="showalways">
       <ul>
         <li><a href="https://agrisphere-training.com/viewport/instructor/"><img src="https://agrisphere-training.com/live/images/dashmenu/icon-dashboard.png" /><span>DASHBOARD</span></a></li>
       </ul>
     </section>
     <div class="dash-topic">
      REPORT CENTER
     </div>
     <section>
       <ul>
         <li><a href="https://agrisphere-training.com/viewport/instructor/user-reports/"><img src="https://agrisphere-training.com/live/images/dashmenu/icon-user-reports.png" /><span>USER REPORTS</span></a></li>
         <li><a href="https://agrisphere-training.com/viewport/instructor/manager-reports/"><img src="https://agrisphere-training.com/live/images/dashmenu/icon-facility-reports.png" /><span>FACILITY REPORTS</span></a></li>
         <li><a href="https://agrisphere-training.com/viewport/instructor/organization-reports/"><img src="https://agrisphere-training.com/live/images/dashmenu/icon-organization-reports.png" /><span>ORGANIZATION REPORTS</span></a></li>
         <li><a href="https://agrisphere-training.com/viewport/instructor/courses/analytics/"><img src="https://agrisphere-training.com/live/images/dashmenu/icon-training-analytics-reports.png" /><span>TRAINING ANALYTICS REPORTS</span></a></li>
         <li><a href="https://agrisphere-training.com/viewport/instructor/account-profile-report/"><img...

CSS

html{
  height:100%;
}
body{
  height:100%;
  margin:0px;
}
.dash-menu-trigger{
  background-color:#d8d8d8;
  position:fixed;
  top:71px;
  left:-170px;
  width:210px;
  text-align:center;
  color:#356DB0;
  font-family:Helvetica;
  line-height:32px;
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  background-image:url(https://agrisphere-training.com/live/images/dashmenu/icon.hamburger.png);
  background-repeat:no-repeat;
  background-position:97% center;
  background-size:auto 60%;
  transition:all 0.4s;
  cursor:pointer;
}
.dash-menu-trigger.open{
  left:0px;
 }
.dashmenu{
  position:fixed;
  top:213px;
  left:-120%;
  width:100%;
  bottom:100px;
  display:block;
  font-family:aileronlight, Arial;
  transition:all 0.9s;
}
.dashmenu.open{
  left:0px;
}
.dashmenu .language-selection{
  padding:4px;
  border:none;
  width:180px;
  margin-bottom:10px;
}
.dashmenu>.dash-toggle-holder{
  background-color:#eee;
  padding:10px;
  position:absolute;
  top:-110px;
  left:0px;
  width:180px;
}
.dashmenu>.dash-toggle-holder>a.dash-menu-toggle{
  display:block;
  position:relative;
  width:178px;
  border:solid 1px #356DB0;
  border-radius:5px;
}
.dashmenu>.dash-toggle-holder>a.dash-menu-toggle>span{
  width:50%;
  height:50px;
  text-align:center;
  display:inline-block;
  margin-top:-1px;
  margin-bottom:-1px;
  color:#000;
  font-size:12px;
  font-weight:normal;
  line-height:46px;
  background-color:#fff;
}
.dashmenu>.dash-toggle-holder>a.dash-menu-toggle>span.selected{
  border:solid 3px #356DB0;
  border-radius:5px;
  width:calc(50% - 6px);
  background-color:#becde4;
}
.dashmenu>.dash-menu{
  border:solid 6px #356DB0;
  position:absolute;
  top:0px;
  left:0px;
  bottom:0px;
  overflow:hidden;
  width:calc(100% - 12px - 240px);
}
.dashmenu>.dash-menu:hover{
 ...

JavaScript

$('.dashmenu .dash-topic').not('.openalways').click(function(){



	$('.dashmenu section').not($(this).next()).hide(300);
	
   $(this).next().toggle(400);

});

$('.dashmenu .dash-topic').not('.openalways').first().click();

$('.dash-menu-trigger').click(function(){

	$('.dash-menu-trigger').toggleClass('open');
	$('.dashmenu').toggleClass('open');

});