Take care that the main menu resizer toggles when the menu is collapsed/expanded

Clean-up sass code

Avoid that the type selector in the WP from is scrolled two far when being activated. Currently, it is scrolled twice (one time when activating it and once again when selecting an item). Thus the dropdown overlaps the actual input

Move logo to the left side

Make naming consistent for MainMenuToggleComponent and add a component test

Let menu toggle button scroll with the rest of the page

Move modules menu to the left and show it on mobile

Author: HDinger

app/components/_index.sass

@@ -6,7 +6,7 @@
 @import "open_project/common/attribute_help_text_component"
 @import "open_project/common/attribute_label_component"
 @import "open_project/common/submenu_component"
-@import "open_project/common/main_menu_toggler_component"
+@import "open_project/common/main_menu_toggle_component"
 @import "projects/row_component"
 @import "projects/phases/hover_card_component"
 @import "shares/invite_user_form_component"

app/components/open_project/common/main_menu_toggler_component.rb renamed to app/components/open_project/common/main_menu_toggle_component.rb

@@ -30,47 +30,49 @@
 #
 module OpenProject
   module Common
-    class MainMenuTogglerComponent < ApplicationComponent
-      def initialize(opened:)
-        super
+    class MainMenuToggleComponent < ApplicationComponent
+      def initialize(expanded:)
+        super()
 
-        @opened = opened
+        @expanded = expanded
       end
 
+      def call
+        render(Primer::Beta::IconButton.new(icon:,
+                                            id:,
+                                            aria: { label: aria_label },
+                                            scheme:,
+                                            size:,
+                                            data:))
+      end
+
+      private
+
       def icon
-        @opened ? "sidebar-expand" : :"sidebar-collapse"
+        @expanded ? "sidebar-expand" : :"sidebar-collapse"
       end
 
       def id
-        "menu-toggler--#{@opened ? 'opener' : 'closer'}"
+        "menu-toggle--#{@expanded ? 'collapse-button' : 'expand-button'}"
       end
 
       def aria_label
-        @opened ? I18n.t("js.label_hide_project_menu") : I18n.t("js.label_expand_project_menu")
+        @expanded ? I18n.t("js.label_hide_project_menu") : I18n.t("js.label_expand_project_menu")
       end
 
       def scheme
         :invisible
       end
 
       def size
-        @opened ? :medium : :small
+        @expanded ? :medium : :small
       end
 
       def data
         {
-          action: "click->menus--main-toggler#toggleNavigation"
+          action: "click->menus--main-toggle#toggleNavigation"
         }
       end
-
-      def call
-        render(Primer::Beta::IconButton.new(icon:,
-                                            id:,
-                                            aria: { label: aria_label },
-                                            scheme:,
-                                            size:,
-                                            data:))
-      end
     end
   end
 end

app/components/open_project/common/main_menu_toggler_component.sass renamed to app/components/open_project/common/main_menu_toggle_component.sass

@@ -26,23 +26,24 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-#menu-toggler--closer
+#menu-toggle--expand-button
   position: absolute
-  top: 14px
   left: 11px
+  z-index: 1
 
-#menu-toggler--opener
+#menu-toggle--collapse-button
   margin-right: 5px
 
   .Button-visual
     color: var(--main-menu-font-color)
 
 #wrapper
   .hidden-navigation
-    // TODO: Add angular breadcrumb selector once it exists
-    .PageHeader-contextBar
+    // Push the breadcrumb to the right when the sidebar is collapsed
+    .PageHeader-contextBar,
+    .op-breadcrumbs
       margin-left: 30px
 
   &:not(.hidden-navigation)
-    #menu-toggler--closer
+    #menu-toggle--expand-button
       display: none

app/components/open_project/common/submenu_component.sass

@@ -5,8 +5,7 @@
 
   &--search
     position: sticky
-    // Header item + 10px padding + 77px project selector
-    top: calc(var(--main-menu-item-height) + 10px + 77px)
+    top: 0
     z-index: 1
     background: var(--main-menu-bg-color)
     padding: 12px var(--main-menu-x-spacing)

app/views/layouts/base.html.erb

@@ -30,9 +30,9 @@ See COPYRIGHT and LICENSE files for more details.
 <html xmlns="http://www.w3.org/1999/xhtml"
       lang="<%= I18n.locale.to_s %>"
       xml:lang="<%= I18n.locale.to_s %>"
-      class="<%= 'in_modal' unless show_decoration %>">
+      class="<%= "in_modal" unless show_decoration %>">
 <head>
-  <%= render partial: 'layouts/common_head' %>
+  <%= render partial: "layouts/common_head" %>
   <!-- project specific tags -->
   <%= call_hook :view_layouts_base_html_head %>
   <!-- page specific tags -->
@@ -43,13 +43,13 @@ See COPYRIGHT and LICENSE files for more details.
 </head>
 <%= content_tag :body,
                 class: "#{body_css_classes}  __overflowing_element_container __overflowing_body",
-                data: body_data_attributes(local_assigns) do  %>
-<%= render partial: 'warning_bar/warning_bar' %>
+                data: body_data_attributes(local_assigns) do %>
+<%= render partial: "warning_bar/warning_bar" %>
 <noscript>
   <div class="top-shelf">
     <p>
       <span>
-        <%= op_icon 'icon3 icon-warning' %>
+        <%= op_icon "icon3 icon-warning" %>
         <strong><%= t(:noscript_heading) %></strong>
       </span>
       <%= t(:noscript_description) %>
@@ -69,15 +69,15 @@ See COPYRIGHT and LICENSE files for more details.
 <% initial_classes = initial_menu_classes(side_displayed, show_decoration) %>
 <div id="wrapper" style="<%= initial_menu_styles(side_displayed) %>" class="<%= initial_classes %>">
   <% if show_decoration %>
-    <header class="op-app-header<%= ' op-app-header_development' if OpenProject::Configuration.development_highlight_enabled? %>">
+    <header class="op-app-header<%= " op-app-header_development" if OpenProject::Configuration.development_highlight_enabled? %>">
       <div class="op-app-header--start">
         <h1 class="hidden-for-sighted">
           <%= t(:label_top_menu) %>
         </h1>
         <a href="" class="hidden-for-sighted skip-navigation-link"
            id="skip-navigation--content"
-           aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
-          <%= I18n.t('js.work_packages.jump_marks.content') %>
+           aria-label="<%= I18n.t("js.work_packages.jump_marks.label_content") %>">
+          <%= I18n.t("js.work_packages.jump_marks.content") %>
         </a>
         <%= render_top_menu_left %>
       </div>
@@ -92,32 +92,36 @@ See COPYRIGHT and LICENSE files for more details.
   <% end %>
   <div id="main"
        class="<%= initial_classes %>"
-       data-controller="menus--main-toggler"
-       data-application-target="dynamic">
+       data-controller="menus--main-toggle">
     <% if (side_displayed && show_decoration) %>
       <div
         id="main-menu"
         class="main-menu"
-        data-controller="menus--main"
-      >
+        data-controller="menus--main">
         <h1 class="hidden-for-sighted"><%= t(:label_main_menu) %></h1>
         <opce-main-menu-resizer></opce-main-menu-resizer>
         <div id="menu-sidebar">
-          <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, mt: 2)) do |flex|
-            flex.with_column(overflow: :hidden, ml: 2) do
-              render_projects_top_menu_node
-            end
-            flex.with_column(text_align: :right, flex: :auto) do
-              render(OpenProject::Common::MainMenuTogglerComponent.new(opened: true))
-            end
-          end %>
+          <div class="main-menu--top-container">
+            <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, pt: 3)) do |flex|
+              flex.with_column(overflow: :hidden, ml: 2) do
+                render_projects_top_menu_node
+              end
+              flex.with_column(text_align: :right, flex: :auto) do
+                render(OpenProject::Common::MainMenuToggleComponent.new(expanded: true))
+              end
+            end %>
 
-          <%= render(Primer::BaseComponent.new(tag: :hr,
-                                               classes: "main-menu--projects-divider",
-                                               role: :presentation,
-                                               aria: {
-                                                 hidden: true
-                                               })) %>
+            <%= render(
+                  Primer::BaseComponent.new(
+                    tag: :hr,
+                    classes: "main-menu--projects-divider",
+                    role: :presentation,
+                    aria: {
+                      hidden: true
+                    }
+                  )
+                ) %>
+          </div>
           <%= main_menu %>
           <%= content_for :main_menu %>
           <%= call_hook :view_layouts_base_main_menu %>
@@ -139,11 +143,11 @@ See COPYRIGHT and LICENSE files for more details.
         <section data-augmented-model-wrapper
                  data-modal-initialize-now="true"
                  data-modal-class-name="onboarding-modal">
-          <%= render partial: '/onboarding/configuration_modal' %>
+          <%= render partial: "/onboarding/configuration_modal" %>
         </section>
       <% end %>
       <%= content_tag :div,
-                      id: 'content',
+                      id: "content",
                       class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}" do %>
         <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
         <% if content_for?(:content_header) %>
@@ -153,7 +157,7 @@ See COPYRIGHT and LICENSE files for more details.
         <% end %>
 
         <div id="content-body">
-          <%= render(OpenProject::Common::MainMenuTogglerComponent.new(opened: false)) %>
+          <%= render(OpenProject::Common::MainMenuToggleComponent.new(expanded: false)) %>
           <%= content_for :content_body %>
           <% unless local_assigns[:no_layout_yield] %>
             <%= yield %>

frontend/src/app/core/main-menu/main-menu-toggle.service.ts

@@ -49,16 +49,14 @@ export class MainMenuToggleService {
 
   @InjectField() currentProject:CurrentProjectService;
 
-  private global = (window as any);
-
   private htmlNode = document.getElementsByTagName('html')[0];
 
   private mainMenu = jQuery('#main-menu')[0]; // main menu, containing sidebar and resizer
 
   // Notes all changes of the menu size (currently needed in wp-resizer.component.ts)
-  private changeData = new BehaviorSubject<any>({});
-
+  private changeData = new BehaviorSubject<number|undefined>(undefined);
   public changeData$ = this.changeData.asObservable();
+
   private wasHiddenDueToResize = false;
 
   private wasCollapsedByUser = false;
@@ -140,11 +138,13 @@ export class MainMenuToggleService {
 
   public closeMenu():void {
     this.setWidth(0);
+    this.changeData.next(0);
     jQuery('.searchable-menu--search-input').blur();
   }
 
   public openMenu():void {
     this.setWidth(this.defaultWidth);
+    this.changeData.next(this.defaultWidth);
   }
 
   public setWidth(width?:number):void {

frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass

@@ -37,6 +37,10 @@
     .op-breadcrumbs
       margin-left: 20px
 
+    #wrapper .hidden-navigation
+      .op-breadcrumbs
+        margin-left: 45px
+
 [data-name="bim"] .main-menu--children
   overflow-x: hidden !important
 

frontend/src/app/shared/components/breadcrumbs/op-breadcrumbs.component.sass

@@ -1,6 +1,10 @@
 @import "helpers"
 
 .op-breadcrumbs
+  // Match the height of the Primer breadcrumb which itself takes the height of the small action button it can have on mobile
+  height: var(--control-small-size)
+  line-height: var(--control-small-size)
+
   .op-breadcrumbs--items
     margin-left: 0
   .op-breadcrumbs--item

frontend/src/app/shared/components/header-project-select/header-project-select.component.html

@@ -9,21 +9,18 @@
     id="projects-menu"
     accesskey="5"
     aria-haspopup="true"
-    class="op-menu--item op-project-select--trigger-button"
+    class="op-project-select--trigger-button"
     type="button"
     slot="trigger"
     (click)="toggleDropModal()"
     data-test-selector="op-projects-menu"
   >
     <span
-      class="op-menu--item-title">
-      <span
-        class="ellipsis"
-        [textContent]="currentProjectName()"
-        [attr.title]="currentProjectName()">
-      </span>
+      class="ellipsis"
+      [textContent]="currentProjectName()"
+      [attr.title]="currentProjectName()">
     </span>
-    <i class="op-menu--item-dropdown-indicator button--dropdown-indicator"></i>
+    <i class="button--dropdown-indicator"></i>
   </button>
 
   <ng-container slot="body">

frontend/src/app/shared/components/header-project-select/header-project-select.component.sass

@@ -17,10 +17,17 @@
     color: var(--fgColor-muted, var(--color-fg-subtle))
 
   &--trigger-button
-    height: var(--main-menu-item-height)
+    display: flex
+    align-items: center
+    height: var(--control-medium-size)
     color: var(--main-menu-font-color)
+    font-weight: var(--base-text-weight-semibold)
+    padding: 0 8px
     border: 1px solid transparent
-    padding: 0 var(--main-menu-x-spacing-small)
     border-radius: var(--borderRadius-medium)
     background-color: transparent
     width: 100%
+
+    .button--dropdown-indicator
+      &:before
+        margin-left: var(--base-size-8)