{"action":"opened","issue":{"url":"https://api.github.com/repos/linnovate/mean/issues/1127","labels_url":"https://api.github.com/repos/linnovate/mean/issues/1127/labels{/name}","comments_url":"https://api.github.com/repos/linnovate/mean/issues/1127/comments","events_url":"https://api.github.com/repos/linnovate/mean/issues/1127/events","html_url":"https://github.com/linnovate/mean/issues/1127","id":65091569,"number":1127,"title":"Responsive menu bar","user":{"login":"claustres","id":2647117,"avatar_url":"https://avatars.githubusercontent.com/u/2647117?v=3","gravatar_id":"","url":"https://api.github.com/users/claustres","html_url":"https://github.com/claustres","followers_url":"https://api.github.com/users/claustres/followers","following_url":"https://api.github.com/users/claustres/following{/other_user}","gists_url":"https://api.github.com/users/claustres/gists{/gist_id}","starred_url":"https://api.github.com/users/claustres/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/claustres/subscriptions","organizations_url":"https://api.github.com/users/claustres/orgs","repos_url":"https://api.github.com/users/claustres/repos","events_url":"https://api.github.com/users/claustres/events{/privacy}","received_events_url":"https://api.github.com/users/claustres/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-03-29T20:13:25Z","updated_at":"2015-03-29T20:13:25Z","closed_at":null,"body":"I updated the default view and header to have :\r\n- a more responsive menu bar that collapses on small screens\r\n- an icon with or without title entry in the menu bar (based on bootstrap glyphicon short name)\r\n- an option in the profile menu to show/hide the admin panel (useful when you have full width content that is hidden by the panel)\r\n\r\n![capture-3](https://cloud.githubusercontent.com/assets/2647117/6887457/9cd790b0-d660-11e4-9067-0c04da45bc22.png)\r\n![capture-2](https://cloud.githubusercontent.com/assets/2647117/6887456/9cd38b0a-d660-11e4-8b52-b6e545f75c08.png)\r\n![capture-4](https://cloud.githubusercontent.com/assets/2647117/6887458/9cda81f8-d660-11e4-85b5-13fbed538af7.png)\r\n\r\n**packages/system/public/views/header.html**\r\n```html\r\n<div data-ng-controller=\"HeaderController\">\r\n    <!-- Brand and toggle get grouped for better mobile display -->\r\n    <div class=\"navbar-header\">\r\n      <button type=\"button\" class=\"navbar-toggle\" ng-init=\"navbarCollapsed = true\" ng-click=\"navbarCollapsed = !navbarCollapsed\">\r\n        <span class=\"sr-only\">Toggle navigation</span>\r\n        <span class=\"icon-bar\"></span>\r\n        <span class=\"icon-bar\"></span>\r\n        <span class=\"icon-bar\"></span>\r\n      </button>\r\n      <a class=\"navbar-brand\" ui-sref=\"home\" mean-token=\"'site-title'\">MEAN</sup></a>\r\n    </div>\r\n\r\n    <!-- Collect the nav links, forms, and other content for toggling -->\r\n    <div class=\"collapse navbar-collapse\" ng-class=\"!navbarCollapsed && 'in'\">\r\n      <ul class=\"navbar-nav nav\">\r\n        <li data-ng-repeat=\"item in menus.main\" ui-route=\"/{{item.link}}\" ng-class=\"{active: $uiRoute}\">\r\n          <a ng-if=\"item.title\" mean-token=\"item.link\" ui-sref='{{item.link}}'><span ng-if=\"item.icon\" ng-class=\"'glyphicon glyphicon-' + item.icon\"/>&nbsp;{{item.title}}</a>\r\n        </li>\r\n      </ul>\r\n      <div class=\"account\">\r\n        <!--div class=\"text-edit\">\r\n          <div class=\"pull-right\" data-ng-show=\"global.authenticated\" mean-token-editable></div>\r\n          <div class=\"pull-right\" data-ng-show=\"global.authenticated\" mean-translate></div>\r\n        </div-->\r\n        <ul class=\"navbar-nav nav navbar-right\" data-ng-hide=\"global.authenticated\">\r\n          <li><a ui-sref='auth.register'>Register</a>\r\n          </li>\r\n          <li class=\"divider-vertical\"></li>\r\n          <li><a ui-sref='auth.login'>Log In</a>\r\n          </li>\r\n        </ul>\r\n        <ul class=\"navbar-nav nav navbar-right\" data-ng-show=\"global.authenticated\">\r\n          <li class=\"dropdown\">\r\n            <a href=\"#\" class=\"dropdown-toggle\" data-toggle=\"dropdown\">\r\n              {{global.user.name}} <b class=\"caret\"></b>\r\n            </a>\r\n            <ul class=\"dropdown-menu\">\r\n              <li data-ng-show=\"global.isAdmin\"><a href=\"#\" ng-click=\"global.adminPanelVisible = !global.adminPanelVisible\">Admin Panel</a>\r\n              </li>\r\n              <li><a href=\"/logout\">Log Out</a>\r\n              </li>\r\n            </ul>\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </div>\r\n</div>\r\n```\r\n\r\n**packages/system/server/views/layouts/default.html**\r\n```html\r\n<!doctype html>\r\n<html lang=\"en\" xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:fb=\"https://www.facebook.com/2008/fbml\" itemscope=\"itemscope\" itemtype=\"http://schema.org/Product\">\r\n{% include '../includes/head.html' %}\r\n\r\n<body data-ng-controller=\"ThemeController\" ng-cloak class=\"ng-cloak\" ng-class=\"state\">\r\n    <div class=\"navbar navbar-inverse navbar-fixed-top\" data-ng-include=\"'/system/views/header.html'\" data-role=\"navigation\"></div>\r\n    {% if adminEnabled %}\r\n    <section class=\"admin-menu\" ng-if=\"global.adminPanelVisible\">\r\n        <div data-ng-include=\"'/mean-admin/views/index.html'\"></div>\r\n    </section>\r\n    {% endif %}\r\n    <section class=\"content\">\r\n        <section class=\"container\">\r\n            {% block content %}{% endblock %}\r\n        </section>\r\n    </section>\r\n    {% include '../includes/foot.html' %}\r\n</body>\r\n\r\n</html>\r\n```\r\n\r\n**packages/articles/app.js**\r\n```javascript\r\nArticles.menus.add({\r\n    'roles': ['authenticated'],\r\n    'title': 'Articles',\r\n    'link': 'all articles',\r\n    'icon': 'list'\r\n  });\r\n```\r\n\r\n\r\n"}}