From 3a4025091dccd180bd9b3218b384f5bcc683f62c Mon Sep 17 00:00:00 2001
From: jcupac <41914500+jcupac@users.noreply.github.com>
Date: Mon, 24 Jun 2024 11:01:40 +0200
Subject: [PATCH] QR code, Add to calendar link, nav dropdown

---
 _includes/navbar.html  |  15 +++---
 _includes/scripts.html |  60 ++++++++++++++++++++++-
 _scss/_conf.scss       |   7 +--
 _scss/_home_conf.scss  |   5 +-
 _scss/_navbar.scss     | 109 ++++++++++++++++++++++++-----------------
 5 files changed, 140 insertions(+), 56 deletions(-)

diff --git a/_includes/navbar.html b/_includes/navbar.html
index 92517e8..8156085 100644
--- a/_includes/navbar.html
+++ b/_includes/navbar.html
@@ -1,18 +1,21 @@
-<nav class="navbar navbar-expand-lg navbar-light s-navbar fixed-top">
+<nav class="navbar navbar-expand-sm navbar-dark fixed-top">
     <div class="navbar-container">
+
         <a href="{{ site.url }}/" class="navbar-brand" rel="noopener">
             <img src="{{ site.url }}/assets/te_logo.svg" alt="{{ Tech Excellence }}" width="" height="60" />
         </a>
 
-        <!-- <button class="navbar-toggler" id="navbar-toggler">
-        <span class="navbar-toggler-icon">&#9776;</span>
-    </button> -->
+        <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>           
+            <span class="close"><i class="bi bi-x"></i></span>
+        </button>
 
-        <div class="navbar-menu" id="navbar-menu">
+        <div class="navbar-menu collapse navbar-collapse" id="navbarNavDropdown">
             <a href="{{ site.url }}" class="navbar-link">Home</a>
             <a href="{{ site.url }}/conf" class="navbar-link">Conference</a>
             <a href="{{ site.url }}/#meetups" class="navbar-link">Meetups</a>
-            <!-- <a href="{{ site.url }}/members" class="navbar-link">Members</a> -->
+            <a href="{{ site.url }}/members" class="navbar-link">Members</a>
+            <a href="{{ site.url }}/network" class="navbar-link">Network</a>
             <!-- <a href="#" class="navbar-link">About</a> -->
             <!-- <a href="#" class="navbar-link">Contact</a> -->
         </div>
diff --git a/_includes/scripts.html b/_includes/scripts.html
index d3589f2..4824349 100644
--- a/_includes/scripts.html
+++ b/_includes/scripts.html
@@ -1,5 +1,61 @@
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 
+<!-- Include jQuery -->
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+<!-- Include Popper.js -->
 <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
 
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
+<!-- Include Bootstrap JS -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
+
+
+
+<!-- Toggle the navbar menu -->
+<script>
+    $(document).ready(function() {
+        $('#navbar-toggler').click(function() {
+            $('#navbarNavDropdown').toggleClass('show'); // Toggle 'show' class on navbar menu
+            $('#navbar-toggler').toggleClass('collapsed'); // Toggle 'collapsed' class on toggler button
+
+            // Toggle icon visibility based on menu state
+            if ($('#navbarNavDropdown').hasClass('show')) {
+                $('#navbar-toggler .navbar-toggler-icon').hide();
+                $('#navbar-toggler .close').show();
+            } else {
+                $('#navbar-toggler .navbar-toggler-icon').show();
+                $('#navbar-toggler .close').hide();
+            }
+        });
+
+        // Click event for the close (X) icon
+        $('#navbar-toggler .close').click(function() {
+            $('#navbar-toggler').addClass('collapsed');
+            $('#navbar-toggler .navbar-toggler-icon').show();
+            $('#navbar-toggler .close').hide();
+        });
+
+        // Active navbar link
+        var currentUrl = window.location.href;
+
+        $('.navbar-link').each(function() {
+            var linkUrl = $(this).attr('href');
+
+            // Normalize URLs for comparison
+            currentUrl = currentUrl.replace(/\/$/, ''); // Remove trailing slash
+            linkUrl = linkUrl.replace(/\/$/, ''); // Remove trailing slash
+
+            if (currentUrl === linkUrl) {
+                $(this).addClass('active');
+            }
+        });
+
+
+        // Close dropdown when going to href on the same page
+        $('.navbar-menu .navbar-link').on('click', function() {
+            $('#navbarNavDropdown').collapse('hide');
+        });
+
+    });
+</script>
+
+
diff --git a/_scss/_conf.scss b/_scss/_conf.scss
index d86f461..165b66c 100644
--- a/_scss/_conf.scss
+++ b/_scss/_conf.scss
@@ -118,6 +118,9 @@
                     border-radius: 50%;
                     border: 3px solid #58dbd578;
                     box-sizing: content-box;
+                    &:hover, &:active, &.active {
+                        border-color: #15e9deda;
+                    }
                 }
             }
             .anastasia-text {
@@ -137,9 +140,7 @@
                     a {
                         color: #2c2168;
                     }
-                    a:hover,
-                    a:active,
-                    a.active {
+                    a:hover, a:active, a.active {
                         color: #4d3bb3;
                     }
                 }
diff --git a/_scss/_home_conf.scss b/_scss/_home_conf.scss
index 19922b8..83f86ef 100644
--- a/_scss/_home_conf.scss
+++ b/_scss/_home_conf.scss
@@ -57,7 +57,7 @@
                 content: '';
                 position: absolute;
                 inset: 3px;
-                border: 2px solid rgb(0, 247, 234); // inner border
+                border: 2px solid rgb(58, 197, 190); // inner border
                 border-radius: 50%; 
                 box-sizing: border-box;
                 pointer-events: none;
@@ -66,6 +66,9 @@
                 color: white;
                 &:hover, &:active, &.active {
                     color: rgb(147, 243, 238);
+                    .img-container::before {
+                        border-color: rgb(1, 255, 242);
+                    }
                 }
             }
             .p-name {
diff --git a/_scss/_navbar.scss b/_scss/_navbar.scss
index 3e510d6..cb42b02 100644
--- a/_scss/_navbar.scss
+++ b/_scss/_navbar.scss
@@ -1,65 +1,86 @@
 .navbar {
-  background-color: #05191a;
-  box-shadow: 0 2px 6px rgba(5, 25, 26, 0.5);
-  color: #fff;
-  padding: 0rem 1rem;
-  height: 102px;
-}
-
-.navbar-container {
-  padding: 0 24px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.navbar-brand {
-  color: #fff;
-  margin-right: 1.5rem;
+    background-color: #05191a;
+    box-shadow: 0 2px 6px rgba(5, 25, 26, 0.5);
+    color: #fff;
+    padding: 0rem 1rem;
+    height: 102px;
+    .navbar-container {
+        padding: 0 24px;
+        display: flex;
+        align-items: center;
+        width: 100%;
+    }
+    .navbar-brand {
+        color: #fff;
+        margin-right: 1.5rem;
+    }
 }
 
 .navbar-toggler {
     display: none;
     font-size: 1.5rem;
     border: none;
-    color: #fff;
+    background-color: transparent;
+    color: #ccd4d5; // #909798
+    &:focus {
+        box-shadow: none !important;
+        // outline: 0;
+    }
+}
+
+.navbar-toggler-icon {
+    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='%23ccd4d5' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
+    width: 2.25rem; // default
+    height: 2.25rem;
+}
+
+.close {
+    font-weight: 300;
+    font-size: 2.75rem;
 }
 
 .navbar-menu {
-    display: flex;
-    gap: 1.25rem;
-    a {
+    gap: 2rem;
+    padding-top: 0.5rem;
+    .navbar-link {
         font-size: 14px;
+        text-decoration: none;
+        color: #fff;
         &:hover, &:active, &.active {
             color: #12dfef;
         }
     }
 }
 
-.navbar-link {
-    text-decoration: none;
-    color: #fff;
+@include media-breakpoint-down(sm) {
+    .navbar-toggler {
+        display: block;
+        margin-left: auto;
+    }
+    .navbar-menu {
+        display: none;
+        flex-direction: column;
+        width: 100%;
+        position: absolute;
+        top: 102px;
+        left: 0;
+        z-index: 1000;
+        background-color: #05191a;
+        height: 100vh;
+    }
+    .navbar-menu.show {
+        display: flex;
+    }
 }
 
-// JC check - i think this is for the mobile navbar on the right 3 lines
-// @include media-breakpoint-down (md) {
-//     .navbar-toggler {
-//         display: block;
-//         // JC - show on the right side
-//         margin-left: auto;
-//     }
-
-//     .navbar-menu {
-//         display: none;
-//         flex-direction: column;
-//         width: 100%;
-//     }
+.navbar-toggler.collapsed .close {
+    display: none;
+}
 
-//     .navbar-menu.show {
-//         display: flex;
-//     }
+.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
+    display: none;
+}
 
-//     .navbar-link {
-//         padding: 0.5rem 1rem;
-//     }
-// }
+.navbar-toggler:not(.collapsed) .close {
+    display: inline;
+}