WIP: new layout header (#1227)

* new HY header for new layout; themes, components * comment out some unused stuff for build
rage · Aug 24, 2023 · abe7327 · abe7327
1 parent c79fdad
commit abe7327
Show file tree

Hide file tree

Showing 22 changed files with 910 additions and 521 deletions.
diff --git a/frontend/components/NewLayout/Header/Header.tsx b/frontend/components/NewLayout/Header/Header.tsx
@@ -1,8 +1,12 @@
 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 LanguageSwitch from "./LanguageSwitch"
 import MoocLogo from "./MoocLogo"
+import { useTranslator } from "/hooks/useTranslator"
+import CommonTranslations from "/translations/common"
 
 interface HideOnScrollProps {
   window?: () => Window
@@ -19,31 +23,108 @@ function HideOnScroll({ window, children }: HideOnScrollProps) {
   )
 }
 
-const StyledToolbar = styled(Toolbar)`
+const HyToolbar = styled(Toolbar)(
+  ({ theme }) => `
+  background-color: ${theme.palette.common.grayscale.black};
+  border-bottom: 2px solid rgb(0, 0, 0, 0.7);
+  padding: 0;
+  margin: 0;
+  position: relative;
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+`,
+)
+
+const GroupToolbar = styled(Toolbar)`
   display: flex;
   flex-direction: row;
   flex-shrink: 0;
   overflow: hidden;
 `
 
-const MenuContainer = styled("div")`
+const HyLogo = styled(HyLogoIcon)(
+  ({ theme }) => `
+  fill: ${theme.palette.common.grayscale.white};
+  font-size: 32;
+  ${theme.breakpoints.up("lg")} {
+    font-size: 64;
+  }
+`,
+)
+
+const HyLabel = styled("span")(
+  ({ theme }) => `
+  font-size: 0.75rem;
+  line-height: 14px;
+  font-weight: 700;
+  color: ${theme.palette.common.grayscale.white};
+  letter-spacing: -0.7px;
+  margin-left: 8px;
+  max-width: 90px;
+  text-transform: uppercase;
+  ${theme.breakpoints.down("xs")} {
+    font-size: 0.75rem;
+    line-height: 14px;
+    letter-spacing: -0.6px;
+    margin-left: 3px;
+  }
+  ${theme.breakpoints.up("md")} {
+    font-size: 0.875rem;
+  }
+  ${theme.breakpoints.up("lg")} {
+    letter-spacing: -0.6px;
+    margin-left: 4px;
+  }
+  ${theme.breakpoints.up("xl")} {
+    font-size: 0.875rem;
+    margin-left: 8px;
+  }
+`,
+)
+
+const HyLogoContainer = styled("div")(
+  ({ theme }) => `
+  padding: 8px 0;
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  flex: 1;
-`
+  justify-content: space-between;
+  ${theme.breakpoints.down("xs")} {
+    min-width: min-content;
+    max-width: max-content;
+    white-space: nowrap;
+  }
+  ${theme.breakpoints.up("lg")} {
+    min-width: min-content;
+    max-width: 90px;
+    white-space: initial;
+  }
+  ${theme.breakpoints.up("xl")} {
+    min-width: min-content;
+    max-width: max-content;
+    white-space: nowrap;
+  }
+`,
+)
 
 function Header() {
+  const t = useTranslator(CommonTranslations)
+
   return (
     <HideOnScroll>
-      <AppBar color="inherit" position="sticky" aria-label="user toolbar">
-        <StyledToolbar>
+      <AppBar position="sticky" aria-label="toolbar" elevation={0}>
+        <HyToolbar>
+          <HyLogoContainer>
+            <HyLogo />
+            <HyLabel>{t("hy")}</HyLabel>
+          </HyLogoContainer>
+          <LanguageSwitch />
+        </HyToolbar>
+        <GroupToolbar>
           <MoocLogo />
-          <MenuContainer>
-            <DesktopNavigationMenu />
-            <MobileNavigationMenu />
-          </MenuContainer>
-        </StyledToolbar>
+          <DesktopNavigationMenu />
+          <MobileNavigationMenu />
+        </GroupToolbar>
       </AppBar>
     </HideOnScroll>
   )