Merge pull request #23 from Larkuo/feature/updated-nav-bar

Feature/updated nav bar
Open-Source-Chandigarh · Oct 25, 2023 · ba7c062 · ba7c062
2 parents aaca271 + 6ff9edb
commit ba7c062
Show file tree

Hide file tree

Showing 7 changed files with 265 additions and 45 deletions.
diff --git a/Data/navbar/bookmark-icon.png b/Data/navbar/bookmark-icon.png
diff --git a/Data/navbar/close-icon.png b/Data/navbar/close-icon.png
diff --git a/Data/navbar/menu-icon.png b/Data/navbar/menu-icon.png
diff --git a/Data/navbar/search.png b/Data/navbar/search.png
diff --git a/Data/videoscript/script.js b/Data/videoscript/script.js
@@ -55,4 +55,11 @@ function reveal() {
         }
         }
 window.addEventListener("scroll", reveal);
-
+
+function openSideNav() {
+    document.getElementById("overlay-nav").style.width = "250px";
+}
+
+function closeSideNav() {
+    document.getElementById("overlay-nav").style.width = "0px";
+}
diff --git a/index.html b/index.html
@@ -29,24 +29,48 @@
 
 
 </head>
-
 <body style="background-color: black;color: white;" >
-
-    <div class="topbar">
-        <div class="logo">
+    <div id="nav-bar">
+        <div id="menu-icon-container" onclick="openSideNav()">
+            <img src="./Data/navbar/menu-icon.png" alt="menu-icon" id="menu-icon"/>
+        </div>
+        <div id="logo-container">
             <a href="#" class="logosite">
-                <img src="./Data/logo/LogoStreamMixx.png" alt="sitelogo" class="logosite">
+                <img src="./Data/logo/LogoStreamMixx.png" alt="Streamixx Logo" id="logo">
                 <div class="streamixx">Streamixx</div>
             </a>
-
         </div>
-        <div class="top">
-            <div class="navbar">
-                <div class="home"><a href="#">Home</a></div>
-                <div class="about"><a href="#abse">About Us</a></div>
-                <div class="contact"><a href="#contactus">Contact Us</a></div>
+        <div id="search-bar-container" class="search-blur">
+            <select name="search-options" id="search-options">
+                <option value="all">All</option>
+                <option value="movies">Movies</option>
+                <option value="series">Series</option>
+                <option value="tv-shows">TV Shows</option>
+            </select>
+            <input type="text" placeholder="Search Streamixx" id="search-bar" onfocus="onFocusSearch()" onblur="onBlurSearch()"/>
+            <div id="search-icon-container">
+                <img src="./Data/navbar/search.png" alt="search-icon" id="search-icon"/>
             </div>
         </div>
+        <div id="menu-container" class="nav-section navbar">
+            <div class="home"><a href="#">Home</a></div>
+            <div class="about"><a href="#abse">About Us</a></div>
+            <div class="contact"><a href="#contactus">Contact Us</a></div>
+            <img src="./Data/navbar/bookmark-icon.png" alt="bookmark-icon" id="bookmark-icon"/>
+            <button class="sign-in">Sign In</button>
+        </div>
+    </div>
+
+    <div id="overlay-nav" class="side-nav">
+        <div id="side-nav-close">
+            <img src="./Data/navbar/close-icon.png" alt="close-icon" id="close-icon" onclick="closeSideNav()"/>
+        </div>
+        <a href="#" onclick="closeSideNav()">Home</a>
+        <a href="#genres" onclick="closeSideNav()">Genres</a>
+        <a href="#latestMovies" onclick="closeSideNav()">Latest Movies</a>
+        <a href="#imdbtop" onclick="closeSideNav()">Top 5 this week</a>
+        <a href="#contactus" onclick="closeSideNav()">Contact Us</a>
+        <a href="#footerSection" onclick="closeSideNav()">About Us</a>
     </div>
 
     <div class="welcomepage">
@@ -84,7 +108,7 @@
     <br><br><br>
 
 <!-- ===================================================================== -->
-<h2 style="margin-bottom: 40px;margin-left: 20px; padding: 10px;" class="glow">Latest Movies</h2>
+<h2 style="margin-bottom: 40px;margin-left: 20px; padding: 10px;" class="glow" id="latestMovies">Latest Movies</h2>
 <div id="carouselExampleCaptions" class="carousel carousel-dark slide" data-bs-ride="false" style="margin-bottom: 100px;">
     <div class="carousel-indicators" style="background-color: rgba(255, 255, 255, 0.54);">
       <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"s></button>
@@ -169,7 +193,7 @@ <h2 style="margin-bottom: 40px;margin-left: 20px; padding: 10px;" class="glow">L
   </div>
 <!-- =============================================================================== -->
 
-    <div class="genres">
+    <div class="genres" id="genres">
         <div class="action-genre reveal fade-left">
             <video id="my-video1" src="./Data/genvid/vid1.mp4" muted loop></video>
             <div class="genre-content">
@@ -275,7 +299,7 @@ <h1>THRILLER</h1>
     </div>
     <br>
     <main class="main1">
-        <div class="imdbtop">
+        <div class="imdbtop" id="imdbtop">
             <h1>Top 5 on <span>IMDB</span> this week</h1>
         </div>
         <div class="imdb_cards">
@@ -400,7 +424,7 @@ <h2>5. Oppenheimer</h2>
     </div>
 
 <!-- Footer Section -->
-<div class="footerSection">
+<div class="footerSection" id="footerSection">
     <button class="title">Sign in for more access</button>