<div class="cont">
<header id="header">1</header>
<main id="main"></main>
<footer id="footer"></footer>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
}

.cont {
    display: flex;
    /* grid-auto-flow: column; */
    /* grid-template-columns: 200px 1fr 200px; */
 
    /* max-width: 100vw;
    min-width: 50vw; */
    height: 100vh;
    width: 100vw;
    gap: 5px;
}

.cont :nth-child(n) {
    background: black;
}
.cont>:nth-child(2){
    min-width: 300px;
}
main{
    width: calc(100% - 200px - 200px - 10px);
}
header{
    width: 200px;
    transition: 1s;
    clip-path: inset(0% 0% 0% 0%);
   margin-left: 0px;
   color: white;
    
}
footer{
    width: 200px;
    clip-path: inset(0% 0% 0% 0%);
    margin-right: 0px;
    /* transition: .5s; */
}

 window.onload=()=>{
   header.onclick = () => {
        header.style.clipPath = "inset(100% 0% 0% 0%)";
        setTimeout(()=>{
            header.style.marginLeft="-200px";
            main.style.width="calc(100% - 200px - 10px)";
        },1000)
    }
    main.onclick=()=>{
        header.style.clipPath = "inset(0% 0% 0% 0%)";
        setTimeout(()=>{
            header.style.marginLeft="0px";
            main.style.width="calc(100% - 200px - 200px - 10px)";
        },0)
    }
    footer.onclick=()=>{
      footer.style.clipPath="inset(100% 0% 0% 0%)";  
      footer.style.transition="1s";
      
        setTimeout(()=>{
// footer.style.marginRight="0px";
 main.style.width="100%";

        },1000)
    }

    }