Added side navbar

hoangsonww · Dec 16, 2023 · 03830e7 · 03830e7
1 parent aa8bded
commit 03830e7
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 9 deletions.
diff --git a/about.html b/about.html
@@ -9,7 +9,7 @@
 </head>
 <body>
     <header>
-        <h1 class="my-heading" style="margin-top: 40px">The MovieVerse</h1>
+        <h1 class="my-heading" style="margin-top: 40px">The MovieVerse - About Us</h1>
         <button class="back-btn" onclick="window.location.href='index.html'">Home</button>
         <button class="about" onclick="window.location.href='about.html'">About</button>
         <button class="favorites-btn" onclick="window.location.href='favorites.html'" title="Go to your favorites list">Favorites</button>

diff --git a/index.html b/index.html
@@ -11,6 +11,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!-- Link to the external CSS file -->
     <link rel="stylesheet" href="style.css"/>
+    <!-- Link to Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
     <!-- Link to the external JavaScript file and defer its execution -->
     <script src="script.js" defer></script>
     <!-- Link to the favicon -->
@@ -25,6 +27,11 @@ <h1 id="my-heading">
             The Mo<span class="highlight">vieV</span>erse
         </h1>
 
+        <!-- Create a button to toggle the side navigation bar -->
+        <button id="nav-toggle" class="nav-toggle" title="Toggle Side Navbar" onclick="toggleNav()">
+            <i class="fas fa-bars"></i>
+        </button>
+
         <!-- Create a button to go back to the home page -->
         <button class="back-btn" onclick="window.location.href='index.html'" title="Go back to homepage">Home</button>
 
@@ -46,6 +53,31 @@ <h1 id="my-heading">
         </form>
     </header>
 
+    <!-- Create a side navigation bar -->
+    <nav id="side-nav" class="side-nav">
+        <h1 id="my-heading">
+            The Mo<span class="highlight">vieV</span>erse Menu
+        </h1>
+        <ul>
+            <li><a href="#main">Most Popular</a></li>
+            <li><a href="#main3">Action</a></li>
+            <li><a href="#main4">Horror</a></li>
+            <li><a href="#main5">Documentary</a></li>
+            <li><a href="#main6">Animated</a></li>
+            <li><a href="#main7">Science Fiction</a></li>
+            <li><a href="#main8">Romantic</a></li>
+            <li><a href="#main9">Thriller</a></li>
+            <li><a href="#main10">Mystery</a></li>
+            <li><a href="#main11">Adventure</a></li>
+            <li><a href="#main12">Comedy</a></li>
+            <li><a href="#main13">Fantasy</a></li>
+            <li><a href="#main14">Family</a></li>
+            <li><a href="#main15">TV Series</a></li>
+            <li><a href="#main16">Crime</a></li>
+        </ul>
+        <button style="margin-left: 21px" id="button-search" onclick="removeNavBar()">Close</button>
+    </nav>
+
     <!-- Create a section for the most popular movies -->
     <div class="genres" style="margin-left: 25px">
         <h2 id="search-title">Most Popular: </h2>
@@ -56,11 +88,6 @@ <h2 id="search-title">Most Popular: </h2>
 
     </main>
 
-    <!-- Create a main section for the new releases -->
-    <main id="main2" style="margin-left: 25px">
-
-    </main>
-
     <!-- Create a section for the trending action movies -->
     <div class="genres" style="margin-left: 25px">
         <h2 id="other">Trending New <span class="highlight">ACTION</span> Movies: </h2>

diff --git a/script.js b/script.js
@@ -26,7 +26,8 @@ async function getMovies(url) {
 
     if (respData.results.length > 0) {
         showMovies(respData.results);
-    } else {
+    }
+    else {
         main.innerHTML = `<p>No movie with the specified search term found. Please try again.</p>`;
     }
 }
@@ -609,3 +610,43 @@ function showMovies16(movies) {
         main16.appendChild(movieE1);
     });
 }
+
+document.addEventListener('mousemove', function(event) {
+    const sideNav = document.getElementById('side-nav');
+    if (event.clientX < 10 && !sideNav.classList.contains('manual-toggle')) {
+        sideNav.style.left = '0';
+    }
+});
+
+document.getElementById('side-nav').addEventListener('mouseleave', function() {
+    const sideNav = document.getElementById('side-nav');
+    if (!sideNav.classList.contains('manual-toggle')) {
+        sideNav.style.left = '-250px';
+    }
+});
+
+document.addEventListener('click', function () {
+    const sideNav = document.getElementById('side-nav');
+    if (!sideNav.classList.contains('manual-toggle')) {
+        sideNav.style.left = '-250px';
+    }
+})
+
+function toggleNav() {
+    const sideNav = document.getElementById('side-nav');
+    sideNav.classList.toggle('manual-toggle');
+    if (sideNav.classList.contains('manual-toggle')) {
+        sideNav.style.left = '0px';
+    }
+    else {
+        sideNav.style.left = '-250px';
+    }
+}
+
+function removeNavBar() {
+    const sideNav = document.getElementById('side-nav');
+    if (sideNav.classList.contains('manual-toggle')) {
+        sideNav.classList.remove('manual-toggle');
+        sideNav.style.left = '-250px';
+    }
+}
diff --git a/style.css b/style.css
@@ -138,7 +138,7 @@ header h1 {
     cursor: pointer;
     position: absolute;
     top: 0;
-    margin-left: 40px;
+    margin-left: 41px;
     border-radius: 8px;
 }
 
@@ -362,10 +362,11 @@ h2:hover {
     font-size: 1rem;
     margin-top: 50px;
     color: white;
+    transform: translateY(10%);
 }
 
 .movie-rating {
-    margin-top: -15px;
+    margin-top: 50px;
     text-align: center;
     align-self: center;
     font-size: 2.5rem;
@@ -535,3 +536,52 @@ p {
 #main2 a:hover {
     text-decoration: underline;
 }
+
+.side-nav {
+    position: fixed;
+    left: -250px;
+    top: 0;
+    width: 250px;
+    height: 100%;
+    background-color: #373b69;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
+    overflow-y: auto;
+    transition: left 0.39s;
+    z-index: 1000;
+}
+
+.side-nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.side-nav ul li {
+    padding: 15px 20px;
+    border-radius: 8px;
+}
+
+.side-nav ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding-left: 5px;
+}
+
+.side-nav ul li a:hover {
+    background-color: #ff8623;
+    border-radius: 8px;
+}
+
+.nav-toggle {
+    background-color: #7378c5;
+    border: none;
+    color: white;
+    cursor: pointer;
+    font-size: 1.5rem;
+    position: absolute;
+    top: 5px;
+    left: 15px;
+    border-radius: 8px;
+    padding-top: 3.5px;
+}