Merge pull request #264 from srishti023/main

hamburger menu for small screen sizes implemented
swaraj-das · Oct 11, 2024 · 988e1e3 · 988e1e3
2 parents 4fe641c + 25a4f09
commit 988e1e3
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 41 deletions.
diff --git a/index.html b/index.html
@@ -8,6 +8,7 @@
     <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <link rel="stylesheet" href="style.css">
 </head>
 
@@ -19,41 +20,57 @@
         <div class="container">
 
             <div class="navbar">
-                <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
-                <a href="/"><span class="website-name">Collect your GamingTools</span></a>
+                <div class="logo-outer">
+                    <a href="/"> <img src="images/logo.png" class="logo" alt="Logo"></a>
+                    <a href="/"><span class="website-name">Collect your GamingTools</span></a>
+                </div>
                 <nav>
-                    <ul id="menuList">
+                    <ul>
                         <li><a href="#controller">Game Controllers</a></li>
                         <li><a href="#vrsection">VR Accessories</a></li>
                         <li><a href="#keyboard">Gaming Keyboard</a></li>
                         <li><a href="#others">Others</a></li>
                         <li class="login"><a href="login/login.html">Login</a></li>
-                    <label class="switch">
-                        <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
-                        <span class="slider"></span>
-                    </label>
+                        <li><label class="switch">
+                            <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
+                            <span class="slider"></span>
+                        </label></li>
                     </ul>
 
+                    <!-- Hamburger Menu Icon -->
+                    <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
                 </nav>
-
-
-             <!-- Search Bar (initially hidden) -->
-            <div class="search-bar" id="searchBar">
-                <input type="text" id="search-input" placeholder="Search..." oninput="performSearch()" />
-                <button type="button" onclick="performSearch()">🔍</button>
             </div>
 
-            <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
-
-            </div>
-            <label class="switch">
+
+            <nav>
+                <ul id="menuList">
+                    <li><a href="#controller">Game Controllers</a></li>
+                    <li><a href="#vrsection">VR Accessories</a></li>
+                    <li><a href="#keyboard">Gaming Keyboard</a></li>
+                    <li><a href="#others">Others</a></li>
+                    <li class="login"><a href="login/login.html">Login</a></li>
+                    <!-- Theme Toggle -->
+            <li><label class="switch">
                 <input type="checkbox" id="theme-toggle" onchange="toggleTheme()">
                 <span class="slider"></span>
-            </label>
+            </label></li>
+                </ul>
+                <!-- Hamburger Menu Icon -->
+                <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
+            </nav>
 
             <section class="hero">
                 <div class="overlay"></div>
                 <div class="hero-content">
+                                 <!-- Search Bar (initially hidden) -->
+
+            <div class="searchbar-outer">
+                <div class="search-bar hidden" id="searchBar">
+                    <input type="text" id="search-input" placeholder="Search..." />
+                    <button type="button" onclick="performSearch()">🔍</button>
+                </div>
+            </div>
                     <h1>Welcome to GamingTools</h1>
                     <p>Your one-stop shop for all gaming accessories.</p>
                     <a href="#controller" class="cta-btn">Explore Products</a>

diff --git a/script.js b/script.js
@@ -1,16 +1,22 @@
 var menuList = document.getElementById("menuList");
-menuList.style.maxHeight = "0px";
+menuList.style.height = "0px";
+menuList.style.paddingTop = "0px";
+menuList.style.display = "block";
+menuList.style.position = "fixed";
+menuList.style.borderRadius = "20px";
 
 function toggleMenu() {
-  if (menuList.style.maxHeight == "0px") {
-    menuList.style.maxHeight = "160px";
-  } else {
-    menuList.style.maxHeight = "0px";
-  }
+    if (menuList.style.height == "0px") {
+        menuList.style.height = "auto";
+        menuList.style.paddingTop = "20px";
+    } else {
+        menuList.style.height = "0px";
+        menuList.style.paddingTop = "0px";
+    }
 }
-window.onscroll = function () {
-  updateProgressBar();
-};
+ window.onscroll = function() {
+    updateProgressBar();
+  };
 
 function updateProgressBar() {
   var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

diff --git a/style.css b/style.css
@@ -135,7 +135,6 @@ html::-webkit-scrollbar-thumb:window-inactive {
 .container {
     width: 100%;
     min-height: 100vh;
-    padding-right: 5%;
     box-sizing: border-box;
     overflow-x: hidden;
 }
@@ -144,6 +143,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     position: fixed;
     top: 0;
     overflow: hidden;
@@ -207,7 +207,7 @@ html::-webkit-scrollbar-thumb:window-inactive {
 .logo {
     width: 50px;
     cursor: pointer;
-    margin: 18px 0;
+    margin: 18px 10px;
 }
 
 @keyframes rainbow {
@@ -247,14 +247,15 @@ html::-webkit-scrollbar-thumb:window-inactive {
 }
 
 nav {
-    flex: 1;
-    text-align: right;
-    margin-right: 100px;
+    height: 78.16px;
+    display: flex;
+    align-items: center;
 }
 nav ul{
-    margin-left: 20px;
     display: flex;
     flex-direction: row;
+    height: 78.16px;
+    align-items: center;
 }
 nav ul li {
     list-style: none;
@@ -549,6 +550,10 @@ button:hover img {
     margin-right: 15px;
 }
 
+.logo-outer{
+    display: flex;
+    align-items: center;
+}
 .logo-text {
     font-size: 1.5em;
     margin: 0;
@@ -721,7 +726,7 @@ button:hover img {
 
 .social-sidebar {
     position: fixed;
-    top: 50%;
+    top: 55%;
     left: 0;
     transform: translateY(-50%);
     display: flex;
@@ -799,10 +804,11 @@ button:hover img {
         width: 100%;
         background: linear-gradient(to right, #fb5283, #ff3527);
         position: absolute;
-        top: 73px;
+        /* top: 73px; */
         right: 0;
         z-index: 2;
         margin-right: 20px;
+        position:fixed;
     }
 
     nav ul li {
@@ -965,12 +971,17 @@ button:hover img {
 
     nav ul li a {
         color: #fff;
+        font-size: 1rem;
+        padding: 2rem
     }
 
     nav ul li a:hover {
         color: #ffee00;
         transform: scale(1.18);
     }
+    .switch{
+        margin: 50px;
+    }
 
     .login a {
         background-color: #752280;
@@ -993,6 +1004,10 @@ button:hover img {
         overflow: hidden;
         transition: 0.5s;
     }
+    .header .navbar{
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .scroll-top {
@@ -1015,6 +1030,12 @@ button:hover img {
     display: none;
 }
 
+.searchbar-outer{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
 .search-bar {
     text-align: center;
     margin: 15px 0;
@@ -1026,14 +1047,12 @@ button:hover img {
     padding: 8px 15px;
     border-radius: 50px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    max-width: 250px; /* Adjust width to make it smaller */
-    margin: 20px auto 0 auto; /* Right alignment with some margin */
-    position: relative;
-    right: 80px; /* Push it further right */
+    width: 50%;
+    left: 27rem;
 }
 
 #search-input {
-    width: 60%;  /* Smaller input size */
+    width: 100%;  /* Smaller input size */
     padding: 8px 10px;
     font-size: 14px;
     border: none;
@@ -1088,7 +1107,8 @@ button:hover img {
 
 .hero-content {
     position: relative;
-    z-index: 2;
+    z-index: 1;
+    width: 100%;
 }
 
 .hero-content h1 {