Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="panel">
        <div id="gum">
            <input type="checkbox" id="checkinput">
            <label for="checkinput" OnClick="a()" style="cursor:pointer;width:58px;display:block;height:50px;position:fixed;-webkit-tap-highlight-color:rgba(0,0,0,0);"></label>
            <label class="polosky" id="pol_1" for="checkinput" OnClick="a()"></label>
            <label class="polosky" id="pol_2" for="checkinput" OnClick="a()"></label>
            <label class="polosky" id="pol_3" for="checkinput" OnClick="a()"></label>
        </div>
            <h1>Calculator</h1>
          <img src="logo.png" id="logo" style="width:50px;">
    </div>


<div id="backpanel">
    <div id="shapka"><div>
        <div style="display: flexbox;">
            <button type="button" class="menu-button" style="margin-top: 23.2%;">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
            <button type="button" class="menu-button">______________</button>
        </div>
    </div>
</div>

<div class="calc" id="ad" style="">
    Hello My Friend!!!!!!!!
</div>

<script src="main.js"></script>
</body>
</html>

файл css:
    body{
    background: #00BD39;
    margin: 0%;
}

#panel{
    background-color: #238D43;
    width: 100%;
    min-height: 70px;
    position: absolute;
}

#gum{
    margin-top: -8px;
    margin-left: 20px;
    position: absolute;
    z-index: 5;
}

.polosky{
    display: block;
    background: #BF4330;
    width: 58px;
    height: 9px;
    margin-top: 6px;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    user-select: none;
    cursor: pointer;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#checkinput:checked ~ .polosky {
    transform: rotate(-410deg);
    -webkit-transform: rotate(-410deg);
}

#checkinput:checked ~ #pol_1 {
    background: rgba(0, 0, 0, 0);
}

#checkinput:checked ~ #pol_3 {
    transform: rotate(-310deg);
    margin-top: -9px;
    -webkit-transform: rotate(-310deg);
}

#checkinput{
    visibility: hidden;
}

#logo{
    margin-left: 83%;
    margin-top: 3%;
    transition: all 0.3s ease-in-out;
    position:absolute;
    z-index: 5;
}

h1{
    color: white;
    position: absolute;
    margin-left: 26%;
    font-family:'Courier New', Courier, monospace;
    z-index: 5;
}

#backpanel{
    background:#007B25;
    width:84%;
    height: 1000px;
    position: absolute;
    margin-left: -85%;
    transition: all 0.2s ease-in-out;
    z-index: 4;
}

#shapka{
    background-color: #00BD39;
    width: 100%;
    height: 70px;
}

.menu-button{
    width: 100%;
    height: 75px;
    background-color: #64DE89;
    border-color: #007B25;
    border-width: 0.5px;
    font-size: large;
    border-right: none;
}

    файл js:
    function get_id(id){
    return document.getElementById(id);
}

function a(){
let left = get_id("backpanel").style.marginLeft;
if (left != '-2%'){
    get_id("backpanel").style.marginLeft = '-2%';
    get_id("logo").style.width = '65px';
    get_id("logo").style.marginLeft = '82%';
    get_id("logo").style.marginTop = '1%';
}else{
    get_id("backpanel").style.marginLeft = '-85%';
    get_id("logo").style.width = '50px';
    get_id("logo").style.marginLeft = '83%';
    get_id("logo").style.marginTop = '3%';

}
}