Merge pull request #8 from ishantonk/main

Logo Update and make UI compatible for mobile.
Bsodoge · Nov 15, 2023 · 962b1e9 · 962b1e9
2 parents cb66e5f + 36bc8e2
commit 962b1e9
Show file tree

Hide file tree

Showing 4 changed files with 280 additions and 88 deletions.
diff --git a/images/menu.svg b/images/menu.svg
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,24 +11,61 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles/style.css">
 </head>
+
 <body>
-    <nav>
-        <div class="logo">
-            <a href="">Youtube Dev Resources</a>
-        </div>
-        <div class="search-container">
-            <img src="images/search.svg" alt="Search">
-            <input type="search" name="" id="search" class="search" placeholder="Search by title or tag...">
-        </div>
-        <div class="github">
+    <header>
+        <nav>
+            <!-- logo -->
+            <a href="/" class="text-white">
+                <div id="logo">
+                    <span>Youtube</span>
+                    <span>Dev</span>
+                    <span>Resources</span>
+                </div>
+            </a>
+
+            <div id="nav-items-container">
+                <!-- search -->
+                <div id="search-bar">
+                    <input type="search" name="" id="search" placeholder="Search by title or tag...">
+                    <img src="images/search.svg" alt="Search">
+                </div>
+
+                <!-- social links -->
+                <a href="https://github.com/Bsodoge/Youtube-Dev-Resources">
+                    <div id="github-link" class="social-link">
+                        <img src="images/github-mark-white.svg" alt="Github">
+                    </div>
+                </a>
+            </div>
+
+            <!-- hamburger -->
+            <button id="hamburger" onclick="toggleMenu()">
+                <img src="images/menu.svg" alt="menu">
+            </button>
+
+        </nav>
+        <!-- menu -->
+        <div id="menu">
+            <!-- search -->
+            <div id="search-bar">
+                <input type="search" name="" id="search" placeholder="Search by title or tag...">
+                <img src="images/search.svg" alt="Search">
+            </div>
+
+            <!-- social links -->
             <a href="https://github.com/Bsodoge/Youtube-Dev-Resources">
-                <img src="images/github-mark-white.svg" alt="Github">
+                <div id="github-link" class="social-link">
+                    <img src="images/github-mark-white.svg" alt="Github">
+                </div>
             </a>
         </div>
-    </nav>
-    <div class="resource-container" id="resource-container">
+    </header>
 
-    </div>
+    <main>
+        <div id="resource-container"></div>
+    </main>
     <script src="scripts/script.js"></script>
 </body>
+
 </html>
diff --git a/scripts/script.js b/scripts/script.js
@@ -1,5 +1,7 @@
 const resourceContainer = document.querySelector('#resource-container');
 const searchBar = document.querySelector('#search');
+const menu = document.getElementById('menu');
+
 let videoInformation = [];
 searchBar.addEventListener('input', (e) => {
     let searchValue = e.target.value.toLowerCase().trim().replace(/\s{2,}/g,' ');
@@ -8,17 +10,22 @@ searchBar.addEventListener('input', (e) => {
         video.videoCard.classList.toggle('hidden', !isVisible);
     });
 });
+
+const toggleMenu = () => {
+    menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
+}
+
 const loadVideos = async () => {
     let videosJSON = await fetch('./videos.json');
     let videos = await videosJSON.json();
     videoInformation = videos.map(video => {
         let card = document.createElement('div');
         card.classList.add('card')
         card.innerHTML = `
-                <div class ="yt-container">
+                <div class ="video-container">
                     <iframe src="https://youtube.com/embed/${getID(video.url)}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
                 </div>
-                <div class="title">${video.title}</div>        
+                <div class="title">${video.title}</div>
         `
         if(video.tags){
             if(video.tags.length > 3) video.tags.splice(3);