button gets disapper when toggle and the sidebar apperars-CodePudding

Ive created this page with a a button which is hamburger and a sidebar ,when user click on hamburger menu its make sidebar go disappear but i am facing issue which is when i toggle the button the side bar disappear and appear too but the problem is the button gets disappear i think its becoz of position : absolute or grid , if i make position relative its happens the way i ant that is button doesnt disappear but it leaves space above that i doesnt want HTML code This is a html code for side bar and hamburger menu its already on sidebar-hide id becoz its already hidden when page loaded

    <html>
    <head>
        <title>Side Bar</title>
        <link rel="stylesheet" href="./indexSB.css"></link>
        <link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1&display=swap"   
    rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" 
     rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
        
    </head>
        <body>
            <div id="wrapper-hamBtn">
                <button id="hamburger-btn">Button</button>
            </div>
            <div id="sidebar-hide" >
                <div id="upper-row" >
                    <button id="cancel-btn"><span  id="cancel- 
   span">clear</span></button>
                </div>
                <div id="home" ><span >Home</span></div>
                <div id="about" ><span >About</span></div>
                <div id="project" ><span >Project</span></div>
                <div id="contact" ><span >Contact</span></div>
                <div id="end"></div>
                </div>
            <script src="indexSB.js"></script>
        </body>
    </html>

CSS Code i think it is because of grid if i change position value to relative it working fine , i cannnot use relative becoz its leaving gap at upper side of button

*{
    margin:0px;
    background-color: cornflowerblue;
}
.hamburger{
    border:2px solid black;
    margin:3px;
    width:25px;
    border-radius: 5px;
    margin-right: 20px;

}


/* #wrapper-hamBtn{
        display: flex;
        /* align-items: ; */
        /* position: fixed;
        right:0px; */
      /* cursor : pointer; */
    /* } */
    
    /* #cancel-icon{
        
    } */
    #hamburger-btn{
        height: 30px;
        position: absolute;
        left:500px;
        /* display: inline; */
    }
    #cancel{
        font-size: 30px;
        color:red;
    }
    
    #sidebar-show{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        grid-template-columns: 300px;
        transform: translateX(0%);
        transition-duration: 0.5s;
    
    }
    .grid-item{
        height: 90px;
        background-color: white;
        width: 300px;
        border-right: 2px solid black;
        font-size: 50px;
        /* font-family: 'Noto Sans', sans-serif; */
        font-family: 'Patrick Hand', cursive;
        /* position: absolute; */
        /* left:30px; */
        display: flex;
        align-items: center;
    }
    .GI-span{
        background-color: white;
        position: relative;
        left:20px;
    }
    #end{
        background-color: white;
        height: 175px;
        width: 300px;
        border-right:2px solid black;
    }
    #cancel-span{
        background-color: white;
        color: #e60000;
        font-size: 40px;
        cursor: pointer;
        /* transform:rotate(160deg); */
    }
    #cancel-btn{
       border: none;
       background-color: white;
       position: absolute;
       left:240px;
       /* transform:rotateY(70deg); */
    }
    #cancel-span:hover{
        transform: rotate(360deg);
        transition-duration:0.5s;
        color:#ff4d4d;
        transition-timing-function: ease-out;
    }
    .grid-item:hover >.GI-span{
        background-color: rgb(27, 148, 204);
        font-size: 45px;
        transition-duration: 0.5s;
        /* cursor:pointer; */
    
    }
    .grid-item:hover{
        background-color: rgb(27, 148, 204);;
        font-size: 45px;
        transition-duration: 0.5s;
        cursor:pointer;
    }
    #upper-row{
        background-color: white;;
    }
    #sidebar-hide{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        transform: translateX(-100%);   
        transition-duration: 1s;
        /* display: inline; */
    }

Javascript code

let hamBtn=document.querySelector("#hamburger-btn");
let cancelBtn=document.querySelector("#cancel-btn");
let sidebarClass=document.querySelector(".sidebar-class");
let isHide=true;
function showHide(){
    if(isHide==true){
        let hideId=document.getElementById("sidebar-hide");
        hideId.id="sidebar-show";
        isHide=false;
    }
    else{
        let showId=document.getElementById("sidebar-show");
        showId.id="sidebar-hide";
        isHide=true;
    }
}
hamBtn.addEventListener("click",showHide);
cancelBtn.addEventListener("click",showHide);

CodePudding user response：

A possible workaround is to make the button not disappear with position: absolute.

let hamBtn=document.querySelector("#hamburger-btn");
let cancelBtn=document.querySelector("#cancel-btn");
let sidebarClass=document.querySelector(".sidebar-class");
let isHide=true;
function showHide(){
    if(isHide==true){
        let hideId=document.getElementById("sidebar-hide");
        hideId.id="sidebar-show";
        isHide=false;
    }
    else{
        let showId=document.getElementById("sidebar-show");
        showId.id="sidebar-hide";
        isHide=true;
    }
}
hamBtn.addEventListener("click",showHide);
cancelBtn.addEventListener("click",showHide);

*{
    margin:0px;
    background-color: cornflowerblue;
}
.hamburger{
    border:2px solid black;
    margin:3px;
    width:25px;
    border-radius: 5px;
    margin-right: 20px;

}


/* #wrapper-hamBtn{
        display: flex;
        /* align-items: ; */
        /* position: fixed;
        right:0px; */
      /* cursor : pointer; */
    /* } */
    
    /* #cancel-icon{
        
    } */
    #hamburger-btn{
        height: 30px;
        position: absolute;
        left:500px;
        z-index: 1;
        /* display: inline; */
    }
    #cancel{
        font-size: 30px;
        color:red;
    }
    
    #sidebar-show{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        grid-template-columns: 300px;
        transform: translateX(0%);
        transition-duration: 0.5s;
    
    }
    .grid-item{
        height: 90px;
        background-color: white;
        width: 300px;
        border-right: 2px solid black;
        font-size: 50px;
        /* font-family: 'Noto Sans', sans-serif; */
        font-family: 'Patrick Hand', cursive;
        /* position: absolute; */
        /* left:30px; */
        display: flex;
        align-items: center;
    }
    .GI-span{
        background-color: white;
        position: relative;
        left:20px;
    }
    #end{
        background-color: white;
        height: 175px;
        width: 300px;
        border-right:2px solid black;
    }
    #cancel-span{
        background-color: white;
        color: #e60000;
        font-size: 40px;
        cursor: pointer;
        /* transform:rotate(160deg); */
    }
    #cancel-btn{
       border: none;
       background-color: white;
       position: absolute;
       left:240px;
       /* transform:rotateY(70deg); */
    }
    #cancel-span:hover{
        transform: rotate(360deg);
        transition-duration:0.5s;
        color:#ff4d4d;
        transition-timing-function: ease-out;
    }
    .grid-item:hover >.GI-span{
        background-color: rgb(27, 148, 204);
        font-size: 45px;
        transition-duration: 0.5s;
        /* cursor:pointer; */
    
    }
    .grid-item:hover{
        background-color: rgb(27, 148, 204);;
        font-size: 45px;
        transition-duration: 0.5s;
        cursor:pointer;
    }
    #upper-row{
        background-color: white;;
    }
    #sidebar-hide{
        display: grid;
        grid-template-rows: 100px 100x 100px 100px;
        transform: translateX(-100%);   
        transition-duration: 1s;
        /* display: inline; */
    }

<!DOCTYPE html>
<html>
    <head>
        <title>Side Bar</title>
        <link rel="stylesheet" href="./indexSB.css"></link>
        <link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1&display=swap"   
    rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick Hand&display=swap" 
     rel="stylesheet">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons">
        <link rel="stylesheet" href="style.css">
    </head>
        <body>
            <div id="wrapper-hamBtn">
                <button id="hamburger-btn">Button</button>
            </div>
            <div id="sidebar-hide" >
                <div id="upper-row" >
                    <button id="cancel-btn"><span  id="cancel- 
   span">clear</span></button>
                </div>
                <div id="home" ><span >Home</span></div>
                <div id="about" ><span >About</span></div>
                <div id="project" ><span >Project</span></div>
                <div id="contact" ><span >Contact</span></div>
                <div id="end"></div>
                </div>
            <script src="indexSB.js"></script>
        </body>
    </html>