Fix .top-bar-section not to wrap the icons-menu

This line-wrap makes the icons-menu overlap the OC selector. The menu's
background is transparent, what makes it look even more broken.

The fix involves refactoring the `.top-bar-section` into using flexbox
instead of this highly coupled CSS and floats. With flexbox it becomes
as easy as telling the browser to space the three sections evenly
filling-up the window, while scaling down the logo if there's not enough
room.

The root cause is that every instance uses a custom logo, which wasn't
the one we used while designing and implementing. This is why using
fixed-sizes in pixels won't work.

app/assets/stylesheets/darkswarm/embedded_shopfront.scss

@@ -5,7 +5,7 @@ $large-menu-height: 4.6875rem;
 $medium-menu-height: 3rem;
 $gutter-width: 0.9375rem;
 
-nav.top-bar ul.left li.powered-by {
+nav.top-bar .powered-by {
   display: none;
 }
 

app/assets/stylesheets/darkswarm/menu.scss

@@ -44,6 +44,13 @@ nav.top-bar {
 
 .top-bar-section {
   border-bottom: 1px solid $light-grey-transparency;
+  display: flex;
+  justify-content: space-between;
+
+  .nav-main-menu,
+  .nav-icons-menu {
+    flex-shrink: 0;
+  }
 
   a.icon {
     &:hover {
@@ -99,21 +106,12 @@ nav.top-bar {
     }
   }
 
-  ul.center {
-    display: inline-block;
-
-    // By default, we center between the left and right uls, but we want to be centered
-    // relative to the whole page. The difference in width between the other uls is 74px,
-    // so we offset by that amount here.
-    margin-left: -74px;
-  }
-
   ul.dropdown {
     border: 1px solid $smoke;
     border-top: none;
   }
 
-  ul.right {
+  .nav-icons-menu {
     > li {
       border-left: 1px solid #ddd;
       padding: 0 14px;
@@ -244,7 +242,7 @@ nav.top-bar {
 
 .top-bar .ofn-logo img {
   height: auto;
-  width: auto;
+  width: 100%;
   max-height: 44px;
   max-width: 250px;
 }
@@ -289,10 +287,6 @@ nav.top-bar {
     .has-dropdown > a {
       padding: 0 ($topbar-height / 8) !important;
     }
-
-    ul.center {
-      margin-left: -24px;
-    }
   }
 }
 

app/views/shared/menu/_large_menu.html.haml

@@ -1,6 +1,6 @@
 %nav.top-bar.show-for-large-up{'data-topbar' => true}
   %section.top-bar-section
-    %ul.left
+    %ul.nav-logo
       %li.ofn-logo
         %a{href: main_app.root_path}
           %img{src: ContentConfig.logo.url}
@@ -10,7 +10,7 @@
           = t 'powered_by'
           %a{href: '/'}
             = t 'title'
-    %ul.center
+    %ul.nav-main-menu
       - [*1..7].each do |menu_number|
         - menu_name = "menu_#{menu_number}"
         - if ContentConfig[menu_name].present?
@@ -18,7 +18,7 @@
             %a{href: t("#{menu_name}_url") }
               %span.nav-primary
                 = t "#{menu_name}_title"
-    %ul.menu.icons.right
+    %ul.nav-icons-menu
       - if OpenFoodNetwork::I18nConfig.selectable_locales.count > 1
         = render 'shared/menu/language_selector'
 

spec/features/consumer/multilingual_spec.rb

@@ -124,8 +124,8 @@ feature 'Multilingual', js: true do
 
         expect(page).to have_content 'SHOPS'
 
-        find('ul.right li.language-switcher').click
-        within 'ul.right li.language-switcher ul.dropdown' do
+        find('.language-switcher').click
+        within '.language-switcher .dropdown' do
           expect(page).to have_link I18n.t('language_name', locale: :en), href: '?locale=en'
           expect(page).to have_link I18n.t('language_name', locale: :es, default: 'Language Name'), href: '?locale=es'