Develop

apps/leafcutter/app/_components/TopNav.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { FC } from "react";
+import Link from "next/link";
+import Image from "next/legacy/image";
+import { AppBar, Grid, Box } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import LeafcutterLogo from "images/leafcutter-logo.png";
+import { AccountButton } from "app/_components/AccountButton";
+import { HelpButton } from "app/_components/HelpButton";
+import { Tooltip } from "app/_components/Tooltip";
+import { useAppContext } from "./AppProvider";
+// import { LanguageSelect } from "./LanguageSelect";
+
+export const TopNav: FC = () => {
+  const t = useTranslate();
+  const {
+    colors: { white, leafcutterElectricBlue, cdrLinkOrange },
+    typography: { h5, h6 },
+  } = useAppContext();
+
+  return (
+    <AppBar
+      position="fixed"
+      elevation={1}
+      sx={{
+        backgroundColor: white,
+        marginBottom: 180,
+        opacity: 0.95,
+        pt: 2,
+        pb: 2,
+        pr: 3,
+        pl: 6,
+        backdropFilter: "blur(10px)",
+      }}
+    >
+      <Grid
+        container
+        justifyContent="space-between"
+        alignItems="center"
+        alignContent="center"
+        direction="row"
+        wrap="nowrap"
+        spacing={4}
+      >
+        <Link href="/" passHref>
+          <Grid
+            item
+            container
+            direction="row"
+            justifyContent="flex-start"
+            spacing={1}
+            wrap="nowrap"
+            sx={{ cursor: "pointer" }}
+          >
+            <Grid item sx={{ pr: 1 }}>
+              <Image src={LeafcutterLogo} alt="" width={56} height={52} />
+            </Grid>
+            <Grid item container direction="column" alignContent="flex-start">
+              <Grid item>
+                <Box
+                  sx={{
+                    ...h5,
+                    color: leafcutterElectricBlue,
+                    p: 0,
+                    m: 0,
+                    pt: 1,
+                    textAlign: "left",
+                  }}
+                >
+                  Leafcutter
+                </Box>
+              </Grid>
+              <Grid item>
+                <Box
+                  sx={{
+                    ...h6,
+                    m: 0,
+                    p: 0,
+                    color: cdrLinkOrange,
+                    textAlign: "left",
+                  }}
+                >
+                  A Project of Center for Digital Resilience
+                </Box>
+              </Grid>
+            </Grid>
+          </Grid>
+        </Link>
+        <Grid item>
+          <HelpButton />
+        </Grid>
+
+        {/*       <Tooltip
+          title={t("languageOptionsCardTitle")}
+          description={t("languageOptionsCardDescription")}
+          emoji="✍️"
+          tooltipID="language"
+          placement="bottom"
+        >
+          <Grid item>
+            <LanguageSelect />
+          </Grid>
+        </Tooltip> */}
+        <Tooltip
+          title={t("profileSettingsCardTitle")}
+          description={t("profileSettingsCardDescription")}
+          tooltipID="profile"
+          placement="bottom"
+          previousURL="/?tooltip=recentUpdates"
+          nextURL="/create?tooltip=searchCreate"
+        >
+          <Grid item>
+            <AccountButton />
+          </Grid>
+        </Tooltip>
+      </Grid>
+    </AppBar>
+  );
+};