diff --git a/Css-files/navbar.css b/Css-files/navbar.css
index 9282eb2c..33a9413f 100644
--- a/Css-files/navbar.css
+++ b/Css-files/navbar.css
@@ -153,3 +153,168 @@
background-color: var(--primary-bg-color);
color: var(--primary-text-color);
}
+
+.mobile-menu {
+ top: 0;
+ right: 0;
+ width: 70vw;
+ height: 100vh;
+ position: fixed;
+ z-index: 2;
+ background: rgba(0,0,0,0.9);
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ align-items: center;
+ transform: translateX(100%);
+ transition: transform 0.3s;
+}
+
+/* Screen more than 991px wide */
+@media ((min-width: 991px)) {
+ .mobile-menu {
+ display: none !important;
+ }
+
+}
+
+.mobile-menu a {
+ /* box-shadow: inset 0 0 1rem rgba(255,255,255,0.7); */
+ /* border-top: 3px solid #fff; */
+ /* border-bottom: 1px solid #fff; */
+ width: 100%;
+ text-align: center;
+ margin: 1rem 0;
+ padding: 1rem;
+ color: #fff;
+ text-decoration: none;
+ text-transform: uppercase;
+ position: relative;
+}
+
+.mobile-menu a:hover {
+ color: #f39d2c;
+}
+
+.mobile-menu__trigger {
+ cursor: pointer;
+ content: "";
+ position: absolute;
+ z-index: 3;
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ top: 2rem;
+ left: -5rem;
+ background: rgba(0,0,0,0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ /* -webkit-transform: rotateX(90deg);
+ transform: rotateX(180deg); */
+}
+.mobile-menu__trigger span {
+ display: block;
+ width: 50%;
+ height: 2px;
+ background: #fff;
+ position: relative;
+}
+.mobile-menu__trigger span::before,
+.mobile-menu__trigger span::after {
+ content: "";
+ position: absolute;
+ width: 100%;
+ height: 2px;
+ /* left: 0; */
+ background: #fff;
+ transition: all 0.3s;
+}
+.mobile-menu__trigger span::before {
+ top: -7px;
+}
+.mobile-menu__trigger span::after {
+ top: 7px;
+}
+.mobile-menu__trigger:hover span::before {
+ width: 50%;
+ top: -3px;
+ left: 0;
+ transform: rotate(-30deg);
+}
+.mobile-menu__trigger:hover span::after {
+ width: 50%;
+ top: 3px;
+ left: 0;
+ transform: rotate(30deg);
+}
+.mobile-menu_open {
+ transform: translateX(0%);
+ box-shadow: 0 0 2rem #000;
+}
+.mobile-menu_open+.overlay {
+ visibility: visible;
+ opacity: 1;
+}
+.mobile-menu_open .mobile-menu__trigger span::before,
+.mobile-menu_open .mobile-menu__trigger span::after {
+ right: 0;
+}
+/* .mobile-menu_open .mobile-menu__trigger:hover span::before {
+ transform: rotate(30deg);
+ right: 0;
+}
+.mobile-menu_open .mobile-menu__trigger:hover span::after {
+ transform: rotate(-30deg);
+} */
+
+.mobile-menu_open .mobile-menu__trigger:hover span::before {
+ width: 50%;
+ top: -3px;
+ right: 0;
+ transform: rotate(30deg);
+ left: auto;
+}
+.mobile-menu_open .mobile-menu__trigger:hover span::after {
+ width: 50%;
+ top: 3px;
+ right: 0;
+ transform: rotate(-30deg);
+ left: auto;
+}
+
+@media screen and (min-width: 990px) {
+ .navbarr .nav-links {
+ display: flex !important;
+ }
+}
+
+@media screen and (max-width: 990px) {
+ .hamburger {
+ display: inline;
+ z-index: 400;
+ }
+
+ .logo a {
+ font-size: 30px;
+ }
+
+ .nav-links {
+ position: absolute;
+ right: 1rem;
+ top: 3rem;
+ background-color: #333;
+ flex-direction: column;
+ padding: 10px;
+ align-items: center;
+ }
+
+ .navbarr .nav-links {
+ display: none;
+ }
+
+ .navbar-toggler {
+ display: inline !important;
+ }
+
+}
\ No newline at end of file
diff --git a/Html-files/navbar.js b/Html-files/navbar.js
index 95cf5d99..a55422dc 100644
--- a/Html-files/navbar.js
+++ b/Html-files/navbar.js
@@ -35,3 +35,72 @@ dropdownli.addEventListener("mouseleave", () => {
navlinka.setAttribute('aria-expanded', 'false');
menu.removeAttribute("data-bs-popper");
});
+
+const mobile_menu = document.querySelector(".mobile-menu"),
+ mobile_trigger = document.querySelector(".mobile-menu__trigger");
+
+let initialPoint,
+finalPoint;
+
+document.addEventListener("touchstart", function(event) {
+ initialPoint = event.changedTouches[0];
+});
+
+document.addEventListener("touchend", function(event) {
+ finalPoint = event.changedTouches[0];
+
+ let xAbs = Math.abs(initialPoint.pageX - finalPoint.pageX),
+ yAbs = Math.abs(initialPoint.pageY - finalPoint.pageY);
+
+ if(xAbs > 120 || yAbs > 120) { // 120 - SWIPE WIDTH
+ if(xAbs > yAbs) {
+ if(finalPoint.pageX < initialPoint.pageX) {
+ // SWIPE LEFT
+ mobile_menu.classList.remove("mobile-menu_open");
+ } else {
+ // SWIPE RIGTH
+ mobile_menu.classList.add("mobile-menu_open");
+ }
+ } else {
+ if(finalPoint.pageY < initialPoint.pageY) {
+ // SWIPE UP
+ } else {
+ // SWIPE DOWN
+ }
+ }
+ }
+});
+
+document.addEventListener("click", function(event) {
+ const target = event.target.closest(".mobile-menu__trigger");
+ if(target && target == mobile_trigger) {
+ mobile_menu.classList.toggle("mobile-menu_open");
+ } else if(event.target !== mobile_trigger && event.target !== mobile_menu) {
+ if( mobile_menu.classList.contains("mobile-menu_open") ) {
+ mobile_menu.classList.remove("mobile-menu_open");
+ }
+ }
+});
+
+mobile_menu.querySelectorAll("a").forEach(function(element) {
+ element.addEventListener("click", function(event) {
+ const anchor_href = event.currentTarget.getAttribute("href");
+ if(anchor_href.charAt(0) === "#") {
+ event.preventDefault();
+ if(anchor_href.length > 1) { // if #hash is not empty
+ const scroll_to_node = document.querySelector(event.currentTarget.hash);
+ if(scroll_to_node) {
+ SmoothScrollTo(scroll_to_node);
+ }
+ }
+ }
+ });
+});
+
+function SmoothScrollTo(element) {
+ if(element) {
+ element.scrollIntoView({
+ behavior: "smooth"
+ });
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index e9a627f4..99f58f25 100644
--- a/index.html
+++ b/index.html
@@ -205,11 +205,6 @@
-
-
-
+
+
+
+
+