JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="dashmenu open">

<ul class="services-menu">
	  <li data-services-id="1" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/Client-Portal.png"></li>
	  <li data-services-id="2" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/Training-Center.png"></li>
	  <li data-services-id="10" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/AG-Audit.png"></li>
	  <li data-services-id="3" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/AG-Gear.png"></li>
	  <li data-services-id="4" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/Work-Schedule.png"></li>
	  <li data-services-id="5" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/AG-Ops.png"></li>
	  <li data-services-id="6" class=""><img src="https://agrisphere-portal.com/live/images/menu/services/Docu-Bin.png"></li>
	  <li data-services-id="7" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/Vault.png"></li>
	  <li data-services-id="8" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/AG-Control.png"></li>
	  <li data-services-id="9" class="inactive"><img src="https://agrisphere-portal.com/live/images/menu/services/System-Admin.png"></li>
	</ul>
  
  <div class="dash-menu">
	<div class="dash-innermenu" data-services-id="1" style="display:none;">
				<section class="showalways">
		   <ul>
			 <li><a href="#"><img src="https://agrisphere-portal.com/live/images/menu/dashboard.profile.png"><span>YOUR DASHBOARD</span></a></li>
			   <li class="float-right"><a href="https://agrisphere-portal.com/client-portal/all-safe/emergency-responders/"><img src="https://agrisphere-portal.com/live/images/menu/EmergencyResponders.png?1234"><span>Emergency...

CSS

html{
  font-family: helvetica, serif;
}
.dashmenu.open {
    left: 0px;
}
.dashmenu {
    position: fixed;
    top: 120px;
    left: -120%;
    width: 100%;
    bottom: 100px;
    display: block;
    font-family: aileronlight, Arial;
    transition: all 0.6s;
}
.dashmenu>.dash-menu>.dash-innermenu {
    margin-left: 240px;
;
    position: relative;
    height: 100%;
}
.dashmenu>.dash-menu>div>section.showalways {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: block !important;
    transition: all 0s !important;
}

.dashmenu>.dash-menu>div>section {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    display: none;
}
.dashmenu>.dash-menu>div>section>ul {
    display: block;
    padding: 0px;
    margin: 0px;
}
.dashmenu>.dash-menu>div>section>ul>li {
    display: inline-block;
    position: relative;
    min-height: 120px;
    width: calc(20% - 4px);
    margin-bottom: 20px;
}
.dashmenu>.dash-menu>div>section>ul>li>a {
    position: absolute;
    left: 0px 
px
;
    right: 0px;
    top: 0px;
    bottom: 0px;
    text-align: center;
}
.dashmenu>.dash-menu>div>section>ul>li>a>img {
    max-width: 100px;
    margin-top: -5px;
}
.dashmenu>.dash-menu>div>section.showalways>ul>li>a>span {
    position: absolute;
    left: 0px 
px
;
    right: 0px;
    bottom: 0px;
    color: #000;
    font-size: 12px;
    text-align: center;
    letter-spacing: -0.5px;
    line-height: 11px;
    text-transform: uppercase;
    font-weight: normal !important;
}
.dashmenu>.dash-menu>div>section>ul>li>a>span {
    position: absolute;
    left: 0px;
    right: 0px 
px
;
    bottom: 0px;
    color: #000;
    font-size: 11px;
    text-align: center;
    font-weight: bold;
    letter-spacing: -0.5px;
    line-height: 11px;
    text-transform: uppercase;
}
.dashmenu>.dash-menu>div>.dash-topic {
    background-color: #399845;
    color: #fff;
    line-height: 40px;
    padding-left: 30px;
    cursor: pointer;
    transition: all 0.3s;
   ...

JavaScript

function prompt_premission_requirement(message){
	
	var ui = $('<div class="permission-denied-prompt"><div><h2>Permission Denied</h2><p>' + message + '</p><p><button>Okay</button></p></div></div>');
	
	ui.find('button').click(function(e){
		
		ui.remove();
		
		e.stopPropagation();
		
	});
	
	$('body').append(ui);
	
}

var alias = true;

if(alias){


	// inner link classes

	$('.dash-innermenu>section>ul>li').each(function(){
	
	 	$(this).attr('data-href',$(this).find('>a').attr('href'));
    
   
	});

	$('.services-menu>li').each(function(){
	
	 	var number = parseInt($(this).attr('data-services-id'));
    
    switch(number){
    
    	case 2:
      case 10:
      case 5: 
      case 6: 
      case 8: 
      case 9: 
      
      $(this).addClass('alias-disabled');
     
     break;
    
    }
   
	});
  

	$('.services-menu>li').click(function(e){
	
	 	var number = parseInt($(this).attr('data-services-id'));
    
    switch(number){
    
    	case 2:
      case 10: 
      case 5: 
      case 6: 
      case 8: 
      case 9: 
      
      prompt_premission_requirement("You do not have permission to access this application while logged in as an Alias. Please switch to your Primary Facility. You may have access this page using your main account.");
		 
		 return false;
     
     break;
    
    }
   
	});

}