fix nav hiccups

SC5 · Aug 23, 2016 · b545011 · b545011
1 parent 9f099f9
commit b545011
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 14 deletions.
diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css
@@ -384,6 +384,7 @@ Styleguide 3.1.1
   }
 
   .sg.sg-side-nav {
+    display: none;
     float: left;
     display: inline-block;
     width: 30%;
@@ -396,7 +397,6 @@ Styleguide 3.1.1
       overflow: scroll;
       transition: opacity .4s cubic-bezier(0.000, 0.995, 0.990, 1.000);
     }
-
     .sg.option {
       text-align: center;
       a {
@@ -660,6 +660,7 @@ Styleguide 3.2.1
   }
 
   .sg-title {
+    min-height: 70px;
     float: left;
     padding-bottom: 20px;
     white-space: nowrap;
@@ -760,7 +761,6 @@ Styleguide 3.2.1
   }
   .sg.side-nav-search .sg.sg-search-field {
     margin-top: calc(var(--header-height)/2 - 18px);
-    margin-top: calc($header-height/2 - 18px);
     box-sizing : border-box;
     float: right;
     @media (--mobile) {
@@ -854,13 +854,18 @@ Styleguide 3.3.1
  */
 
 .sg.sg-top-nav {
+  display: none;
   clear: both;
   background-color: var(--nav-background-color);
   background-color: $nav-background-color;
   z-index: 8000;
   width: 100%;
 }
 
+.sg.sg-nav-visible {
+  display: block;
+}
+
 .sg.sg-top-nav-menu {
   padding: 0 var(--min-content-margin) 0 var(--min-content-margin);
   padding: 0 $min-content-margin 0 $min-content-margin;

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -17,11 +17,15 @@ angular.module('sgApp')
     $scope.variables = Variables.variables;
     $scope.toggleMenu = false;
 
-    $scope.toggleBool = function(toggleMenu) {
+    $scope.toggleSideNav = function(toggleMenu) {
       $scope.toggleMenu = !toggleMenu;
       return $scope.toggleMenu;
     };
 
+    $scope.isSideNav = function() {
+      return $scope.config.data.sideNav;
+    };
+
     // Bind variable to scope to wait for data to be resolved
     $scope.socketService = Socket;
 
@@ -41,7 +45,7 @@ angular.module('sgApp')
     $scope.hasSubsections = function(parentSection) {
       var result = false;
       angular.forEach($scope.sections.data, function(section) {
-        if(parentSection.reference === section.parentReference) {
+        if (parentSection.reference === section.parentReference) {
           result = true;
           return;
         }

diff --git a/lib/app/views/main.html b/lib/app/views/main.html
@@ -10,8 +10,8 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
       </a>
       <pre ng-if="status.hasError">{{status.error.message}}</pre>
     </div>
-    <div class="sg sg-search-container" ng-class="{ 'side-nav-search': config.data.sideNav }">
-      <div class="sg-hamburger " ng-click="toggleBool(toggleMenu)" ng-hide="!config.data.sideNav" ng-class="{ 'sg-hamburger-active': !toggleMenu }">
+    <div class="sg sg-search-container" ng-class="{ 'side-nav-search': isSideNav() }">
+      <div class="sg-hamburger " ng-click="toggleSideNav(toggleMenu)" ng-hide="!isSideNav()" ng-class="{ 'sg-hamburger-active': !toggleMenu }">
         <div class="sg-hamburger-item top"></div>
         <div class="sg-hamburger-item middle"></div>
         <div class="sg-hamburger-item bottom"></div>
@@ -28,7 +28,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
   </div>
 </header>
 
-<nav class="sg sg-top-nav" ng-class="{'designerToolVisible' : designerTool.isVisible}" ng-if="!config.data.sideNav">
+<nav class="sg sg-top-nav" ng-class="{'designerToolVisible' : designerTool.isVisible, 'sg-nav-visible': !isSideNav()}">
   <ul class="sg sg-top-nav-menu">
     <li class="sg-nav-item">
       <a class="sg sg-nav-link"
@@ -59,13 +59,13 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
   </ul>
 </nav>
 
-<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-if="!config.data.sideNav">
+<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-show="!isSideNav()">
   <section ui-view class="sg sg-body full-width">
   </section>
 </div>
 
-<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-if="config.data.sideNav">
-  <div class="sg side-nav-toggle" ng-click="toggleBool(toggleMenu)">
+<div class="sg sg-wrapper full-height" ng-class="{'designerToolVisible' : designerTool.isVisible, 'collapsed' : toggleMenu}" ng-show="isSideNav()">
+  <div class="sg side-nav-toggle" ng-click="toggleSideNav(toggleMenu)">
     {{ toggleMenu ? "&gt;&gt;" : "&lt;&lt;" }}
   </div>
   <nav class="sg sg-side-nav" ng-class="{ 'animate-show': toggleMenu}">

diff --git a/package.json b/package.json
@@ -95,7 +95,6 @@
     "gulp-mocha": "~2.2.0",
     "gulp-ng-annotate": "~1.1.0",
     "gulp-plumber": "~1.0.1",
-    "gulp-rename": "^1.2.2",
     "gulp-rimraf": "^0.2.0",
     "istanbul": "~0.4.1",
     "jscs": "~2.6.0",

diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
@@ -77,10 +77,17 @@ describe('Controller: MainCtrl', function() {
     expect(scope.markupSection.isVisible).to.eql(true);
   });
 
-  describe('toggle navigation', function() {
-    it('should toggle navigation by inversing bool', function() {
+  describe('toggle sideNav', function() {
+    it('should inverse boolean', function() {
       scope.showMenu = true;
-      expect(scope.toggleBool(scope.showMenu)).to.eql(false);
+      expect(scope.toggleSideNav(scope.showMenu)).to.eql(false);
+    });
+  });
+
+  describe('sideNav configuration option true', function() {
+    it('should return true if sideNav configuration option is set true', function() {
+      scope.config.data.sideNav = true;
+      expect(scope.isSideNav()).to.eql(true);
     });
   });