-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
QR code, Add to calendar link, nav dropdown
- Loading branch information
Showing
5 changed files
with
140 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,61 @@ | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script> | ||
|
|
||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script> | ||
| <!-- Include Bootstrap JS --> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/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> | ||
|
|
||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |