Removed isNavOpen concept and other clean up

microsoft · Jan 17, 2018 · ed823f6 · ed823f6
1 parent 26ea7dc
commit ed823f6
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 58 deletions.
diff --git a/apps/fabric-website/src/components/App/App.scss b/apps/fabric-website/src/components/App/App.scss
@@ -10,15 +10,13 @@
     max-width: $App-maximumWidth;
   }
 
-  // Nav is hidden off screen by default
   .App-nav {
     -webkit-overflow-scrolling: touch; // Improves scrolling performance
     overflow-y: auto;
     position: absolute;
     top: $Header-height;
-    // transition: $ms-animation-duration-2 $ms-animation-ease-1;
-    // @include ms-transition-property(left);
     width: $Nav-width;
+    @include ms-float(left);
   }
 
   .App-content {
@@ -37,32 +35,6 @@
     }
   }
 
-  // When the nav is open (smaller screens only) push the content over and prevent app from scrolling
-  @media screen and (max-width: $uhf-screen-min-mobile) {
-    .App {
-      padding: 0;
-    }
-
-    .App.is-navOpen {
-      bottom: 0;
-      left: 0;
-      overflow: hidden;
-      position: fixed;
-      right: 0;
-      top: 0;
-
-      .App-nav {
-        @include ms-left(0);
-      }
-
-      .App-content {
-        @include ms-left($Nav-width);
-        opacity: 0.5; // Dim the content
-      }
-    }
-  }
-
-  // Show the nav at all times, to the left of the content
   @media screen and (min-width: $uhf-screen-min-mobile) {
     .App {
       background-color: $ms-color-neutralDark;
@@ -76,7 +48,6 @@
     }
 
     .App-nav {
-      @include ms-float(left);
       top: $Header-height*2;
       bottom: 0;
       overflow-y: auto;
@@ -89,17 +60,6 @@
       width: calc(100% - #{$Nav-width});
       @include ms-left($Nav-width);
     }
-
-    // Reset values for the nav and content if opened on larger screens
-    .App.is-navOpen {
-      .App-nav {
-        @include ms-left(auto);
-      }
-
-      .App-content {
-        @include ms-left(auto);
-      }
-    }
   }
 
   @media only screen and (max-width: $uhf-screen-max-lg) and (min-width: $uhf-screen-min-mobile) {
@@ -110,7 +70,6 @@
 
     .App-nav {
       @include ms-margin-left(18px);
-      @include ms-left(0);
     }
 
     .App-content {

diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx
@@ -10,7 +10,6 @@ export interface IAppProps extends React.Props<App> {
 }
 
 export interface IAppState {
-  isNavOpen: boolean;
   isAttached: boolean;
   navHeight: number;
 }
@@ -21,14 +20,6 @@ export class App extends React.Component<IAppProps, any> {
   private _height: number;
   private _appContent: HTMLDivElement;
 
-  constructor(props: IAppProps) {
-    super(props);
-
-    this.state = {
-      isNavOpen: false
-    };
-  }
-
   public componentDidMount() {
     window.addEventListener('scroll', this._handleNavPositioning);
     window.addEventListener('resize', this._handleNavPositioning);
@@ -75,7 +66,6 @@ export class App extends React.Component<IAppProps, any> {
           >
             <Nav
               pages={ AppState.pages }
-              onLinkClick={ this._onNavItemClicked.bind(this) }
             />
           </div>
           <div
@@ -91,12 +81,6 @@ export class App extends React.Component<IAppProps, any> {
     );
   }
 
-  private _onNavItemClicked(ev: MouseEvent) {
-    this.setState({
-      isNavOpen: false
-    });
-  }
-
   @autobind
   private _handleNavPositioning() {
     let { isAttached } = this.state;