JavaScript 移动端侧边栏

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动端侧边栏</title>
  <style>
* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100vw;
    height: 100vh;
}

.sidebar {
    width: 100%;
    height: 100%;
    background-color: cornflowerblue;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: center;
    padding-top: 100px;
    transition: all .5s;
    left: 100%;
}

.sidebar-active {
    left: 0;
}

.sidebar>.toggle {
    border: none;
    outline: none;
    background: transparent;
    position: fixed;
    right: 15px;
    top: 15px;
}

.sidebar>.toggle svg path {
    transition: all .3s;
}

.sidebar>.active svg path {
    fill: white;
}

.sidebar>.menu {
    list-style: none;
}

.sidebar>.menu>li {
    width: 200px;
    height: 50px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 8px;
    transition: all .3s;
}

.sidebar>.menu>.curt,
.sidebar>.menu>li:hover {
    color: cornflowerblue;
    background-color: white;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

main>div {
    display: none;
}

main>.curt {
    display: unset;
}

  </style>
</head>
<body>
  


   <div class="sidebar">
        <button class="toggle">
            <svg t="1629551370923" class="icon" viewBox="0 0 1024 1024" p-id="1191" width="25" height="25">
                <path
                    d="M238.933 420.978c-50.067 0-91.022 40.956-91.022 91.022s40.956 91.022 91.022 91.022 91.022-40.956 91.022-91.022-40.956-91.022-91.022-91.022z m546.134 0c-50.067 0-91.022 40.956-91.022 91.022s40.956 91.022 91.022 91.022 91.022-40.956 91.022-91.022-40.956-91.022-91.022-91.022z m-273.067 0c-50.067 0-91.022 40.956-91.022 91.022s40.956 91.022 91.022 91.022 91.022-40.956 91.022-91.022-40.956-91.022-91.022-91.022z"
                    p-id="1192">
                </path>
            </svg>
        </button>

        <ul class="menu">
            <li class="curt">首页</li>
            <li>文章</li>
            <li>资源</li>
            <li>关于</li>
        </ul>
    </div>

    <main>
        <div class="curt">首页</div>
        <div>文章</div>
        <div>资源</div>
        <div>关于</div>
    </main>

    <script>
        let toggle = document.querySelector('.toggle')
        let sidebar = document.querySelector('.sidebar')
        let menus = document.querySelector('.menu').children
        let views = document.querySelector('main').children
        let isOpenSidebar = false

        toggle.onclick = () => {
            if (isOpenSidebar) {
                sidebar.classList.remove('sidebar-active')
                toggle.classList.remove('active')
            } else {
                sidebar.classList.add('sidebar-active')
                toggle.classList.add('active')
            }

            isOpenSidebar = !isOpenSidebar
        }

        for (let i = 0; i < menus.length; i++) {
            menus[i].onclick = () => {
                for (let j = 0; j < menus.length; j++) {
                    menus[j].className = ''
                    views[j].className = ''
                }
                menus[i].className = 'curt'
                views[i].className = 'curt'
                toggle.click()
            }
        }
    </script>
</body>
</html>