Merge pull request #189 from Ultimaker/STAR-570-sticky-mobile-header

make navigation sticky on mobile
Ultimaker · May 2, 2019 · be95c02 · be95c02
2 parents 31e77d8 + 4997df0
commit be95c02
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ultimaker/react-web-components",
-    "version": "5.0.1",
+    "version": "5.1.0",
     "description": "Ultimaker's unified react component and style library for front-end web",
     "main": "./dist/index.js",
     "types": "./dist/index.d.ts",
@@ -110,10 +110,10 @@
         ],
         "coverageThreshold": {
             "global": {
-                "statements": 92,
-                "branches": 92,
-                "functions": 92,
-                "lines": 92
+                "statements": 93,
+                "branches": 93,
+                "functions": 93,
+                "lines": 93
             }
         },
         "transform": {

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -33,10 +33,6 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
         headerLogoUrl: '/',
     };
 
-    private static _scrollToTop(): void {
-        window.scrollTo(0, 0);
-    }
-
     constructor(props) {
         super(props);
 
@@ -49,21 +45,13 @@ export class Header extends React.Component<HeaderProps, HeaderState> {
     }
 
     private _toggleShowMobileMenu(showMobileMenu: boolean): void {
-        if (showMobileMenu) {
-            Header._scrollToTop();
-        }
-
         this.setState({
             showMobileMenu,
             showAppSwitcherMenu: false,
         });
     }
 
     private _toggleAppSwitcherMenuHandler(showAppSwitcherMenu: boolean): void {
-        if (showAppSwitcherMenu) {
-            Header._scrollToTop();
-        }
-
         this.setState({
             showAppSwitcherMenu,
             showMobileMenu: false,

diff --git a/src/stories/layout.stories.tsx b/src/stories/layout.stories.tsx
@@ -234,6 +234,14 @@ stories.add('Header', withInfo(
                     />
                 )}
             />
+            <div className="app__main">
+                <div>
+                Page Top
+                </div>
+                <div style={{ marginTop: '200vh' }}>
+                Page bottom
+                </div>
+            </div>
         </div>
     </BrowserRouter>
 )));

diff --git a/src/stylesheets/_base.scss b/src/stylesheets/_base.scss
@@ -26,9 +26,8 @@ body {
 
 .app__main {
     flex: 1;
-}
+    padding-top: 5.5rem;
 
-.app--fixed-header .app__main {
     @include respond-to(sm) {
         padding-top: 10.4rem;
     }

diff --git a/src/stylesheets/_header.scss b/src/stylesheets/_header.scss
@@ -1,6 +1,10 @@
 .app__header {
     min-width: $min-window-width;
     z-index: 9999;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
 }
 
 .app__primary-navigation {
@@ -40,15 +44,6 @@
     color: $color-text;
 }
 
-.app--fixed-header .app__header {
-    @include respond-to(sm) {
-        position: fixed;
-        top: 0;
-        right: 0;
-        left: 0;
-    }
-}
-
 .burger-menu {
     position: relative;
     height: 5.4rem;