fix: sidebar and sidenav

src/app/layout/breakpoints.css

@@ -0,0 +1 @@
+@value m-medium: (min-width: 768px);

src/app/layout/layout.tsx

@@ -5,7 +5,13 @@ import { node, bool } from 'prop-types'
 import React from 'react'
 import css from './layout.module.css'
 
-export const Layout = ({ children, sidebar }) => {
+interface LayoutProps {
+    children: React.ReactNode
+    sidebar: React.ReactNode
+}
+
+
+export const Layout = ({ children, sidebar }: LayoutProps) => {
 
     return (
             <div className={css.wrapper}>
@@ -19,10 +25,4 @@ export const Layout = ({ children, sidebar }) => {
     );
 }
 
-Layout.propTypes = {
-    header: node,
-    main: node,
-    sidebar: node,
-}
-
 export default Layout

src/app/router.tsx

@@ -1,30 +1,48 @@
-import { createHashRouter, RouterProvider, Outlet, useRouteError, Navigate } from "react-router-dom";
-import { AllOverview } from "../pages";
+import {
+    createHashRouter,
+    RouterProvider,
+    Outlet,
+    useRouteError,
+    Navigate,
+} from "react-router-dom";
 import { Layout } from "./layout";
 import { Sidebar } from "./sidebar";
-import React from 'react'
+import React, { Suspense, lazy } from "react";
+import { CircularLoader } from "@dhis2/ui";
+import { routes } from '../pages/'
+
+const DefaultLazyLoad = ({ element }) => (
+    <Suspense fallback={<CircularLoader />}>{element}</Suspense>
+);
+
+// React.lazy only works with default exports, so we import directly instead of from index.tsx
+const AllOverview = lazy(() => import("../pages/overview/all-overview"));
+//const DataElements = lazy(() => import("../pages/data-elements/data-elements"));
 
 const router = createHashRouter([
     {
+        // no path means its a layout route
         element: (
             <Layout sidebar={<Sidebar />}>
                 <Outlet />
             </Layout>
         ),
-        //errorElement: <DefaultError />,
-        children: [{
 
-            path: "/",
-            element: <AllOverview />,
-        }, {
-
-            path: "dataElements",
-            element: <div>Data Elements</div>,
-        }]
+        // TODO: Should we list all routes here, or import children-routes from pages?
+        // children: [
+        //     {
+        //         path: "/",
+        //         element: <DefaultLazyLoad element={<AllOverview />} />,
+        //     },
+        //     {
+        //         path: 'dataElements',
+        //         element: <div>Data Elements</div>,
+        //     },
+        // ],
+        children: routes,
     },
 ]);
 
-
 export const ConfiguredRouter = () => {
     return <RouterProvider router={router} />;
 };

src/app/sidebar/sidebar.tsx

@@ -1,19 +1,74 @@
-
-
-import classnames from 'classnames'
-import React from 'react'
-import css from './sidebar.module.css'
-
+import classnames from "classnames";
+import React from "react";
+import css from "./sidebar.module.css";
+import { Sidenav, SidenavItems, SidenavParent, SidenavLink } from "./sidenav/sidenav";
+import { NavLink, Link } from "react-router-dom";
 interface SidebarProps {
-    children?: React.ReactNode
+    children?: React.ReactNode;
 }
 
 export const Sidebar = ({ children }: SidebarProps) => {
+    const ContentList = [
+        "Data Elements",
+        "Categories",
+        "Organisation Units",
+        "Data Sets",
+        "Programs",
+    ].map((item, index) => {
+        return <li key={index}>{item}</li>;
+    });
+    return (
+        <aside className={css.sidebar}>
+             <Sidenav>
+                        <SidenavItems>
+                            <SidenavLink><Link to={'/'}>Metadata Overview</Link></SidenavLink>
+                            <SidenavParent label="Categories">
+                                <SidenavLink>Category Option</SidenavLink>
+                                <SidenavLink disabled={true}>Category combination</SidenavLink>
+                                <SidenavLink>Category option combination</SidenavLink>
+                                <SidenavLink><NavLink to={'/hello'}>Hello</NavLink></SidenavLink>
+                            </SidenavParent>
+                            <SidenavParent label="Data elements">
+                                <SidenavLink label="Data element" />
+                                <SidenavLink label="Data element group" />
+                                <SidenavLink label="Data element group set" />
+                            </SidenavParent>
+                            <SidenavParent label="Data sets">
+                                <SidenavLink label="Data set" />
+                                <SidenavLink label="Data set notifications" />
+                            </SidenavParent>
+                            <SidenavParent label="Indicators">
+                                <SidenavLink label="Indicator" />
+                                <SidenavLink label="Indicator type" />
+                                <SidenavLink label="Indicator group" />
+                                <SidenavLink label="Indicator group set" />
+                                <SidenavLink label="Program indicator" />
+                                <SidenavLink label="Program indicator group" />
+                            </SidenavParent>
+                            <SidenavParent label="Organisation units">
+                                <SidenavLink label="Organisation unit" />
+                                <SidenavLink label="Organisation unit group" />
+                                <SidenavLink label="Organisation unit group set" />
+                                <SidenavLink label="Organisation unit level" />
+                            </SidenavParent>
+                            <SidenavParent label="Programs and Tracker">
+                                <SidenavLink label="Program" />
+                                <SidenavLink label="Tracked entity attribute" />
+                                <SidenavLink label="Relationship type" />
+                                <SidenavLink label="Tracked entity type" />
+                                <SidenavLink label="Program rule" />
+                                <SidenavLink label="Program rule variable" />
+                            </SidenavParent>
+                            <SidenavParent label="Validation">
+                                <SidenavLink label="Validation rule" />
+                                <SidenavLink label="Validation rule group" />
+                                <SidenavLink label="Validation notification" />
+                            </SidenavParent>
+                            <SidenavLink label="Metadata editor" />
+                        </SidenavItems>
+                    </Sidenav>
+        </aside>
+    );
+};
 
-    const ContentList = ['Data Elements', 'Categories', 'Organisation Units', 'Data Sets', 'Programs'].map((item, index) => {
-        return <li key={index}>{item}</li>
-    })
-    return <aside className={css.sidebar}>{ContentList}</aside>
-}
-
-export default Sidebar
+export default Sidebar;

src/app/sidebar/sidenav/sidenav-filter.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Menu, MenuItem } from '@dhis2/ui'
+
+interface SidenavParentProps {
+    title: string,
+    children: React.ReactNode
+}
+
+export const SidenavFilter = ({ title, children }: SidenavParentProps) => {
+    return (
+        <Menu>
+            <MenuItem label={title} />
+        </Menu>
+    );
+}

src/app/sidebar/sidenav/sidenav.module.css

@@ -0,0 +1,133 @@
+/* Most of this is copied from https://github.com/dhis2/design-specs/blob/master/src/components/sidenav.css */
+
+/* component-specific variables not defined in ui */
+html {
+    --sidenav-dark-bg-hover: #2c3644;
+    --sidenav-dark-bg-selected: #040506;
+}
+
+/* nuke list styles */
+.sidenav-wrap ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+/* wrapper */
+.sidenav-wrap {
+    width: 100%;
+    height: 100%;
+    background: var(--colors-grey900);
+    overflow-y: auto;
+    color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+/* parent */
+.sidenav-parent button {
+    border: none;
+    background: var(--colors-grey900);
+    color: white;
+    font-size: 15px;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 36px;
+    padding: 8px 8px 8px 12px;
+}
+.sidenav-parent button:hover {
+    background: var(--sidenav-dark-bg-hover);
+}
+.sidenav-parent button:focus {
+    outline: 2px solid white;
+    background: var(--sidenav-dark-bg-hover);
+    outline-offset: -2px;
+}
+.sidenav-parent button:disabled {
+    color: var(--colors-grey500);
+    cursor: not-allowed;
+}
+.sidenav-parent button:disabled:hover {
+    background: var(--colors-grey900);
+}
+.sidenav-parent-chevron {
+    margin-left: auto;
+    width: 16px;
+    height: 16px;
+}
+.parent-is-open .sidenav-parent-chevron {
+    transform: rotate(180deg);
+}
+
+/* Link */
+.sidenav-link-wrapper {
+    display: flex;
+}
+.sidenav-link * {
+    display: block;
+    min-height: 36px;
+    padding: 8px 8px 8px 12px;
+    background: var(--colors-grey900);
+    text-decoration: none;
+    color: white;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+}
+.sidenav-link:hover,.sidenav-link *:hover {
+    background: var(--sidenav-dark-bg-hover);
+}
+.sidenav-link:focus,.sidenav-link *:focus {
+    outline: 2px solid white;
+    background: var(--sidenav-dark-bg-hover);
+    outline-offset: -2px;
+}
+.sidenav-link-disabled, .sidenav-link-disabled * {
+    cursor: not-allowed;
+    color: var(--colors-grey500);
+}
+.sidenav-link-disabled:hover,.sidenav-link-disabled:hover > * {
+    background: var(--colors-grey900);
+}
+.sidenav-link a.active, .sidenav-link :global(.active) {
+    font-weight: 600;
+    background: var(--sidenav-dark-bg-selected);
+    box-shadow: inset 6px 0px 0px 0px var(--colors-teal500);
+}
+.sidenav-link.active:hover {
+    background: var(--sidenav-dark-bg-selected);
+}
+.sidenav-item-icon {
+    margin-right: 8px;
+    width: 16px;
+    height: 16px;
+}
+/* indent inside a parent */
+.sidenav-parent .sidenav-link {
+    padding-left: var(--spacers-dp32);
+}
+/* extra-indent if parent has an icon */
+.sidenav-parent-has-icon .sidenav-link {
+    padding-left: var(--spacers-dp48);
+}
+
+/* Divider */
+.sidenav-divider {
+    border-bottom: 1px solid var(--colors-grey700);
+    margin: var(--spacers-dp8) var(--spacers-dp12);
+}
+
+/* Title */
+.sidenav-section-title {
+    padding: var(--spacers-dp8) var(--spacers-dp12);
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--colors-grey300);
+}
+
+/* Footer */
+.sidenav-footer {
+    margin-top: auto;
+}