From 03830e789f06f75e79264dc3e5636acfb0c09b8c Mon Sep 17 00:00:00 2001 From: Son Nguyen Date: Sat, 16 Dec 2023 18:04:03 +0700 Subject: [PATCH] Added side navbar --- about.html | 2 +- index.html | 37 ++++++++++++++++++++++++++++++++----- script.js | 43 ++++++++++++++++++++++++++++++++++++++++++- style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 127 insertions(+), 9 deletions(-) diff --git a/about.html b/about.html index 87c42752..797c7a48 100644 --- a/about.html +++ b/about.html @@ -9,7 +9,7 @@
-

The MovieVerse

+

The MovieVerse - About Us

diff --git a/index.html b/index.html index 6aead6f1..93447f05 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,8 @@ + + @@ -25,6 +27,11 @@

The MovieVerse

+ + + @@ -46,6 +53,31 @@

+ + +

Most Popular:

@@ -56,11 +88,6 @@

Most Popular:

- -
- -
-

Trending New ACTION Movies:

diff --git a/script.js b/script.js index 9fec166a..1f150053 100644 --- 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 = `

No movie with the specified search term found. Please try again.

`; } } @@ -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 index 1a8f9ef2..fed917d3 100644 --- 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; +}