scripting

Parv-gugnani · Parv-gugnani · commit f30a4b8b7d01 · 2024-01-15T18:18:56.000+05:30
diff --git a/Youtube Clone/index.html b/Youtube Clone/index.html
@@ -8,18 +8,13 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
     />
-
     <title>Youtube</title>
   </head>
   <body>
     <div class="main">
       <h1>Youtube</h1>
     </div>
 
-    <aside>
-      <h1>hi</h1>
-    </aside>
-
     <div class="navbar">
       <div class="logo">Youtube</div>
       <div class="search-bar">
@@ -28,11 +23,16 @@ <h1>hi</h1>
           <i id="icon" class="bi bi-search"></i>
         </button>
       </div>
-      <div class="links">
-        <a href="#">Home</a>
-        <a href="#">Trending</a>
-        <a href="#">Subscriptions</a>
+      <div class="sidebar">
+        <button id="toggleButton">&#9776;</button>
+        <div class="links">
+          <h2>Home</h2>
+          <h2>Trending</h2>
+          <h2>Subscriptions</h2>
+        </div>
       </div>
     </div>
+
+    <script src="script.js"></script>
   </body>
 </html>
diff --git a/Youtube Clone/script.js b/Youtube Clone/script.js
@@ -0,0 +1,9 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const toggleButton = document.getElementById("toggleButton");
+  const linksContainer = document.querySelector(".links");
+
+  toggleButton.addEventListener("click", function () {
+    linksContainer.style.maxHeight =
+      linksContainer.style.maxHeight === "0px" ? "200px" : "0px";
+  });
+});
diff --git a/Youtube Clone/style.css b/Youtube Clone/style.css
@@ -65,21 +65,27 @@ body {
 }
 
 .search-bar button {
-    padding: 11px 14px;
+    padding: 8px 14px;
     background-color: hsl(0, 0%, 18.82%);
     color: #fff;
     border: none;
-    border-radius: 0 8px 8px 0;
+    border-radius: 4px 10px 10px 4px;
     cursor: pointer;
     outline: white;
     font-size: 14px;
 }
 
 input {
     background-color: #0f0f0f;
+    opacity: 80%;
 }
 
 #icon {
     width: 7px;
     height: 7px;
+}
+
+
+input[type="text"] {
+    color: #ffffff;
 }
