[WIP]: Initial wip refactor nav tree without kendo

gatsby-browser.js

@@ -109,9 +109,15 @@ exports.onRouteUpdate = () => {
     searchBar.Initialize();
   }
   /* Update visually hidden classes when JS enabled */
-  document.getElementById('search-bar-wrapper').classList.remove('govuk-visually-hidden');
-  document.getElementById('sitemap-header-link').classList.add('govuk-visually-hidden');
-  document.getElementById('sitemap-sidebar-link').classList.add('govuk-visually-hidden');
+  if (document.getElementById('search-bar-wrapper')) {
+    document.getElementById('search-bar-wrapper').classList.remove('govuk-visually-hidden');
+  }
+  if (document.getElementById('sitemap-header-link')) {
+    document.getElementById('sitemap-header-link').classList.add('govuk-visually-hidden');
+  }
+  if (document.getElementById('sitemap-sidebar-link')) {
+    document.getElementById('sitemap-sidebar-link').classList.add('govuk-visually-hidden');
+  }
   Array.from(document.querySelectorAll('.gatsby-code-button-container')).map(e => e.classList.remove('govuk-visually-hidden'));
   /* Add smooth scroll to anchors on the page */
   document.querySelectorAll('a[href^="#"]').forEach(anchor => {
@@ -123,4 +129,21 @@ exports.onRouteUpdate = () => {
       });
     });
   });
+  /* If JS enabled nav directory links hidden for directory spans with click reveal behaviour */
+  Array.from(document.querySelectorAll('.nav-directory-container')).map(dir => {
+    var subDirEle = dir.getElementsByClassName('nav-directory-subdir')[0];
+    var dirLink = dir.getElementsByClassName('nav-directory-link')[0];
+    var dirSpan = dir.getElementsByClassName('nav-directory-span')[0];
+
+    dirLink.classList.add('govuk-visually-hidden');
+    dirSpan.classList.remove('govuk-visually-hidden');
+    subDirEle.style.display = 'none';
+
+    dir.addEventListener('click', e => {
+      setTimeout(() => {
+        subDirEle.style.display = subDirEle.style.display === 'none' ? 'block' : 'none';
+      }, 0);
+    });
+    return dir;
+  });
 }

package.json

@@ -25,9 +25,6 @@
     "@gatsby-contrib/gatsby-plugin-elasticlunr-search": "^3.0.2",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@progress/kendo-react-animation": "^2.6.1",
-    "@progress/kendo-react-treeview": "^2.6.1",
-    "@progress/kendo-theme-default": "^3.2.0",
     "gatsby": "^4.15.2",
     "gatsby-image": "^2.0.20",
     "gatsby-plugin-breadcrumb": "^12.3.1",

src/components/layout.js

@@ -9,13 +9,12 @@ import Header from './header';
 import Footer from './footer';
 import Breadcrumb from './breadcrumb';
 
-import '@progress/kendo-theme-default/dist/all.css';
 import '../stylesheets/govuk.scss';
 import '../stylesheets/layout-custom.scss';
 import 'prismjs/themes/prism-tomorrow.css';
 import 'prismjs/plugins/line-numbers/prism-line-numbers.css';
 
-const Layout = ({ children, crumbs, title }) => (
+const Layout = ({ children, title, pageContext }) => (
   <StaticQuery
     query={graphql`
       query SiteTitleQuery {
@@ -38,7 +37,9 @@ const Layout = ({ children, crumbs, title }) => (
               </nav>
             </div>
           </div>
-          <div className="main-content"><div className="page-content"><Breadcrumb crumbs={crumbs} title={title}/>{children}<hr/></div>
+          <div className="main-content"><div className="page-content">
+            <Breadcrumb crumbs={pageContext.breadcrumb.crumbs} title={title}/>{children}<hr/>
+          </div>
           <Footer/>
           </div>
         </main>