Fix broken sidenav

ChilliCream · Dec 18, 2020 · 3c81d2f · 3c81d2f
1 parent 7697f77
commit 3c81d2f
Show file tree

Hide file tree

Showing 16 changed files with 213 additions and 264 deletions.
diff --git a/website/src/components/misc/article-elements.tsx b/website/src/components/misc/article-elements.tsx
@@ -5,6 +5,17 @@ export const ArticleWrapper = styled.div`
   flex: 1 1 auto;
   flex-direction: column;
 
+  grid-row: 1;
+  grid-column: 2;
+
+  @media only screen and (max-width: 1320px) {
+    grid-column: 2 / 4;
+  }
+
+  @media only screen and (max-width: 1070px) {
+    grid-column: 1 / 4;
+  }
+
   @media only screen and (min-width: 820px) {
     padding: 20px 10px 0;
   }

diff --git a/website/src/components/misc/doc-page-aside.tsx b/website/src/components/misc/doc-page-aside.tsx
@@ -2,15 +2,10 @@ import React, { FunctionComponent, useCallback } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { State } from "../../state";
 import { toggleAside } from "../../state/common";
-import { Aside, BodyStyle, FixedContainer } from "./doc-page-elements";
+import { Aside, BodyStyle } from "./doc-page-elements";
 import { DocPagePaneHeader } from "./doc-page-pane-header";
-import { useStickyElement } from "./useStickyElement";
 
 export const DocPageAside: FunctionComponent = ({ children }) => {
-  const { containerRef, elementRef } = useStickyElement<
-    HTMLElement,
-    HTMLDivElement
-  >(1300);
   const showAside = useSelector<State, boolean>(
     (state) => state.common.showAside
   );
@@ -21,16 +16,14 @@ export const DocPageAside: FunctionComponent = ({ children }) => {
   }, []);
 
   return (
-    <Aside ref={containerRef}>
+    <Aside className={showAside ? "show" : ""}>
       <BodyStyle disableScrolling={showAside} />
-      <FixedContainer ref={elementRef} className={showAside ? "show" : ""}>
         <DocPagePaneHeader
           title="About this article"
           showWhenScreenWidthIsSmallerThan={1300}
           onClose={handleCloseAside}
         />
         {children}
-      </FixedContainer>
     </Aside>
   );
 };
diff --git a/website/src/components/misc/doc-page-elements.tsx b/website/src/components/misc/doc-page-elements.tsx
@@ -1,99 +1,75 @@
-import styled, { createGlobalStyle, css } from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 
-const PaneBase = css`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
+export const MostProminentSection = styled.div`
 
-  * {
-    user-select: none;
-  }
 `;
 
-const FullSize = css`
-  position: fixed;
-  display: initial;
-  padding: 40px 0;
-  width: 250px;
-  height: initial;
-  background-color: initial;
-  opacity: initial;
-  box-shadow: initial;
-`;
+export const Aside = styled.aside`
+  position: relative;
+  overflow: visible;
+  z-index: 2;
+  margin-left: 0;
+  align-self: start;
+  transition: transform 250ms;
+  background-color: white;
+  grid-row: 1;
+  grid-column: 3;
 
-export const FixedContainer = styled.div`
-  position: absolute;
-  display: none;
   padding: 25px 0 0;
-  width: 100vw;
-  height: calc(100vh - 85px);
-  overflow-y: initial;
-  background-color: white;
-  opacity: 0;
-  transition: opacity 2s ease-in-out;
+  position: sticky;
+  top: 0;
 
   &.show {
-    display: initial;
-    opacity: initial;
+    transform: none;
   }
 
-  @media only screen and (min-width: 600px) {
-    width: 450px;
-    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
+  @media only screen and (max-width: 450px) {
+    width: 100%;
+    grid-column: 1;
+    transform: translateX(100%);
   }
-`;
 
-export const MostProminentSection = styled.div`
-  overflow-y: initial;
-`;
-
-export const Aside = styled.aside`
-  ${PaneBase}
-  z-index: 2;
-  right: 0;
-
-  > ${FixedContainer} {
+  @media only screen and (max-width: 1320px) {
+    position: fixed;
+    overflow-y: auto;
+    top: 60px;
+    bottom: 0;
     right: 0;
-  }
-
-  @media only screen and (min-width: 1320px) {
-    position: relative;
-    right: initial;
-    flex: 0 0 250px;
-
-    > ${FixedContainer} {
-      ${FullSize};
-      right: initial;
-
-      ${MostProminentSection} {
-        height: calc(100vh - 280px);
-      }
-    }
+    transform: translateX(100%);
   }
 `;
 
 export const Navigation = styled.nav`
-  ${PaneBase}
+  max-width: 250px;
   z-index: 3;
-  left: 0;
+  overflow: visible;
 
-  > ${FixedContainer} {
-    left: 0;
-  }
+  padding: 25px 0 0;
+  align-self: start;
+  position: sticky;
+  top: 0;
 
-  @media only screen and (min-width: 1070px) {
-    position: relative;
-    left: initial;
-    flex: 0 0 250px;
+  transition: margin-left 250ms;
+  background-color: white;
+  grid-row: 1;
+  grid-column: 1;
 
-    > ${FixedContainer} {
-      ${FullSize};
-      left: initial;
+  &.show {
+    margin-left: 0;
+  }
 
-      ${MostProminentSection} {
-        height: calc(100vh - 220px);
-      }
-    }
+  @media only screen and (max-width: 450px) {
+    max-width: none;
+    width: 100%;
+  }
+
+  @media only screen and (max-width: 1070px) {
+    margin-left: -105%;
+    position: fixed;
+    overflow-y: auto;
+    top: 60px;
+    bottom: 0;
+    left: 0;
   }
 `;
 

diff --git a/website/src/components/misc/doc-page-navigation.tsx b/website/src/components/misc/doc-page-navigation.tsx
@@ -17,15 +17,12 @@ import {
   toggleTOC,
 } from "../../state/common";
 import {
-  BodyStyle,
-  FixedContainer,
   MostProminentSection,
   Navigation,
 } from "./doc-page-elements";
 import { DocPagePaneHeader } from "./doc-page-pane-header";
 import { IconContainer } from "./icon-container";
 import { Link } from "./link";
-import { useStickyElement } from "./useStickyElement";
 
 import ArrowDownIconSvg from "../../images/arrow-down.svg";
 import ArrowUpIconSvg from "../../images/arrow-up.svg";
@@ -44,10 +41,6 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
   selectedProduct,
   selectedVersion,
 }) => {
-  const { containerRef, elementRef } = useStickyElement<
-    HTMLElement,
-    HTMLDivElement
-  >(1050);
   const expandedPaths = useSelector<State, string[]>(
     (state) => state.common.expandedPaths
   );
@@ -185,12 +178,10 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
   }, [activeProduct, selectedPath, selectedProduct]);
 
   return (
-    <Navigation ref={containerRef}>
-      <BodyStyle disableScrolling={showTOC} />
-      <FixedContainer ref={elementRef} className={showTOC ? "show" : ""}>
+    <Navigation className={showTOC ? "show" : ""}>
         <DocPagePaneHeader
           title="Table of contents"
-          showWhenScreenWidthIsSmallerThan={1050}
+          showWhenScreenWidthIsSmallerThan={1071}
           onClose={handleCloseTOC}
         />
         <ProductSwitcher>
@@ -280,7 +271,6 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
             )}
           </MostProminentSection>
         )}
-      </FixedContainer>
     </Navigation>
   );
 };
@@ -382,9 +372,9 @@ const ProductSwitcherDialog = styled.div<{ open: boolean }>`
   background-color: #fff;
 
   @media only screen and (min-width: 1070px) {
+    top: 135px;
     position: fixed;
     z-index: 10;
-    top: 150px;
     flex-direction: row;
     flex-wrap: wrap;
     margin: 0 14px;

diff --git a/website/src/components/misc/global-style.tsx b/website/src/components/misc/global-style.tsx
@@ -2,23 +2,37 @@ import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
   html {
+    height: 100%;
     font-family: sans-serif;
     -ms-text-size-adjust: 100%;
     -webkit-text-size-adjust: 100%;
   }
 
   body {
-    width: 100vw;
-    height: 100vh;
+    display: block;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+
     font-size: 18px;
     line-height: 30px;
-    background-color: #252d3c;
     color: #667;
     overflow-x: hidden;
     scroll-behavior: smooth;
 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+
+    > div {
+      height: 100%;
+      > div {
+        height: 100%;
+        display: grid;
+        grid-template-rows: 60px auto;
+        grid-template-columns: 1fr;
+      }
+    }
   }
 
   * {

diff --git a/website/src/components/misc/page-top.tsx b/website/src/components/misc/page-top.tsx
@@ -1,28 +1,28 @@
-import React, { createRef, FunctionComponent, useCallback } from "react";
+import React, {createRef, FunctionComponent} from "react";
 import styled from "styled-components";
-import { useScroll } from "./useScroll";
 
 import ArrowUpIconSvg from "../../images/arrow-up.svg";
+import {useSelector} from 'react-redux';
+import {State} from '../../state';
 
-export const PageTop: FunctionComponent = () => {
-  const ref = createRef<HTMLButtonElement>();
-
-  const handleClick = useCallback(() => {
-    window.scrollTo(0, 0);
-  }, []);
 
-  useScroll((top) => {
-    ref.current!.style.display = top > 60 ? "initial" : "none";
-  });
+export const PageTop: FunctionComponent<{onTopScroll: () => void}> = ({onTopScroll}) => {
+  const ref = createRef<HTMLButtonElement>();
+  const showButton = useSelector<State, boolean>((state) => state.common.yScrollPosition > 60);
 
   return (
-    <JumpToTop ref={ref} onClick={handleClick}>
+    <JumpToTop className={showButton ? "show" : ""} ref={ref} onClick={onTopScroll}>
       <ArrowUpIconSvg />
     </JumpToTop>
   );
 };
 
 const JumpToTop = styled.button`
+  display: none;
+  &.show {
+    display: initial;
+  }
+
   position: fixed;
   right: 50px;
   bottom: 50px;

diff --git a/website/src/components/misc/useScroll.ts b/website/src/components/misc/useScroll.ts