aneury1/map.html

## map.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     *{
         margin:0;
         padding:0;
     }
     body{
         width:100vw;
         height: 100vh;
         /*overflow:hidden;*/
         display: flex;
     }
     .left-side{
         width:20%;height: 100%; background: #445667;
         -webkit-transition-property: width; /* Safari */
        -webkit-transition-duration: 2s; /* Safari */
        -webkit-transition-delay: 1s; /* Safari */
        transition-property: width;
        transition-duration: 2s;
        transition-delay: 1s;
         }

         .left-side-min{
             width:8% !important;
         }
         .menu-flag {
            width: 35px;
            height: 5px;
            background-color: #344343;
            margin: 6px 0;
            padding-left:2px;
            }
        .dvx{
            width:36px;
            height: 36px;
            z-index: 999;
            border: 1px solid rgba(0,0,0,0.5);
            border-radius: 6px;
            margin-left:10px;
        }
        .white{
            color:blue !important;
            background:red;
        }
    </style>
</head>
<body>
 <div class="left-side">
 </div>
  <div class="dvx">
    <div class="menu-flag"></div>
    <div class="menu-flag"></div>
    <div class="menu-flag"></div>
  </div>


 <script>
    const v = document.getElementsByClassName('left-side')[0];
    const m = document.getElementsByClassName('dvx')[0];
    m.addEventListener('click', ()=>{


         if(v.classList.contains('left-side-min'))
         {
            var toggle = document.getElementsByClassName('menu-flag');
               var atoggle = Array.from(toggle);
               console.log(atoggle);
            v.classList.remove('left-side-min');
            atoggle.map(function(vat){vat.classList.remove('white')});
         }
         else
         {
               v.classList.add('left-side-min');
               var toggle = document.getElementsByClassName('menu-flag');
               var atoggle = Array.from(toggle);
               console.log(atoggle);

               atoggle.map(function(vat){vat.classList.add('white')});
         }
    });

 </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	*{
	margin:0;
	padding:0;
	}
	body{
	width:100vw;
	height: 100vh;
	/overflow:hidden;/
	display: flex;
	}
	.left-side{
	width:20%;height: 100%; background: #445667;
	-webkit-transition-property: width; /* Safari */
	-webkit-transition-duration: 2s; /* Safari */
	-webkit-transition-delay: 1s; /* Safari */
	transition-property: width;
	transition-duration: 2s;
	transition-delay: 1s;
	}

	.left-side-min{
	width:8% !important;
	}
	.menu-flag {
	width: 35px;
	height: 5px;
	background-color: #344343;
	margin: 6px 0;
	padding-left:2px;
	}
	.dvx{
	width:36px;
	height: 36px;
	z-index: 999;
	border: 1px solid rgba(0,0,0,0.5);
	border-radius: 6px;
	margin-left:10px;
	}
	.white{
	color:blue !important;
	background:red;
	}
	</style>
	</head>
	<body>
	<div class="left-side">
	</div>
	<div class="dvx">
	<div class="menu-flag"></div>
	<div class="menu-flag"></div>
	<div class="menu-flag"></div>
	</div>


	<script>
	const v = document.getElementsByClassName('left-side')[0];
	const m = document.getElementsByClassName('dvx')[0];
	m.addEventListener('click', ()=>{



	if(v.classList.contains('left-side-min'))
	{
	var toggle = document.getElementsByClassName('menu-flag');
	var atoggle = Array.from(toggle);
	console.log(atoggle);
	v.classList.remove('left-side-min');
	atoggle.map(function(vat){vat.classList.remove('white')});
	}
	else
	{
	v.classList.add('left-side-min');
	var toggle = document.getElementsByClassName('menu-flag');
	var atoggle = Array.from(toggle);
	console.log(atoggle);

	atoggle.map(function(vat){vat.classList.add('white')});
	}
	});

	</script>
	</body>
	</html>