diff --git a/view/layout.templ b/view/layout.templ index 5fc184a..6d1b17a 100644 --- a/view/layout.templ +++ b/view/layout.templ @@ -1,13 +1,13 @@ package view templ AuthorisedLayout() { - - - - - - - + - - -
- - -
-
-
-

Dashboard

-
-
-
-
- -
-
-
-
- - -} \ No newline at end of file + + +
+ +
+
+
+

Dashboard

+
+
+
+
+ +
+
+
+
+ + +} diff --git a/view/layout_templ.go b/view/layout_templ.go index 0aa6dc0..622b000 100644 --- a/view/layout_templ.go +++ b/view/layout_templ.go @@ -57,6 +57,33 @@ func AuthorisedLayout() templ.Component { }, 75); }) + const mobileMenu = document.querySelector('#mobile-menu') + const mobileMenuButton = document.querySelector('#mobile-menu-button') + const mobileMenuClosedIcon = document.querySelector('#mobile-menu-closed-icon') + const mobileMenuOpenIcon = document.querySelector('#mobile-menu-open-icon') + mobileMenuButton.addEventListener('click', () => { + if (mobileMenu.classList.contains('hidden')) { + // Show menu + mobileMenu.classList.remove('hidden'); + + mobileMenuOpenIcon.classList.remove('hidden'); + mobileMenuOpenIcon.classList.add('block'); + mobileMenuClosedIcon.classList.remove('block'); + mobileMenuClosedIcon.classList.add('hidden'); + return; + } + + // Hide menu + setTimeout(() => { + mobileMenu.classList.add('hidden'); + + mobileMenuOpenIcon.classList.remove('block'); + mobileMenuOpenIcon.classList.add('hidden'); + mobileMenuClosedIcon.classList.remove('hidden'); + mobileMenuClosedIcon.classList.add('block'); + }, 75); + }) + document.addEventListener('click', (event) => { if (!menu.classList.contains('hidden') && !menuButton.contains(event.target)) { // Hide menu @@ -66,6 +93,18 @@ func AuthorisedLayout() templ.Component { menu.classList.add('hidden'); }, 75); } + + if (!mobileMenu.classList.contains('hidden') && !mobileMenuButton.contains(event.target)) { + // Hide menu + setTimeout(() => { + mobileMenu.classList.add('hidden'); + + mobileMenuOpenIcon.classList.remove('block'); + mobileMenuOpenIcon.classList.add('hidden'); + mobileMenuClosedIcon.classList.remove('hidden'); + mobileMenuClosedIcon.classList.add('block'); + }, 75); + } }) }) ` @@ -190,7 +229,7 @@ func AuthorisedLayout() templ.Component { if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("-->