Style expanded state of sidebar && mobile view

app/assets/stylesheets/layout/_main_menu.sass

@@ -48,8 +48,6 @@ $toggler-width: 40px
     padding: 0
 
     &.menu_root
-      border-right: $main-menu-border-width solid $main-menu-border-color
-
       // -------------- ALL menu items --------------------------------
       li
         float: none
@@ -145,7 +143,6 @@ $toggler-width: 40px
           &:hover
             text-decoration: none
 
-
   a
     text-decoration: none
     line-height: $main-menu-item-height

app/assets/stylesheets/layout/_top_menu.sass

@@ -187,6 +187,20 @@
     left: 260px
     @include varprop(color, font-color-on-primary)
 
+  #top-menu--project-toggler:not(.show)
+    position: absolute
+    left: -40px
+    width: 40px
+    .navigation-toggler
+      &:before
+        font-size: 12px
+      &:hover
+        background-color: $main-menu-bg-color
+
+#wrapper:not(.hidden-navigation) #top-menu
+  margin-left: $main-menu-width
+  width: calc(100% - #{$main-menu-width})
+
 .top-menu-search
   display: inline-block
   &:not(.-collapsed) > div

app/assets/stylesheets/layout/_top_menu_mobile.sass

@@ -100,7 +100,7 @@
     #projects-menu
       font-size: 15px
     .drop-down
-      max-width: 140px
+      max-width: 180px
       ul
         width: 100vw
         left: -50px
@@ -112,3 +112,13 @@
     .select2-search:before
       right: 44px
 
+  // -------- Override large screen implementation of the sidebar
+  // to get the neccessary width of the top menu ----------------
+  #wrapper:not(.hidden-navigation) #top-menu
+    margin-left: 0
+    width: 100%
+
+  #top-menu #top-menu--project-toggler:not(.show)
+    position: initial
+    left: initial
+    width: initial

frontend/app/init-app.js

@@ -109,8 +109,8 @@ opApp
         $rootScope.DOUBLE_LEFT_CURLY_BRACE = ExpressionService.UNESCAPED_EXPRESSION;
 
         $rootScope.showNavigation =
-            $window.sessionStorage.getItem('openproject:navigation-toggle') !==
-            'collapsed';
+            !($window.sessionStorage.getItem('openproject:navigation-toggle') !==
+            'expanded');
 
         TimezoneService.setupLocale();
         KeyboardShortcutService.activate();

lib/open_project/design.rb

@@ -146,11 +146,11 @@ module OpenProject
       'content-calendar-cell-today-bg-color'                 => "#FFFFDD",
       'content-calendar-inactive-day-font-color'             => "#FFFFFF",
       'content-calendar-inactive-day-bg-color'               => "#4B4B4B",
-      'context-menu-font-color'                              => "$main-menu-font-color",
+      'context-menu-font-color'                              => "$body-font-color",
       'content-box-border'                                   => "1px solid $content-default-border-color",
       'content-box-bg-color'                                 => "#FFFFFF",
       'my-page-edit-box-border-color'                        => "$primary-color-dark",
-      'drop-down-unselected-font-color'                      => "$main-menu-font-color",
+      'drop-down-unselected-font-color'                      => "$body-font-color",
       'drop-down-selected-font-color'                        => "$font-color-on-primary",
       'drop-down-hover-font-color'                           => "$font-color-on-primary-dark",
       'drop-down-selected-bg-color'                          => "$primary-color",

lib/redmine/menu_manager/top_menu_helper.rb

@@ -121,13 +121,13 @@ module Redmine::MenuManager::TopMenuHelper
 
     if side_displayed && show_decoration
       content_tag(:li,
-                  id: 'toggle-project-menu',
                   "ng-class" => "{ 'show': !showNavigation }",
+                  id: 'top-menu--project-toggler',
                   "ng-controller" => 'MainMenuController as mainMenu') do
         link_to '',
                 '',
-                title: l(:show_hide_project_menu),
-                class: 'navigation-toggler icon-hamburger',
+                "ng-class" => "{ 'show icon-hamburger': !showNavigation, 'icon-arrow-left2' : showNavigation }",
+                class: 'navigation-toggler',
                 "ng-click" => 'mainMenu.toggleNavigation()'
       end
     end