From 845521990ffedede1f71df447017508fd3fb8f61 Mon Sep 17 00:00:00 2001
From: Kirti Arora <62488064+Kirti-1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 00:57:18 +0530
Subject: [PATCH 1/2] Update script.js

added expansion of contacts in smaller screen size on hover than on click of button show contacts.
---
 assets/js/script.js | 51 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 7 deletions(-)

diff --git a/assets/js/script.js b/assets/js/script.js
index 6439a82cc..8bc501ad7 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -6,13 +6,12 @@
 const elementToggleFunc = function (elem) { elem.classList.toggle("active"); }
 
 
+// // sidebar variables
+// const sidebar = document.querySelector("[data-sidebar]");
+// const sidebarBtn = document.querySelector("[data-sidebar-btn]");
 
-// sidebar variables
-const sidebar = document.querySelector("[data-sidebar]");
-const sidebarBtn = document.querySelector("[data-sidebar-btn]");
-
-// sidebar toggle functionality for mobile
-sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
+// // sidebar toggle functionality for mobile
+// sidebarBtn.addEventListener("click", function () { elementToggleFunc(sidebar); });
 
 
 
@@ -136,6 +135,8 @@ for (let i = 0; i < formInputs.length; i++) {
 
 
 
+
+
 // page navigation variables
 const navigationLinks = document.querySelectorAll("[data-nav-link]");
 const pages = document.querySelectorAll("[data-page]");
@@ -156,4 +157,40 @@ for (let i = 0; i < navigationLinks.length; i++) {
     }
 
   });
-}
\ No newline at end of file
+}
+
+
+
+
+
+
+//Added later on - Hide the show contacts button when the screen size is less than 1250px, 
+// instead added contacts to expand when the user hovers over the profile card which seems much better.
+
+
+
+
+const elementAddFunc = function (elem) { elem.classList.add("active"); }
+const elementRemoveFunc = function (elem) { elem.classList.remove("active"); }
+
+
+const _sidebar = document.querySelector("[data-sidebar]");
+var sidebarInfo = document.querySelectorAll(".sidebar-info");
+for(let i=0;i<sidebarInfo.length;i++){
+  sidebarInfo[i].addEventListener("mouseover",function(){
+    console.log("mouseover");
+    //To make sure the side screen got active when it is horizontally aligned
+    if(window.innerWidth<=1250){
+      elementAddFunc(_sidebar);
+    }
+  })
+
+  sidebarInfo[i].addEventListener("mouseout",function(){
+    console.log("mouseout");
+
+    //To make sure the side screen got active when it is horizontally aligned
+    if(window.innerWidth<=1250){
+      elementRemoveFunc(_sidebar);
+    }
+  })
+}

From 0a6bc3c282deb8af324509c674f19a06bb79cbce Mon Sep 17 00:00:00 2001
From: Kirti Arora <62488064+Kirti-1@users.noreply.github.com>
Date: Mon, 17 Jun 2024 00:57:49 +0530
Subject: [PATCH 2/2] Update index.html

removed the show contacts button.
---
 index.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index efac5f016..44baa0263 100644
--- a/index.html
+++ b/index.html
@@ -51,11 +51,7 @@ <h1 class="name" title="Richard hanrick">Richard hanrick</h1>
           <p class="title">Web developer</p>
         </div>
 
-        <button class="info_more-btn" data-sidebar-btn>
-          <span>Show Contacts</span>
-
-          <ion-icon name="chevron-down"></ion-icon>
-        </button>
+        
 
       </div>
 
@@ -1198,4 +1194,4 @@ <h3 class="h3 form-title">Contact Form</h3>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>