Merge pull request #194 from znmustic/develop

Fix for mobile menu
codeforcroatia · Jun 13, 2023 · e47adf0 · e47adf0
2 parents 5a4f701 + 7a1f4cd
commit e47adf0
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/templates/web/popravitodev/header.html b/templates/web/popravitodev/header.html
@@ -39,6 +39,7 @@
 
     <link rel="stylesheet" type="text/css" href="[% base_css %]">
     <link rel="stylesheet" type="text/css" href="[% layout_css %]" media="screen and (min-width:48.063em)">
+    <script src="/cobrands/[% c.cobrand.asset_moniker %]/close_menu_mobile.js"></script>
 
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@600;700;800;900&family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">

diff --git a/web/cobrands/popravitodev/base.scss b/web/cobrands/popravitodev/base.scss
@@ -171,6 +171,27 @@ img {
 	padding-left: 2rem;
 }
 
+.close-mobile-menu {
+    border: none;
+    width: 24px;
+    height: 24px;
+    position: fixed;
+    right: 1.8rem;
+    color: #1D1C1C;
+    top: 27px;
+    background: url("/cobrands/popravito/images/ic-close.svg") no-repeat center;
+
+}
+
+@media only screen and (max-width: 360px) {
+    .mobile-menu-button {
+        right: 30px;
+    }
+    .menu {
+        right: -15px;
+    }
+}
+
 .report-issue-button {
 	background-color: $grayscale;
 	color: white;
@@ -433,7 +454,7 @@ img {
 	@media only screen and (min-width:150px) and (max-width: 1050px) {
 		display:flex;
 		justify-content: left;
-		width: 150%;
+		width: 100%;
 	}
 }
 

diff --git a/web/cobrands/popravitodev/close_menu_mobile.js b/web/cobrands/popravitodev/close_menu_mobile.js
@@ -0,0 +1,9 @@
+window.addEventListener("DOMContentLoaded", (event) => {
+    const menuButton = document.getElementById('mobile-menu');
+
+    const closeMobileMenu = () => {
+        menuButton.classList.toggle('close-mobile-menu');
+    }
+
+    menuButton.addEventListener('click', closeMobileMenu)
+})