fix: mobile accordion for explorer in header

cohstats · Mar 23, 2023 · 1055d59 · 1055d59
1 parent c9bcdce
commit 1055d59
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 42 deletions.
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
@@ -22,7 +22,6 @@ import { IconBarrierBlock, IconChevronDown } from "@tabler/icons";
 import { ColorSchemeToggle } from "../other/color-scheme-toggle";
 import { SearchButton } from "../search-button/search-button";
 import { OnlinePlayers } from "../online-players";
-import config from "../../config";
 import ExplorerMenu from "./components/ExplorerMenu";
 import LeaderboardsMenu from "./components/LeaderboardsMenu";
 import { getAboutRoute, getDesktopAppRoute, getLeaderBoardRoute } from "../../src/routes";

diff --git a/components/Header/components/ExplorerMenu.tsx b/components/Header/components/ExplorerMenu.tsx
@@ -1,5 +1,14 @@
-import { Anchor, Divider, Flex, Grid, Group, HoverCard, Stack, Text } from "@mantine/core";
-import config from "../../../config";
+import {
+  Accordion,
+  Anchor,
+  Divider,
+  Flex,
+  Grid,
+  Group,
+  HoverCard,
+  Stack,
+  Text,
+} from "@mantine/core";
 import { IconChevronDown } from "@tabler/icons";
 import Link from "next/link";
 import React from "react";
@@ -37,44 +46,71 @@ const ExplorerMenu = ({
 }: {
   cx: (...args: any) => string;
   classes: Record<string, string>;
-}) => (
-  <HoverCard width={800} position="bottom" radius="md" shadow="md" withinPortal>
-    <HoverCard.Target>
-      <Anchor href={config.isDevEnv() ? "/explorer" : "#"} className={cx(classes.link)}>
-        <Group spacing={3}>
-          Explorer
-          <IconChevronDown className={classes.hiddenMobile} size={16} />
-        </Group>
-      </Anchor>
-    </HoverCard.Target>
-    <HoverCard.Dropdown sx={{ overflow: "hidden" }}>
-      <Grid gutter={0} columns={2}>
-        <Grid.Col span={1}>
-          <Stack>
-            {explorerFactionLink("german")}
-            {explorerFactionLink("american")}
-            {explorerFactionLink("dak")}
-            {explorerFactionLink("british")}
-          </Stack>
-        </Grid.Col>
-        <Grid.Col span={1}>
-          {/* <Stack>
-            <Text weight={700}>Other Stuff</Text>
-            <Text>
-              <Anchor color="orange" component={Link} href="#">
-                Child stuff
-              </Anchor>
-            </Text>
-          </Stack>
-          <Divider my="sm" /> */}
-          <Stack>
-            <Text weight={700}>Tools</Text>
-            {explorerToolLink("DPS - Unit Comparison")}
-          </Stack>
-        </Grid.Col>
-      </Grid>
-    </HoverCard.Dropdown>
-  </HoverCard>
-);
+}) => {
+  const mobileView = (
+    <Group className={classes.hiddenDesktop} grow>
+      <Accordion chevronPosition="right">
+        <Accordion.Item value="explorer_menu">
+          <Accordion.Control className={cx(classes.link)}>
+            <Text fw="bold">Explorer</Text>
+          </Accordion.Control>
+          <Accordion.Panel>
+            <Stack>
+              {explorerFactionLink("german")}
+              {explorerFactionLink("american")}
+              {explorerFactionLink("dak")}
+              {explorerFactionLink("british")}
+            </Stack>
+            <Divider my="sm"></Divider>
+            <Stack>
+              <Text weight={700}>Tools</Text>
+              {explorerToolLink("DPS - Unit Comparison")}
+            </Stack>
+          </Accordion.Panel>
+        </Accordion.Item>
+      </Accordion>
+    </Group>
+  );
+
+  const desktopView = (
+    <Group className={classes.hiddenMobile}>
+      <HoverCard width={800} position="bottom" radius="md" shadow="md" withinPortal>
+        <HoverCard.Target>
+          <Anchor href={"/explorer"} className={cx(classes.link)}>
+            <Group spacing={3}>
+              <Text>Explorer</Text>
+              <IconChevronDown className={classes.hiddenMobile} size={16} />
+            </Group>
+          </Anchor>
+        </HoverCard.Target>
+        <HoverCard.Dropdown sx={{ overflow: "hidden" }}>
+          <Grid gutter={0} columns={2}>
+            <Grid.Col span={1}>
+              <Stack>
+                {explorerFactionLink("german")}
+                {explorerFactionLink("american")}
+                {explorerFactionLink("dak")}
+                {explorerFactionLink("british")}
+              </Stack>
+            </Grid.Col>
+            <Grid.Col span={1}>
+              <Stack>
+                <Text weight={700}>Tools</Text>
+                {explorerToolLink("DPS - Unit Comparison")}
+              </Stack>
+            </Grid.Col>
+          </Grid>
+        </HoverCard.Dropdown>
+      </HoverCard>
+    </Group>
+  );
+
+  return (
+    <>
+      {desktopView}
+      {mobileView}
+    </>
+  );
+};
 
 export default ExplorerMenu;