SOURCE

<input type="checkbox" id="sidebar-switch">
<div class="side"></div>
<div class="main">
    <header>
        <label for="sidebar-switch">Open</label>
        <div class="com">江苏保旺达软件技术有限公司</div>
    </header>
    <div class="content">
        <nav>
            <ul>
                <li>123</li>
            </ul>
        </nav>
        <main></main>
    </div>
</div>

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    display: flex
}
.side{
    width: 0px;
    background-color: #27292d;
    transition: all 0.6s ease-in-out;
}
.main{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.side,.main{
    height: 100vh;
}
header{
    height: 50px;
    background-color: #303643;
    color: white;
    line-height: 50px;
    display: flex;
}
header label{
    cursor:pointer;
}
#sidebar-switch{
    display: none;
}
#sidebar-switch:checked ~.side{
    width: 200px;
}
header .com{
    font-size: 18px;
}
.content{
    display: flex;
    flex-grow: 1;
}
nav{
    color: #40485b;
    background-color: #f7f7f7;
    width: 60px;
    height: 100%;
}
main{
    flex-grow: 1;
    background-color: white;
}