refactor dialog for subdef creation and new user

resources/www/_shared/styles/_main-menu.scss

@@ -10,6 +10,7 @@ $mainMenuLinkHoverColor: #000000 !default;
 $mainMenuMarginBottom: 0 !default;
 $mainMenuBottomBorder: none !default;
 
+
 #mainMenu {
   height: $mainMenuHeight;
   line-height: $mainMenuLineHeight;
@@ -19,6 +20,20 @@ $mainMenuBottomBorder: none !default;
   margin-bottom: $mainMenuMarginBottom;
   z-index: 100;
   box-sizing: border-box;
+  .arrow-up {
+    display: none;
+    width: 0;
+    height: 0;
+    border-left: 6px solid transparent;
+    border-right: 6px solid transparent;
+    border-bottom: 9px solid #d8d8d8;
+  }
+  .mobilemenu {
+    display: none;
+  }
+  .desktopmenu {
+    display: inline-block;
+  }
   .show-menu {
     display: none;
     i {
@@ -26,6 +41,9 @@ $mainMenuBottomBorder: none !default;
       vertical-align: middle;
       color: $mainMenuLinkActiveColor;
     }
+    img {
+      margin-top: 5px;
+    }
   }
   ol {
     display: block;
@@ -33,9 +51,8 @@ $mainMenuBottomBorder: none !default;
     padding: 0;
     list-style: none outside none;
   }
-  #custom-link-container {
+  #nav_notification_container {
     display: inline-block;
-    margin-left: 10px;
   }
   #mainLogo {
     margin:0 10px;
@@ -110,34 +127,92 @@ $mainMenuBottomBorder: none !default;
 }
 
 @media screen and (max-width: 760px) {
+  .mobilemenu {
+    display: block;
+  }
   #mainMenu {
     .show-menu {
-      display: block;
+      display: inline-block;
+      cursor: pointer;
     }
-    #nav_menu {
+    .desktopmenu {
       display: none;
+    }
+    #nav_menu_container, #nav_customlink_container, #nav_account_container {
+      position: absolute;
+      top: 35px;
+      width: 172px;
       z-index: 1000;
-      ol {
-        position: static;
-      }
-      li.menu-bar-item {
-        width: 100%;
-        clear: both;
-        background: $mainMenuBackgroundColor;
-        border-bottom: 1px solid $mainMenuLinkActiveColor;
+      .nav_menu {
         z-index: 1000;
-      }
-      li.menu-bar-item a {
+        position: absolute;
+        border-radius: 5px;
+        background-color: #d8d8d8;
         width: 100%;
-        > span {
-          text-align: center;
-          font-size: 14px;
-          font-weight: bold;
-          &.selected {
-            border-top: none !important;
+        .bullet-type {
+          padding: 0;
+        }
+        .bullet-type:before {
+          content: "• ";
+        }
+        li.menu-bar-item {
+          left: 10px;
+          width: 151px;
+          clear: both;
+          border-bottom: 1px solid #b7b7b7;
+          z-index: 1000;
+        }
+        li.menu-bar-item a {
+          width: 100%;
+          > img {
+            float: left;
+            margin-top: 11px;
+            margin-right: 11px;
+            display: block;
           }
+          > span {
+            text-align: left;
+            font-size: 14px;
+            font-family: Roboto;
+            font-weight: 500;
+            font-style: normal;
+            font-stretch: normal;
+            letter-spacing: normal;
+            color: #4a4a4a;
+            &.selected {
+              border-top: 3px solid transparent;
+            }
+          }
+        }
+        li.menu-bar-item:last-child {
+          border-bottom: none;
         }
       }
     }
+    #nav_customlink_container {
+      left: 10px;
+      .arrow-up {
+        margin-left: 82px;
+        display: block;
+      }
+    }
+    #nav_menu_container {
+      left: 10px;
+      .arrow-up {
+        margin-left: 51px;
+        display: block;
+      }
+    }
+    #nav_account_container {
+      right: 10px;
+      .arrow-up {
+        margin-left: 147px;
+        display: block;
+      }
+    }
+    #nav_notification_container {
+      float: right;
+      margin-right: 50px;
+    }
   }
 }

templates/web/common/menubar.html.twig

@@ -7,179 +7,261 @@
               <img src="/assets/common/images/logo.png" alt="" id="mainLogo">
             </span>
         </li>
-          <li class="show-menu" id="toggle-menu">
-              <i class="fa fa-bars"></i>
+          <li class="show-menu" id="toggle-menu-main">
+              <img src="/assets/common/images/icons/menu-burger.png"/>
           </li>
-          <ol id="nav_menu">
-              {% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %}
-                  <li class="menu-bar-item">
-                      <a target="_blank" href="{{ path('prod') }}">
-                <span class="{% if module is defined and module == "prod" %}selected{% endif %}">
-                  {{ 'admin::monitor: production' | trans }}
-                </span>
-                      </a>
-                  </li>
-
-                  {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
+          <div id="nav_menu_container" class="desktopmenu">
+              <div class="arrow-up"></div>
+              <ol class="nav_menu">
+                  {% if module is defined and module != "lightbox" and app.getAuthenticator().isAuthenticated() %}
                       <li class="menu-bar-item">
-                          <a target="_blank" href="{{ path('thesaurus') }}">
-              <span class="{% if module is defined and module == "thesaurus" %}selected{% endif %}">
-              {{ 'admin::monitor: module thesaurus' | trans }}
-              </span>
+                          <a target="_blank" href="{{ path('prod') }}">
+                              <img src="/assets/common/images/icons/menu-prod.png" class="mobilemenu"/>
+                              <span class="{% if module is defined and module == "prod" %}selected{% endif %}">
+                          {{ 'admin::monitor: production' | trans }}
+                        </span>
                           </a>
                       </li>
-                  {% endif %}
 
-
-                  {# MODULE #}
-                  {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
-                      <li class="menu-bar-item">
-                          <a target="_blank" href="{{ path('admin') }}">
-              <span class="{% if module is defined and module == "admin" %}selected{% endif %}">
-                {{ 'admin::monitor: module admin' | trans }}
-              </span>
-                          </a>
-                      </li>
-                  {% endif %}
-
-                  {# MODULE #}
-                  {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
-                      <li class="menu-bar-item">
-                          <a target="_blank" href="{{ path('report_dashboard') }}">
-              <span class="{% if module is defined and module == "report" %}selected{% endif %}">
-                {{ 'admin::monitor: module report' | trans }}
-              </span>
-                          </a>
-                      </li>
-                  {% endif %}
-
-                  {# MODULE #}
-                  <li class="menu-bar-item">
-                      <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
-              <span>
-              {{ 'admin::monitor: module validation' | trans }}
-              </span>
-                      </a>
-                  </li>
-
-                  {# MODULE #}
-                  {% if module is defined and module == "prod" %}
-                      {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
+                      {% if app['browser'].isNewGeneration and app['conf'].get(['registry', 'modules', 'thesaurus']) == true and app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('thesaurus') %}
                           <li class="menu-bar-item">
-                              {% set link = path('upload_html5_form') %}
-
-                              {% if not app['browser'].supportFileAPI() %}
-                                  {% set link = path('upload_flash_form') %}
-                              {% endif %}
-
-                              <a href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}">
-                <span>
-                    {{ 'admin::monitor: module upload' | trans }}
-                </span>
+                              <a target="_blank" href="{{ path('thesaurus') }}">
+                                  <img src="/assets/common/images/icons/menu-thesaurus.png" class="mobilemenu"/>
+                                  <span class="{% if module is defined and module == "thesaurus" %}selected{% endif %}">
+                                  {{ 'admin::monitor: module thesaurus' | trans }}
+                                  </span>
                               </a>
                           </li>
                       {% endif %}
-                  {% endif %}
 
-                  {# MODULE #}
-                  {% if module == "prod" %}
+
+                      {# MODULE #}
+                      {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('admin') %}
+                          <li class="menu-bar-item">
+                              <a target="_blank" href="{{ path('admin') }}">
+                                  <img src="/assets/common/images/icons/menu-admin.png" class="mobilemenu"/>
+                                  <span class="{% if module is defined and module == "admin" %}selected{% endif %}">
+                                    {{ 'admin::monitor: module admin' | trans }}
+                                  </span>
+                              </a>
+                          </li>
+                      {% endif %}
+
+                      {# MODULE #}
+                      {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('report') %}
+                          <li class="menu-bar-item">
+                              <a target="_blank" href="{{ path('report_dashboard') }}">
+                                  <img src="/assets/common/images/icons/menu-report.png" class="mobilemenu"/>
+                                  <span class="{% if module is defined and module == "report" %}selected{% endif %}">
+                                    {{ 'admin::monitor: module report' | trans }}
+                                  </span>
+                              </a>
+                          </li>
+                      {% endif %}
+
+                      {# MODULE #}
                       <li class="menu-bar-item">
-                          <a href="#" class="state-navigation" data-state="publication">
-              <span>
-                {{ 'Publications' | trans }}
-              </span>
+                          <a id="validation_link" target="_blank" href="{{ path('lightbox') }}">
+                              <img src="/assets/common/images/icons/menu-lightbox.png" class="mobilemenu"/>
+                              <span>
+                              {{ 'admin::monitor: module validation' | trans }}
+                              </span>
                           </a>
                       </li>
+
+                      {# MODULE #}
+                      {% if module is defined and module == "prod" %}
+                          {% if app.getAclForUser(app.getAuthenticatedUser()).has_access_to_module('upload') %}
+                              <li class="menu-bar-item">
+                                  {% set link = path('upload_html5_form') %}
+
+                                  {% if not app['browser'].supportFileAPI() %}
+                                      {% set link = path('upload_flash_form') %}
+                                  {% endif %}
+
+                                  <a href="{{ link }}" class="uploader-open-action" title="{{ 'Upload' | trans }}">
+                                      <img src="/assets/common/images/icons/menu-upload.png" class="mobilemenu"/>
+                                      <span>
+                                        {{ 'admin::monitor: module upload' | trans }}
+                                    </span>
+                                  </a>
+                              </li>
+                          {% endif %}
+                      {% endif %}
+
+                      {# MODULE #}
+                      {% if module == "prod" %}
+                          <li class="menu-bar-item">
+                              <a href="#" class="state-navigation" data-state="publication">
+                                  <img src="/assets/common/images/icons/menu-publication.png" class="mobilemenu"/>
+                                  <span>
+                                    {{ 'Publications' | trans }}
+                                  </span>
+                              </a>
+                          </li>
+                      {% endif %}
+
+                      {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
+                          <li class="menu-bar-item">
+                              <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
+                              <span>
+                                {{ 'Commandes' | trans }}
+                              </span>
+                              </a>
+                          </li>
+                      {% endif %}
+
                   {% endif %}
-
-                  {% if module is defined and module == "prod" and app.getAclForUser(app.getAuthenticatedUser()).has_right(constant('\\ACL::ORDER_MASTER')) %}
-                      <li class="menu-bar-item">
-                          <a href="#" class="order-open-action" title="{{ 'Orders manager' | trans }}">
-              <span>
-                {{ 'Commandes' | trans }}
-              </span>
-                          </a>
-                      </li>
-                  {% endif %}
-
-              {% endif %}
-          </ol>
-          <ol id="custom-link-container"></ol>
-      </ol>
-
-    </div>
-    <div class="PNB right" style="left:auto;overflow:hidden;">
-      <ol>
-
-    {% if app.getAuthenticator().isAuthenticated()  and module == "prod" %}
-        <li id="notification_trigger">
-          <a href="#" style="font-weight:bold;text-decoration:none;">
+              </ol>
+          </div>
+          <li class="show-menu" id="toggle-menu-link">
+              <img src="/assets/common/images/icons/menu-web-site.png"/>
+          </li>
+          <li class="show-menu" id="toggle-menu-account" style="float: right;margin-right: 16px;">
+              <img src="/assets/common/images/icons/menu-user.png"/>
+          </li>
+          <div id="nav_customlink_container" class="desktopmenu">
+              <div class="arrow-up"></div>
+              <ol class="nav_menu"></ol>
+          </div>
+          <div id="nav_notification_container">
+              {% if app.getAuthenticator().isAuthenticated()  and module == "prod" %}
+                  <li id="notification_trigger">
+                      <a href="#" style="font-weight:bold;text-decoration:none;">
             <span>
               <button class="counter btn btn-danger" style="visibility:{% if app['events-manager'].get_unread_notifications_number > 0 %}visible{% else %}hidden{% endif %};">
                   {% if app['events-manager'].get_unread_notifications_number > 0 %}
-                    {{app['events-manager'].get_unread_notifications_number}}
+                      {{ app['events-manager'].get_unread_notifications_number }}
                   {% endif %}
               </button>
-              {{ 'Notifications' | trans }}
+                {{ 'Notifications' | trans }}
             </span>
-          </a>
-        </li>
-    {% endif %}
-        <li class="user">
-          {% if app.getAuthenticator().isAuthenticated() %}
-            {% if app.getAuthenticatedUser().isGuest %}
-              <span>
+                      </a>
+                  </li>
+              {% endif %}
+          </div>
+      </ol>
+
+    </div>
+
+    <div class="PNB right desktopmenu" style="left:auto;overflow:hidden;">
+        <ol>
+            <li class="user">
+                {% if app.getAuthenticator().isAuthenticated() %}
+                    {% if app.getAuthenticatedUser().isGuest %}
+                        <span>
                 {{ 'Guest' | trans }}
               </span>
-            {% else %}
-              <a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
+                    {% else %}
+                        <a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
                 <span>
                   {{ app.getAuthenticatedUser().getDisplayName() }}
                 </span>
-              </a>
-            {% endif %}
-          {% endif %}
-        </li>
-        <li>
-          <a target="_blank" href="https://docs.phraseanet.com/4.0/">
+                        </a>
+                    {% endif %}
+                {% endif %}
+            </li>
+            <li>
+                <a target="_blank" href="https://docs.phraseanet.com/4.0/">
             <span>
               {{ 'phraseanet:: aide' | trans }}
                 <span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
                       id="help-trigger"> <i class="fa fa-caret-down" aria-hidden="true"></i></span>
             </span>
-          </a>
-          <table cellspacing="0" cellpadding="0" style="display:none;" class="contextMenu helpcontextmenu">
-              <tbody>
-                  <tr>
-                      <td>
-                          <div class="context-menu context-menu-theme-vista">
-                          {% if module is defined and module == "prod" %}
-                              <div title="" class="context-menu-item menu3-custom-item">
-                                  <div style="" class="context-menu-item-inner shortcuts-trigger">
-                                          {{ 'phraseanet:: raccourcis clavier' | trans }}
-                                  </div>
-                              </div>
-                          {% endif %}
-                              <div title="" class="context-menu-item menu3-custom-item">
-                                  <div style="" class="context-menu-item-inner infoDialog"
-                                       infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'>  &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</div>
-                              </div>
-                          </div>
-                      </td>
-                  </tr>
-              </tbody>
-          </table>
-        </li>
-        <li>
-        {% if app.getAuthenticator().isAuthenticated() %}
-          <a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}" target="_self">
+                </a>
+                <table cellspacing="0" cellpadding="0" style="display:none;" class="contextMenu helpcontextmenu">
+                    <tbody>
+                    <tr>
+                        <td>
+                            <div class="context-menu context-menu-theme-vista">
+                                {% if module is defined and module == "prod" %}
+                                    <div title="" class="context-menu-item menu3-custom-item">
+                                        <div style="" class="context-menu-item-inner shortcuts-trigger">
+                                            {{ 'phraseanet:: raccourcis clavier' | trans }}
+                                        </div>
+                                    </div>
+                                {% endif %}
+                                <div title="" class="context-menu-item menu3-custom-item">
+                                    <div style="" class="context-menu-item-inner infoDialog"
+                                         infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'>  &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</div>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                    </tbody>
+                </table>
+            </li>
+            <li>
+                {% if app.getAuthenticator().isAuthenticated() %}
+                    <a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}" target="_self">
             <span>
               {{ 'phraseanet:: deconnection' | trans }}
             </span>
-          </a>
-        {% endif %}
-        </li>
-      </ol>
+                    </a>
+                {% endif %}
+            </li>
+        </ol>
+    </div>
+
+    <div class="PNB right mobilemenu" id="nav_account_container" style="left:auto;overflow:hidden;">
+        <div class="arrow-up"></div>
+        <ol class="nav_menu">
+
+            <li class="menu-bar-item">
+                {% if app.getAuthenticator().isAuthenticated() %}
+                    {% if app.getAuthenticatedUser().isGuest %}
+                        <img src="/assets/common/images/icons/menu-name-user.png"/>
+                        <span>
+                {{ 'Guest' | trans }}
+              </span>
+                    {% else %}
+                        <a target="_blank" href="{{ path('account') }}" title="{{ 'login:: Mon compte' | trans }}">
+                            <img src="/assets/common/images/icons/menu-name-user.png"/>
+                            <span>
+                  {{ app.getAuthenticatedUser().getDisplayName() }}
+                </span>
+                        </a>
+                    {% endif %}
+                {% endif %}
+            </li>
+            <li class="menu-bar-item">
+                {% if app.getAuthenticator().isAuthenticated() %}
+                    <a href="{{ path('logout', { 'redirect' : '..' ~ app['request'].getPathInfo() }) }}" target="_self">
+                        <img src="/assets/common/images/icons/menu-logout.png"/>
+                        <span>
+                  {{ 'phraseanet:: deconnection' | trans }}
+                </span>
+                    </a>
+                {% endif %}
+            </li>
+            <li class="menu-bar-item">
+                <a target="_blank" href="https://docs.phraseanet.com/4.0/">
+                    <img src="/assets/common/images/icons/menu-help.png"/>
+                    <span>
+              {{ 'phraseanet:: aide' | trans }}
+                        <span style="display:inline-block;cursor:pointer;padding:0;border:none;padding-right:4px;padding-left:4px;"
+                              id="help-trigger"></span>
+            </span>
+                </a>
+            </li>
+            {% if module is defined and module == "prod" %}
+                <li class="menu-bar-item">
+                    <a href="#">
+                        <img src="/assets/common/images/icons/menu-help.png"/>
+                        <span style="" class="shortcuts-trigger">
+                        {{ 'phraseanet:: raccourcis clavier' | trans }}
+                    </span>
+                    </a>
+                </li>
+            {% endif %}
+            <li class="menu-bar-item">
+                <a href="#">
+                    <img src="/assets/common/images/icons/menu-help.png"/>
+                    <span style="" class="infoDialog"
+                          infos="<div><span style='font-size:18px;'>PHRASEANET</span> {{ app['phraseanet.version'].getName() }} (V{{ app['phraseanet.version'].getNumber() }})</div><div></div><br/><div><a href='http://www.gnu.org/licenses/gpl.html' target='_blank'><img src='http://www.gnu.org/graphics/gplv3-88x31.png' style='vertical-align:middle;'/><span>License GNU GPL v3</span></a></div><br/><div><a href='http://www.phraseanet.com/' target='_blank'>  &copy; Copyright Alchemy 2005-{{ "now"|date("Y") }}</a><p style='margin-top: 10px' ><a href='../../gitlog.txt' target='_blank'>gitlog</a></p></div>">{{ 'phraseanet:: a propos' | trans }}</span>
+                </a>
+            </li>
+        </ol>
     </div>
 </div>
 
@@ -207,10 +289,10 @@
                         styleAttr += linksData.linkColor ? "color: " + linksData.linkColor + ";" : "";
                         styleAttr += linksData.linkBold == true ? "font-weight: bold;" : "";
 
-                        var spanElement = $('<span />').attr('style', styleAttr).html(linksData.linkName);
-                        var links = '<li><a target="_blank" href="' + linksData.linkUrl + '">' +
+                        var spanElement = $('<span />').attr('style', styleAttr).attr('class', 'bullet-type').html(linksData.linkName);
+                        var links = '<li class="menu-bar-item"><a target="_blank" href="' + linksData.linkUrl + '">' +
                             spanElement.prop("outerHTML") + '</a></li>';
-                        $('#mainMenu #custom-link-container').append(links);
+                        $('#mainMenu #nav_customlink_container .nav_menu').append(links);
                     }
                 });
             } else if (key === 'help-menu') {
@@ -228,22 +310,68 @@
                             '<a target="_blank" href="' + linksData.linkUrl + '">' +
                             spanElement.prop("outerHTML") + '</a></div></div>';
                         $('.helpcontextmenu .context-menu-theme-vista').append(links);
+
+                        var spanElementMobile = $('<span />').attr('style', styleAttr).attr('class', 'bullet-type').html(linksData.linkName);
+                        var linksMobile = '<li class="menu-bar-item"><a target="_blank" href="' + linksData.linkUrl + '">' +
+                            spanElementMobile.prop("outerHTML") + '</a></li>';
+                        $('#mainMenu #nav_account_container .nav_menu').append(linksMobile);
                     }
                 });
             }
         }
 
-        $('#toggle-menu').on('click', function (event) {
-            $('#nav_menu').toggle();
+        $('#toggle-menu-main').on('click', function (event) {
+            $('#nav_menu_container').toggle();
+            if ($('#nav_customlink_container').is(":visible")) {
+                $('#nav_customlink_container').hide();
+            }
+            if ($('#nav_account_container').is(":visible")) {
+                $('#nav_account_container').hide();
+            }
         });
 
-        var windowsize = $(window).width();
+        $('#toggle-menu-link').on('click', function (event) {
+            $('#nav_customlink_container').toggle();
+            if ($('#nav_menu_container').is(":visible")) {
+                $('#nav_menu_container').hide();
+            }
+            if ($('#nav_account_container').is(":visible")) {
+                $('#nav_account_container').hide();
+            }
+        });
+
+        $('#toggle-menu-account').on('click', function (event) {
+            $('#nav_account_container').toggle();
+            if ($('#nav_menu_container').is(":visible")) {
+                $('#nav_menu_container').hide();
+            }
+            if ($('#nav_customlink_container').is(":visible")) {
+                $('#nav_customlink_container').hide();
+            }
+        });
+
+
+        var windowSize = $(window).width();
         $(window).resize(function (event) {
-            windowsize = $(window).width();
-            if (windowsize > 760) {
-                if ($('#nav_menu').is(":hidden")) {
-                    $('#nav_menu').show();
+            windowSize = $(window).width();
+            if (windowSize > 760) {
+                if ($('#nav_menu_container').is(":hidden")) {
+                    $('#nav_menu_container').show();
                 }
+                if ($('#nav_customlink_container').is(":hidden")) {
+                    $('#nav_customlink_container').show();
+                }
+                if ($('#nav_account_container').is(":visible")) {
+                    $('#nav_account_container').hide();
+                }
+            } else if (windowSize <= 760) {
+                if ($('#nav_customlink_container').is(":visible")) {
+                    $('#nav_customlink_container').hide();
+                }
+                if ($('#nav_menu_container').is(":visible")) {
+                    $('#nav_menu_container').hide();
+                }
+
             }
         });
     });