feat: remove logic to auto hide Nav

- rename hideNav to PageTools
newrelic · Apr 18, 2023 · 1891d9a · 1891d9a
1 parent 728ef41
commit 1891d9a
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 48 deletions.
diff --git a/.../browser/browser-monitoring/getting-started/introduction-browser-monitoring.mdx b/.../browser/browser-monitoring/getting-started/introduction-browser-monitoring.mdx
@@ -17,7 +17,7 @@ redirects:
   - /docs/browser/browser-monitoring
   - /docs/browser
   - /docs/browser/new-relic-browser
-hideNavs: true
+hidePageTools: true
 ---
 
 import browserBrowserSummary from 'images/browser_screenshot-full_browser-summary.png'

diff --git a/...etics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring.mdx b/...etics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring.mdx
@@ -20,7 +20,7 @@ redirects:
   - /docs/synthetics/new-relic-synthetics/scripting-monitors/scripted-browser-examples
 signupBanner:
   text: Monitor and improve your entire stack. 100GB free. Forever.
-hideNavs: true 
+hidePageTools: true 
 ---
 
 import syntheticResultsPageforSimpleBrowserMonitor from 'images/synthetic_screenshot-full_Results-page-for-simple-browser-monitor.png'

diff --git a/...etics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring.mdx b/...etics/synthetic-monitoring/getting-started/get-started-synthetic-monitoring.mdx
@@ -9,7 +9,7 @@ tags:
 metaDescription: Get started with New Relic by creating your first simple browser or scripted browser monitor.
 signupBanner:
   text: Monitor and improve your entire stack. 100GB free. Forever.
-hideNavs: true
+hidePageTools: true
 translationType: machine
 ---
 

diff --git a/src/layouts/HomepageLayout.js b/src/layouts/HomepageLayout.js
@@ -30,16 +30,15 @@ import {
   ToggleSelector,
 } from '../components/ToggleView';
 
-const HomepageLayout = ({ children, pageContext, sidebarOpen = true }) => {
+const HomepageLayout = ({ children, pageContext }) => {
   const tessen = useTessen();
   const { loggedIn } = useLoggedIn();
   const { sidebarWidth } = useLayout();
   const { locale, slug } = pageContext;
-  let { hideNavs } = pageContext;
   const location = useLocation();
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [sidebar, setSidebar] = useState(sidebarOpen);
+  const [sidebar, setSidebar] = useState(true);
   const { t } = useTranslation();
   const navHeaderHeight = '100px';
   const isStyleGuide =
@@ -52,18 +51,8 @@ const HomepageLayout = ({ children, pageContext, sidebarOpen = true }) => {
     }
   };
 
-  /*
-   * [VSU] some docs pages are being designed as JS for faster experimenting
-   * and will never have the frontmatter property
-   * Using regex for check to account for paths with and without trailing slash
-   */
-  const docsAsJS = [/introduction-apm/];
-  const isJSDoc = docsAsJS.some((docUrl) => docUrl.test(location.pathname));
-  hideNavs ||= isJSDoc;
-
   useEffect(() => {
     setIsMobileNavOpen(false);
-    setSidebar(hideNavs ? false : sidebarOpen);
     // react scroll causes the page to crash if it doesn't find an element
     // so we're checking for the element before firing
     const pathName = addTrailingSlash(location.pathname);
@@ -77,10 +66,7 @@ const HomepageLayout = ({ children, pageContext, sidebarOpen = true }) => {
         offset: -5,
       });
     }
-    if (loggedIn && !hideNavs) {
-      setSidebar(true);
-    }
-  }, [location.pathname, loggedIn, sidebarOpen, hideNavs]);
+  }, [location.pathname]);
 
   const hasToggled = useRef(false);
   const [currentView, setCurrentView] = useState(TOGGLE_VIEWS.newUserView);

diff --git a/src/layouts/MainLayout.js b/src/layouts/MainLayout.js
@@ -11,7 +11,6 @@ import {
   SearchInput,
   useTessen,
   useTranslation,
-  useLoggedIn,
   LoggedInProvider,
 } from '@newrelic/gatsby-theme-newrelic';
 import { css } from '@emotion/react';
@@ -24,16 +23,14 @@ import NavFooter from '../components/NavFooter';
 import { useLocation, navigate } from '@reach/router';
 import { MainLayoutContext } from '../components/MainLayoutContext';
 
-const MainLayout = ({ children, pageContext, sidebarOpen = true }) => {
+const MainLayout = ({ children, pageContext }) => {
   const tessen = useTessen();
-  const { loggedIn } = useLoggedIn();
   const { sidebarWidth } = useLayout();
   const { locale, slug } = pageContext;
-  let { hideNavs } = pageContext;
   const location = useLocation();
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState('');
-  const [sidebar, setSidebar] = useState(sidebarOpen);
+  const [sidebar, setSidebar] = useState(true);
   const { t } = useTranslation();
   const navHeaderHeight = '100px';
   const isStyleGuide =
@@ -46,18 +43,8 @@ const MainLayout = ({ children, pageContext, sidebarOpen = true }) => {
     }
   };
 
-  /*
-   * [VSU] some docs pages are being designed as JS for faster experimenting
-   * and will never have the frontmatter property
-   * Using regex for check to account for paths with and without trailing slash
-   */
-  const docsAsJS = [/introduction-apm/];
-  const isJSDoc = docsAsJS.some((docUrl) => docUrl.test(location.pathname));
-  hideNavs ||= isJSDoc;
-
   useEffect(() => {
     setIsMobileNavOpen(false);
-    setSidebar(hideNavs ? false : sidebarOpen);
     // react scroll causes the page to crash if it doesn't find an element
     // so we're checking for the element before firing
     const pathName = addTrailingSlash(location.pathname);
@@ -71,10 +58,7 @@ const MainLayout = ({ children, pageContext, sidebarOpen = true }) => {
         offset: -5,
       });
     }
-    if (loggedIn && !hideNavs) {
-      setSidebar(true);
-    }
-  }, [location.pathname, loggedIn, sidebarOpen, hideNavs]);
+  }, [location.pathname]);
 
   const navCollapser = (
     <Button

diff --git a/src/layouts/index.js b/src/layouts/index.js
@@ -9,12 +9,6 @@ const Layout = ({ children, ...props }) => {
   switch (pageContext.layout) {
     case 'basic':
       return children;
-    case 'homepage':
-      return (
-        <MainLayout sidebarOpen={false} {...props}>
-          {children}
-        </MainLayout>
-      );
     case 'EmbedLayout':
       if (pageContext.fileRelativePath.match(/404/)) {
         return children;

diff --git a/src/templates/docPage.js b/src/templates/docPage.js
@@ -49,7 +49,7 @@ const BasicDoc = ({ data, location, pageContext }) => {
     body,
     fields: { fileRelativePath },
   } = mdx;
-  const { disableSwiftype, hideNavs } = pageContext;
+  const { disableSwiftype, hidePageTools } = pageContext;
 
   const headings = useMemo(() => {
     const slugs = new GithubSlugger();
@@ -146,7 +146,7 @@ const BasicDoc = ({ data, location, pageContext }) => {
               'page-tools';
             grid-template-columns: minmax(0, 1fr);
           }
-          ${hideNavs &&
+          ${hidePageTools &&
           css`
             grid-template-areas:
               'mt-disclaimer'
@@ -179,7 +179,7 @@ const BasicDoc = ({ data, location, pageContext }) => {
             <MDXContainer body={body} />
           </Layout.Content>
         </LoggedInProvider>
-        {!hideNavs && (
+        {!hidePageTools && (
           // TODO pass nodeRef to avoid `findDOMNode` usage
           // this transition is the inverse of the page `translate` transition
           // it keeps the PageTools in the same place when the nav opens/ closes