patch: New right menu on mobile - JS fixed + extended through circle and project pages

src/index.pug

@@ -99,7 +99,7 @@ html(lang="en")
                   include views/page-messages.pug
 
               if component.type == "circles"
-                .with-sidebar.whitespace-normal
+                .with-sidebar.whitespace-normal.jsMobileContentSidebarControl
                   hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles")
                   hubl-reactivity(bind-user nested-field="circles" target-src="store://user")
                   hubl-reactivity(data-src=`${component.endpoints.get}joinable/` target-src=`${component.endpoints.get}`)
@@ -141,7 +141,7 @@ html(lang="en")
                   include views/page-polls.pug
 
               if component.type == "projects"
-                .with-sidebar.whitespace-normal
+                .with-sidebar.whitespace-normal.jsMobileContentSidebarControl
                   hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects")
                   hubl-reactivity(bind-user nested-field="projects" target-src="store://user")
                   hubl-reactivity(data-src=`${component.endpoints.post}joinable/` target-src=`${component.endpoints.get}`)

src/scripts/navigate-event.js

@@ -35,9 +35,9 @@ function openRightMenu() {
   );
 }
 
-const control = document.querySelector('.jsMobileSidebarControl');
+const adminControl = document.querySelector('.jsMobileSidebarAdminControl');
-const buttons = control.querySelectorAll('.jsMobileRightMenuButton');
+const buttons = adminControl.querySelectorAll('.jsMobileRightMenuButton');
-const rightMenu = control.querySelector('.jsRightMenu');
+const rightMenu = adminControl.querySelector('.jsRightMenu');
 
 Array.from(buttons).forEach(button => 
   button.addEventListener("click", () => {
@@ -54,6 +54,30 @@ Array.from(buttons).forEach(button =>
   })
 )
 
+const contentControls = Array.from(document.querySelectorAll('.jsMobileContentSidebarControl'));
+
+contentControls.forEach(
+  contentControl => {
+    const contentSidebar = contentControl.querySelector('.jsRightMenu');
+    const contentButtons = contentControl.querySelectorAll('.jsMobileRightMenuButton');
+    
+    Array.from(contentButtons).forEach(contentButton =>
+      contentButton.addEventListener('click', () => {
+        if (contentButton.classList.contains('icon-close')) {
+          contentButton.classList.remove('icon-close');
+          contentButton.classList.add('icon-options-vertical');
+          totosidebar.setAttribute('hidden', '');
+        }
+        else {
+          contentButton.classList.remove('icon-options-vertical');
+          contentButton.classList.add('icon-close');
+          totosidebar.removeAttribute('hidden');
+        };
+      })  
+    )
+  }
+);
+
 
 
 

src/styles/content/_index.scss

@@ -55,7 +55,7 @@ main {
         vertical-align: middle;
       }
 
-      /*>solid-route {
+      >solid-route {
 
         &[active]>li {
           background-color: var(--color-heading);
@@ -64,7 +64,7 @@ main {
         &:hover:not([active])>li {
           background: #E4E4E4;
         }
-      }*/
+      }
     }
 
     /* Styles use with JS to open/close the sidebar */
@@ -76,6 +76,7 @@ main {
         top: 101px;
         right: 3px;
         height: auto;
+        z-index: 2999;
         box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14);
       }
 

src/views/page-admin.pug

@@ -1,4 +1,4 @@
-.with-sidebar.jsMobileSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
+.with-sidebar.jsMobileSidebarAdminControl.whitespace-normal.bg-color-white.only-on-admin(hidden)
   .scrollbar-content.views-container.sidebar-is-closed
     for component of components
       if component.route

src/views/partials/circle/page-circle-chat.pug

@@ -1,13 +1,16 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-  solid-display.text-xxlarge.text-letter-spacing-large(
+  div.segment.full.sm-three-quarter
-    bind-resources
+    solid-display.text-xxlarge.text-letter-spacing-large(
-    fields='name, dash, subtitle'
+      bind-resources
+      fields='name, dash, subtitle'
 
-    value-dash=' - '
+      value-dash=' - '
 
-    class-name='text-color-heading text-bold'
+      class-name='text-color-heading text-bold'
-    class-dash='text-color-heading text-bold'          
+      class-dash='text-color-heading text-bold'          
-  )
+    )
+  div.segment.lg-hidden.sm-quarter.text-right
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 .chat-view.segment.full.whitespace-normal
   solid-xmpp-chat(

src/views/partials/circle/page-circle-edit.pug

@@ -1,6 +1,6 @@
 solid-ac-checker(permission='acl:Read', bind-resources)
   div.segment.full.padding-large.border-bottom.border-color-grey
-    div.segment.half.sm-full
+    div.segment.half.sm-three-quarter
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='name, dash, subtitle'
@@ -12,6 +12,8 @@ solid-ac-checker(permission='acl:Read', bind-resources)
       )
     div.segment.half.sm-hidden.text-right
       solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink')
+    div.segment.lg-hidden.sm-quarter.text-right
+        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.whitespace-normal
 

src/views/partials/circle/page-circle-profile.pug

@@ -9,15 +9,18 @@ div(
 )
   solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
     div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-      solid-display.text-xxlarge.text-letter-spacing-large(
+      div.segment.full.sm-three-quarter
-        bind-resources
+        solid-display.text-xxlarge.text-letter-spacing-large(
-        fields='name, dash, subtitle'
+          bind-resources
+          fields='name, dash, subtitle'
 
-        value-dash=' - '
+          value-dash=' - '
 
-        class-name='text-color-heading text-bold'
+          class-name='text-color-heading text-bold'
-        class-dash='text-color-heading text-bold'          
+          class-dash='text-color-heading text-bold'          
-      )
+        )
+      div.segment.lg-hidden.sm-quarter.text-right
+        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
   div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div.loader(id=`loader-${component.route}-profile-1`)

src/views/partials/project/page-project-chat.pug

@@ -1,17 +1,20 @@
 div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-  solid-display.text-xxlarge.text-letter-spacing-large(
+  div.segment.full.sm-three-quarter
-    bind-resources
+    solid-display.text-xxlarge.text-letter-spacing-large(
-    fields='const-title1, number, customer.name, dash, name'
+      bind-resources
+      fields='const-title1, number, customer.name, dash, name'
 
-    class-const-title1='text-color-heading text-bold text-uppercase'
+      class-const-title1='text-color-heading text-bold text-uppercase'
-    class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+      class-number='text-color-heading text-bold text-uppercase word-spacing-right'
-    class-customer.name='text-color-heading text-bold text-uppercase'
+      class-customer.name='text-color-heading text-bold text-uppercase'
-    class-dash='text-color-heading text-bold text-xlarge'
+      class-dash='text-color-heading text-bold text-xlarge'
-    class-name=''
+      class-name=''
 
-    value-const-title1='N°'
+      value-const-title1='N°'
-    value-dash=' - '
+      value-dash=' - '
-  )
+    )
+  div.segment.lg-hidden.sm-quarter.text-right
+    div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 .chat-view.segment.full.whitespace-normal
   solid-xmpp-chat(

src/views/partials/project/page-project-edit.pug

@@ -1,6 +1,6 @@
 solid-ac-checker(permission='acl:Read', bind-resources)
   div.segment.full.padding-large.border-bottom.border-color-grey
-    div.segment.half.sm-full
+    div.segment.half.sm-three-quarter
       solid-display.text-xxlarge.text-letter-spacing-large(
         bind-resources
         fields='const-title1, number, customer.name, dash, name'
@@ -16,6 +16,8 @@ solid-ac-checker(permission='acl:Read', bind-resources)
       )
     div.segment.half.sm-hidden.text-right
       solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink')
+    div.segment.lg-hidden.sm-quarter.text-right
+      div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
 div.segment.full.padding-large.whitespace-normal
 

src/views/partials/project/page-project-profile.pug

@@ -9,19 +9,22 @@ div(
 )
   solid-ac-checker.segment.block(permission='acl:Read', bind-resources)
     div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
-      solid-display.text-xxlarge.text-letter-spacing-large(
+      div.segment.full.sm-three-quarter
-        bind-resources
+        solid-display.text-xxlarge.text-letter-spacing-large(
-        fields='const-title1, number, customer.name, dash, name'
+          bind-resources
+          fields='const-title1, number, customer.name, dash, name'
 
-        class-const-title1='text-color-heading text-bold text-uppercase'
+          class-const-title1='text-color-heading text-bold text-uppercase'
-        class-number='text-color-heading text-bold text-uppercase word-spacing-right'
+          class-number='text-color-heading text-bold text-uppercase word-spacing-right'
-        class-customer.name='text-color-heading text-bold text-uppercase'
+          class-customer.name='text-color-heading text-bold text-uppercase'
-        class-dash='text-color-heading text-bold text-xlarge'
+          class-dash='text-color-heading text-bold text-xlarge'
-        class-name=''
+          class-name=''
 
-        value-const-title1='N°'
+          value-const-title1='N°'
-        value-dash=' - '
+          value-dash=' - '
-      )
+        )
+      div.segment.lg-hidden.sm-quarter.text-right
+        div.jsMobileRightMenuButton.icon.icon-close.icon-heading
 
   div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge
     div.loader(id=`loader-${component.route}-profile`)