#149 added hamburger alignment

headwirecom · Aug 18, 2020 · 83356f2 · 83356f2
1 parent 9d849e3
commit 83356f2
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/fragments/navigation/hatch.js b/fragments/navigation/hatch.js
@@ -28,6 +28,13 @@ module.exports = {
 
         f.addElse($);
         $.parent().prepend('<div class="p-5" v-if="isEditAndEmpty">{{isEditAndEmpty}}</div>')
-        $.prepend('<div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90 self-end m-3" style="width:24px;" v-on:click="toggleMenu">|||</div>')
+
+        let self = `{
+            'self-start': model.justifyitems === 'start',
+            'self-end': model.justifyitems === 'end'
+        }`
+
+        let hamburger = `<div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90 m-3" v-bind:class="${self}" style="width:24px;" v-on:click="toggleMenu">|||</div>`
+        $.prepend(hamburger)
     }
 }
diff --git a/fragments/navigation/template.vue b/fragments/navigation/template.vue
@@ -7,8 +7,11 @@
             'justify-center': model.justifyitems === 'center',
             'justify-end': model.justifyitems === 'end'
         }" v-else>
-      <div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90 self-end m-3"
-      style="width:24px;" v-on:click="toggleMenu">|||</div>
+      <div class="font-bold text-xl cursor-pointer block md:hidden transform-rotate-90 m-3"
+      v-bind:class="{
+            'self-start': model.justifyitems === 'start',
+            'self-end': model.justifyitems === 'end'
+        }" style="width:24px;" v-on:click="toggleMenu">|||</div>
       <ul class="flex flex-col md:flex-row" v-bind:class="{ 'flex' : menuActive, 'hidden md:flex' : !menuActive }"
       v-bind:style="`list-style-type: none;padding: 0px;`">
         <li class="children ml-2 relative dropdown-container" v-for="(child, i) in model.childrenPages"
@@ -66,14 +69,14 @@
                 item.style.transform = "rotate(0deg)";
                 parentItem.classList.add('bg-secondary')
                 parentItem.classList.add('md:bg-primary')
+                parentItem.querySelector('div a').classList.add('active');
                 parentItem.querySelector('ul').classList.remove('hidden');
-                parentItem.querySelector('ul').classList.remove('md:flex');
               } else {
                 item.style.transform = "rotate(180deg)";
                 parentItem.classList.remove('bg-secondary')
                 parentItem.classList.remove('md:bg-primary')
+                parentItem.querySelector('div a').classList.remove('active');
                 parentItem.querySelector('ul').classList.add('hidden');
-                parentItem.querySelector('ul').classList.add('md:flex');
               }
             },
             toggleMenu: function(){
@@ -94,10 +97,10 @@
 
 <style>
 @media (min-width: 768px) {
-  .flex.dropdown-list {
+  .hidden.dropdown-list {
     display: none;
   }
-  .relative.dropdown-container:hover > .flex.dropdown-list, .relative.dropdown-container:focus-within > .flex.dropdown-list {
+  .relative.dropdown-container:hover > .hidden.dropdown-list, .relative.dropdown-container:focus-within > .hidden.dropdown-list {
     display: flex;
   }
 }