Working on dropdown button

hannahvatar · Dec 28, 2024 · b86df76 · b86df76
1 parent 59a68c0
commit b86df76
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 158 deletions.
diff --git a/index.html b/index.html
@@ -1,39 +1,36 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Anabelle's Work</title>
-  <link rel="stylesheet" href="src/style.css">
-  <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
-
-  <script src="https://unpkg.com/feather-icons"></script>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Anabelle's Work</title>
+ <link rel="stylesheet" href="src/style.css">
+ <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700&display=swap" rel="stylesheet">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap" rel="stylesheet">
+
+ <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="home">
-  <!-- Navigation Bar -->
-  <div class="container-fluid">
-    <!--<div class="nav-link">Home</div>-->
-    <div class="navbar">
-
-      <div class="nav-button-wrapper">
-        <div class="nav-button" id="about-link">
-          <a href="#" id="openAboutMeModal">🦄 About Me</a>
-        </div>
-      </div>
+ <!-- Navigation Bar -->
+ <div class="container-fluid">
+   <div class="navbar">
+     <div class="nav-button-wrapper">
+       <div class="nav-button" id="about-link">
+         <a href="#" id="openAboutMeModal">🦄 About Me</a>
+       </div>
+     </div>
 
-      <div class="nav-button-wrapper">
-      <div class="funky-button" id="career-link">
-        <a href="#" id="openTimelineModal">Career Timeline</a>
-      </div>
-      </div>
+     <div class="nav-button-wrapper">
+       <div class="funky-button" id="career-link">
+         <a href="#" id="openTimelineModal">Career Timeline</a>
+       </div>
+     </div>
 
-      <div class="nav-button-wrapper">
+     <div class="nav-button-wrapper">
       <div class="nav-button" id="case-studies-link">
-        <a href="#">Case Studies</a>
-        <!-- Dropdown Menu -->
+        <a href="#" class="toggle-button">Case Studies</a>
         <div class="dropdown-menu">
           <a href="case-study-1.html">Grrunch app</a>
           <a href="case-study-2.html">Desjardins Design System</a>
@@ -42,49 +39,44 @@
           <a href="case-study-5.html">More...</a>
         </div>
       </div>
-      </div>
+    </div>
 
-      <div class="nav-button-wrapper">
-      <div class="nav-button" id="resume-link">
-        <a href="resume.html">Resume
-          <i data-feather="download"></i>
-        </a>
 
-      </div>
+     <div class="nav-button-wrapper">
+       <div class="nav-button" id="resume-link">
+         <a href="resume.html">Resume
+           <i data-feather="download"></i>
+         </a>
+       </div>
      </div>
 
      <div class="nav-button-wrapper">
-      <div class="nav-button" id="linkedin-link">
-        <a href="https://www.linkedin.com/in/anabelledubois/" target="_blank">LinkedIn
-          <i data-feather="external-link"></i>
-        </a>
-      </div>
-    </div>
-
-    <div class="nav-button-wrapper">
-      <div class="nav-button" id="call-link">
-        <a href="tel:+15145820109">Call Me
-          <i data-feather="phone"></i>
-        </a>
-      </div>
-    </div>
-
-    <div class="nav-button-wrapper">
-      <div class="nav-button" id="email-link">
-        <a href="mailto:[email protected]?subject=✨Very%20interesting%20portfolio!%20&body=Bonjour%20Anabelle!%0A%0AHow%20are%20you?%20I%20stumbled%20upon%20your%20portfolio%20and%20would%20like%20to%20discuss%20with%20you..." target="_blank">Email Me
-          <i data-feather="mail"></i>
-        </a>
-      </div>
-    </div>
-
-
-
+       <div class="nav-button" id="linkedin-link">
+         <a href="https://www.linkedin.com/in/anabelledubois/" target="_blank">LinkedIn
+           <i data-feather="external-link"></i>
+         </a>
+       </div>
+     </div>
 
+     <div class="nav-button-wrapper">
+       <div class="nav-button" id="call-link">
+         <a href="tel:+15145820109">Call Me
+           <i data-feather="phone"></i>
+         </a>
+       </div>
+     </div>
 
-    </div>
-  </div>
+     <div class="nav-button-wrapper">
+       <div class="nav-button" id="email-link">
+         <a href="mailto:[email protected]?subject=✨Very%20interesting%20portfolio!%20&body=Bonjour%20Anabelle!%0A%0AHow%20are%20you?%20I%20stumbled%20upon%20your%20portfolio%20and%20would%20like%20to%20discuss%20with%20you..." target="_blank">Email Me
+           <i data-feather="mail"></i>
+         </a>
+       </div>
+     </div>
+   </div>
+ </div>
 
-  <!-- End Navigation Bar -->
+ <!-- End Navigation Bar -->
 
    <!-- Main content -->
     <div class="container-fluid">
@@ -353,6 +345,7 @@ <h4>Next Steps</h4>
   <script src="src/js/app.js" type="module"></script>
   <script src="src/js/components/navbar.js" defer></script>
   <script src="src/js/components/modal.js" defer></script>
+  <script src="src/js/components/dropdown.js" defer></script>
   <script>feather.replace();</script>
 </body>
 </html>
diff --git a/src/js/components/dropdown.js b/src/js/components/dropdown.js
@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const toggle = document.getElementById('caseStudiesToggle');
+  const menu = document.getElementById('caseStudiesMenu');
+
+  toggle.addEventListener('click', function(e) {
+    e.preventDefault();
+    menu.classList.toggle('show');
+    this.classList.toggle('active');
+  });
+
+  // Close menu when clicking outside
+  document.addEventListener('click', function(e) {
+    if (!menu.contains(e.target) && !toggle.contains(e.target)) {
+      menu.classList.remove('show');
+      toggle.classList.remove('active');
+    }
+  });
+});
+
+// Initialize Feather icons
+feather.replace();
diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss
@@ -63,54 +63,6 @@
   }
 }
 
-/* Dropdown Menu Styles */
-.dropdown-menu {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  min-width: 200px;
-  background-color: #f9f9f9;
-  box-shadow: 2px 0 16px rgba(0, 0, 0, 0.2);
-  padding: 20px 0;
-  z-index: 1000;
-  transform: translateX(-100%);
-  transition: transform 0.3s ease;
- }
-
- .dropdown-menu.show {
-  transform: translateX(0);
- }
-
-/* Dropdown Link Styling */
-.dropdown-menu a {
-  color: black;
-  text-decoration: none;
-  text-align: left;
-  display: block;
-  width: 100%;
-  padding: 8px 16px;
-  height: 30px;
-  transition: all 0.3s ease; // Smooth transition for hover effects
-  border-radius: 0px;
-
-  &:hover {
-    background-color: #00007D;
-    color: white;
-    border-radius: 0px;
-  }
-}
-
-/* First and last links to respect dropdown menu's border-radius */
-.dropdown-menu a:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-}
-
-.dropdown-menu a:last-child {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
-}
 
 /* Navigation Link Styling */
 .nav-link {

diff --git a/src/scss/components/_dropdown.scss b/src/scss/components/_dropdown.scss
@@ -0,0 +1,53 @@
+/* Dropdown Button Styles */
+.dropbtn {
+  background-color: #04AA6D;
+  color: white;
+  padding: 12px 16px;
+  font-size: 14px;
+  font-family: "IBM Plex Sans", serif;
+  border: none;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.dropbtn:hover,
+.dropbtn:focus {
+  background-color: #3e8e41;
+}
+
+/* Dropdown Container */
+.dropdown {
+  position: relative;
+  float: right;
+}
+
+/* Dropdown Content */
+.dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f9f9f9;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
+  right: 0;
+  z-index: 1;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.dropdown-content a {
+  color: black;
+  padding: 10px 16px;
+  text-decoration: none;
+  display: block;
+  font-size: 12px;
+  font-family: "IBM Plex Sans", serif;
+  transition: background-color 0.3s ease;
+}
+
+.dropdown-content a:hover {
+  background-color: #ddd;
+}
+
+.show {
+  display: block;
+}
diff --git a/src/scss/components/_navbar.scss b/src/scss/components/_navbar.scss
@@ -65,10 +65,6 @@
     background: transparent; // Keep transparent
   }
 
-  &:hover .dropdown-menu {
-    display: block;
-  }
-
   a {
     text-decoration: none;
     color: inherit;
@@ -104,50 +100,7 @@
   }
 }
 
-/* Dropdown Menu Styles */
-.dropdown-menu {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  background-color: #f9f9f9;
-  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
-  width: 180px;
-  z-index: 2;
-  border-radius: 8px;
-  padding: 0px;
-  overflow: hidden;
-
-  a {
-    color: black;
-    text-decoration: none;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: flex-start; // This ensures text is aligned to the left
-    width: 100%;
-    height: 40px;
-    padding: 0 16px;
-    transition: all 0.3s ease;
-    border-radius: 0px;
-
-    &:hover {
-      background-color: #00007D;
-      color: white;
-      border-radius: 0px;
-    }
 
-    &:first-child {
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-    }
-
-    &:last-child {
-      border-bottom-left-radius: 8px;
-      border-bottom-right-radius: 8px;
-    }
-  }
-}
 
 /* Navigation Link Styling */
 .nav-link {

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -5,6 +5,7 @@
 @use 'components/navbar' as *;
 @use 'components/containers' as *;
 @use 'components/modal' as *;
+@use 'components/dropdown' as *;
 
 @use 'clouds' as *;