index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TRAVEL | Welcome</title>

    <!-- CSS File -->
    <link rel="stylesheet" href="style.css">

    <!-- FAVICO -->
    <link rel="shortcut icon" href="Logo.png" type="image/x-icon">

    <!-- METAs -->
    <meta name="description" content="A Landing Page (SideBar)">
    <meta name="author" content="Zia Codes">
    <meta name="keywords" content="SideBar, LandingPage, Travel Landing Page, ZiaCodes">

</head>

<body>

    <!-- ===== SHOWCASE ===== -->
    <section class="showcase">
        <header>
            <h2 class="logo">Travel</h2>
            <div class="toggle"></div>
        </header>

        <div class="overlay"></div>
        <div class="text">
            <h2>Never Stop To</h2>
            <h3>Exploring The World</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</p>
            <a href="#">Explore</a>
        </div>

        <ul class="social">
            <li><a href="#"><img src="facebook.png" alt="facebook Image"></a></li>
            <li><a href="#"><img src="twitter.png" alt="twitter Image"></a></li>
            <li><a href="#"><img src="instagram.png" alt="instagram Image"></a></li>
        </ul>
    </section>

    <!-- ===== SIDE MENU ===== -->
    <div class="menu">
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#news">News</a></li>
            <li><a href="#destination">Destination</a></li>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <!-- ===== TOGGLE NAVBAR (SideBar) ===== -->
    <script>
        const menuToggle = document.querySelector('.toggle');
        const showcase = document.querySelector('.showcase');

        menuToggle.addEventListener('click', () => {
            menuToggle.classList.toggle('active');
            showcase.classList.toggle('active');
        })
    </script>

</body>

</html>