           ========= css =========
            
            .nav-bar{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 8vh;
                background: black;    
            }
            .nav-bar ul.ul-row-left{    
                position: absolute;
                float: left;
                left: 0;
                color: white;
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .nav-bar ul.ul-row-left li{  
            height: 8vh;
            width: 5vw;
            display: flex;
            justify-content: center; 
            text-align:center;
            align-items: center;
            }
            .nav-bar ul.ul-row-left li:hover{
                color: rebeccapurple;
            }

            ========= HTML =========
            
            <div class="nav-bar">
                <ul class="ul-row-left">
                    <li>Navbar</li>
                    <li>About</li>
                    <li>Story</li>
                </ul>
            </div>

           ========= css =========
            
            .nav-bar{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 8vh;
                background: black;    
            }           
            .nav-bar ul.ul-row-right{
                float: right;
                right: 0;
                position: absolute;
                color: white;
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .nav-bar ul.ul-row-right li{    
                height: 8vh;
                width: 5vw;
                display: flex;
                justify-content: center; 
                text-align:center;
                align-items: center;
            }

            .nav-bar ul.ul-row-right li:hover{
                color: rebeccapurple;
            }

            ========= HTML =========
            
            <div class="nav-bar">
                <ul class="ul-row-right">
                    <li>Navbar</li>
                    <li>About</li>
                    <li>Story</li>
                </ul>
            </div>

            ========= css =========

            .nav-bar-vertical-left{
                position: absolute;
                float: left;
                top: 0;
                left: 0;
                height: 100%;
                width: 5vw;
                background: black;
            }
            .nav-bar-vertical-left .ul-row-vertical-left{
                position: absolute;
                display: inline-block;
                top: 0;
                left: 0;
                margin: 0;
                padding: 0;    
                list-style: none;
                color: white;
            }
            .nav-bar-vertical-left .ul-row-vertical-left li{
                height: 7vh;
                width: 5vw;
                display: flex;
                justify-content: center; 
                text-align:center;
                align-items: center;
            }
            .nav-bar-vertical-left .ul-row-vertical-left li:hover{
                color: aquamarine;
            }

            ========= HTML =========

            <div class="nav-bar-vertical-left">
                <ul class="ul-row-vertical-left">
                    <li>Navbar</li>
                    <li>About</li>
                    <li>Story</li>
                </ul>
            </div>

            ========= css =========

            .nav-bar-vertical-right{
                position: absolute;
                float: right;
                top: 0;
                right: 0;
                height: 100%;
                width: 5vw;
                background: black;
            }
            .nav-bar-vertical-right .ul-row-vertical-right{
                position: absolute;
                display: inline-block;
                top: 0;
                right: 0;
                margin: 0;
                padding: 0;    
                list-style: none;
                color: white;
            }
            .nav-bar-vertical-right .ul-row-vertical-right li{
                height: 7vh;
                width: 5vw;
                display: flex;
                justify-content: center; 
                text-align:center;
                align-items: center;
            }
            .nav-bar-vertical-right .ul-row-vertical-right li:hover{
                color: aquamarine;
            }

            ========= HTML =========

            <div class="nav-bar-vertical-right">
                <ul class="ul-row-vertical-right">
                    <li>Navbar</li>
                    <li>About</li>
                    <li>Story</li>
                </ul>
            </div>

            ========= css =========

            #right-slide{
                position: absolute;
                float: right;    
                right: 0;
                top: 0;
                height: 100vh;
                width: 0vw;    
                background: red;
                transition: .5s ease-in-out; 
                overflow: hidden;
            }

            #right-slide .card{
                position: absolute;
                float: right;    
                right: 0;
                top: 0;
                height: 100vh;
                width: 50vw;    
                background: blue;
                transition: background .5s .5s ease-out;
            }


            .right-slide-h1{
                position: absolute;
                float: left;
                top: 0;
                left: 0;
                margin: 0;
                background: black;
                color: white;
                padding: 20px 20px;
            }


            .right-slide-h1:hover ~ #right-slide{
                width: 50%;
                background: red !important;
            }

            .right-slide-h1:hover ~ #right-slide > .card{        
                background: transparent;
            }

            .right-slide-h1:not(:hover) ~ #right-slide{
                transition: 1s 1s ease-out; 
            }

            ========= HTML =========

            <h1 class="right-slide-h1">hover_here_for_right_side_slide</h1>
            <div id="right-slide">
                <h6>hello</h6> 
                    <div class="card"> 
                </div>
            </div>

hover_here

hello

            ========= css =========

            #left-slide{
                position: absolute;
                float: left;    
                left: 0;
                top: 0;
                height: 100vh;
                width: 0vw;    
                background: red;
                transition: .5s ease-in-out; 
                overflow: hidden;
            }

            #left-slide .card{
                position: absolute;
                float: left;    
                left: 0;
                top: 0;
                height: 100vh;
                width: 50vw;    
                background: blue;
                transition: background .5s .5s ease-out;
            }


            .left-slide-h1{
                position: absolute;
                float: right;
                top: 0;
                right: 0;
                margin: 0;
                background: black;
                color: white;
                padding: 20px 20px;
            }


            .left-slide-h1:hover ~ #left-slide{
                width: 50%;
                background: red !important;
            }

            .left-slide-h1:hover ~ #left-slide > .card{        
                background: transparent;
            }

            .left-slide-h1:not(:hover) ~ #left-slide{
                transition: 1s 1s ease-out; 
            }

            ========= HTML =========

            <h1>hover_here_for_right_side_slide</h1>
            <div id="left-slide">
                <h6>hello</h6> 
                    <div class="card"> 
                </div>
            </div>

hover_here

hello

            ========= css =========

            .left-open-bar{
                position: absolute;
                float: left;
                top: 0;
                left: 0;
                font-size: 30px;
                margin: 0;
                padding: 10px 10px;    
                transition: .5s ease-in-out;
                overflow: hidden;
            }
            .sliding-top-navbar{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                /* height: 8vh; */
                height: 0;
                background: black;
                transition: .5s ease-in-out;
                overflow: hidden;
            }
            .sliding-top-navbar ul.ul-row-left{    
                position: absolute;
                float: left;
                left: 0;
                color: white;
                display: flex;
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .sliding-top-navbar ul.ul-row-left li{
                position: relative; 
                height: 8vh;
                width: 4vw;
                display: flex;
                justify-content: center; 
                text-align:center;
                align-items: center;
            }
            .sliding-top-navbar ul.ul-row-left li .left-closed-bar{
                color: red;
                font-size: 30px;
            }


            ========= JS =========

            const _open_button = document.querySelector(".left-open-bar");
            const _close_button = document.querySelector(".left-closed-bar");
            const _navbar = document.querySelector(".sliding-top-navbar");

            _open_button.addEventListener("click", show_navbar);
            _close_button.addEventListener("click", close_navbar);

            function show_navbar(){    
                _open_button.style.setProperty("background", "transparent");
                _navbar.style.setProperty("height", "8vh");
            }
            function close_navbar(){    
                _navbar.style.setProperty("height", "0vh");   
            }

            ========= HTML =========

            <i class="fa-solid fa-bars left-open-bar"></i>
            <div class="sliding-top-navbar">
                <ul class="ul-row-left">
                    <li><i class="fa-solid fa-bars left-closed-bar"></i></li>
                    <li>Navbar</li>
                    <li>About</li>
                    <li>Story</li>
                </ul>
            </div>
            <!-- js -->
            <script src="js/navbar/left-sliding-top.js"></script>