wip multitier drawer (#1229)

* the navigation drawer is multiple tiered, other small fixes

* fix skiplink; fix page max width according

frontend/components/Breadcrumbs.tsx

@@ -13,6 +13,11 @@ import BreadcrumbsTranslations, {
   Breadcrumbs as BreadcrumbsTranslationType,
 } from "/translations/breadcrumbs"
 
+const BreadcrumbContainer = styled("nav")`
+  margin: 0 auto;
+  width: 100vw;
+  max-width: 1920px;
+`
 const BreadcrumbList = styled("ul")`
   list-style: none;
   overflow: hidden;
@@ -131,7 +136,7 @@ export function Breadcrumbs() {
   }
 
   return (
-    <nav id="breadcrumbs" aria-label="breadcrumbs">
+    <BreadcrumbContainer id="breadcrumbs" aria-label="breadcrumbs">
       <BreadcrumbList>
         <BreadcrumbComponent translation="home" href="/" key="home" />
         {breadcrumbs.map((breadcrumb, index) => (
@@ -141,6 +146,6 @@ export function Breadcrumbs() {
           />
         ))}
       </BreadcrumbList>
-    </nav>
+    </BreadcrumbContainer>
   )
 }

frontend/components/NewLayout/Header/Header.tsx

@@ -2,7 +2,7 @@ import { AppBar, Slide, Toolbar, useScrollTrigger } from "@mui/material"
 import { styled } from "@mui/material/styles"
 
 import HyLogoIcon from "../Icons/HyLogo"
-import { DesktopNavigationMenu, MobileNavigationMenu } from "../Navigation"
+import { NavigationMenu } from "../Navigation"
 import LanguageSwitch from "./LanguageSwitch"
 import MoocLogo from "./MoocLogo"
 import { useTranslator } from "/hooks/useTranslator"
@@ -139,8 +139,7 @@ function Header() {
           <BrandingContainer>
             <MoocLogo />
           </BrandingContainer>
-          <DesktopNavigationMenu />
-          <MobileNavigationMenu />
+          <NavigationMenu />
         </GroupToolbar>
       </HeaderAppBar>
     </HideOnScroll>

frontend/components/NewLayout/Icons/CaretLeft.tsx

@@ -0,0 +1,10 @@
+import { createSvgIcon } from "@mui/material/utils"
+
+const CaretLeftIcon = createSvgIcon(
+  <svg viewBox="0 0 1000 1000">
+    <path d="M181 503l532 462 110-123-394-339 394-345L713 35z" />
+  </svg>,
+  "CaretLeft",
+)
+
+export default CaretLeftIcon

frontend/components/NewLayout/Navigation/DesktopNavigationMenu.tsx

@@ -14,6 +14,7 @@ import {
 } from "@mui/material"
 import { styled, Theme } from "@mui/material/styles"
 
+import { NavigationMenuItem } from "."
 import { NavigationLinks } from "./NavigationLinks"
 import { useLoginStateContext } from "/contexts/LoginStateContext"
 import { useTranslator } from "/hooks/useTranslator"
@@ -124,10 +125,14 @@ const UserOptionsMenu = () => {
   )
 }
 
-const DesktopNavigationMenu = () => {
+interface DesktopNavigationMenuProps {
+  items: Array<NavigationMenuItem>
+}
+
+const DesktopNavigationMenu = ({ items }: DesktopNavigationMenuProps) => {
   return (
     <>
-      <NavigationLinks />
+      <NavigationLinks items={items} />
       <NavigationRightContainer>
         <UserOptionsMenu />
       </NavigationRightContainer>