Improve responsiveness header (#250)

frontend/src/components/navbar/_brand.tsx

@@ -12,16 +12,14 @@ export function Brand() {
       })}
     >
       <Group position="apart" ml="1rem">
-        <UnstyledButton>
+        <UnstyledButton
+          onClick={async () => {
+            await router.push('/');
+          }}
+        >
           <Group>
             <Image src="/favicon.svg" width="40px" height="40px" mt="-0.5rem" />
-            <Title
-              onClick={async () => {
-                await router.push('/');
-              }}
-            >
-              Bracket
-            </Title>
+            <Title>Bracket</Title>
           </Group>
         </UnstyledButton>
       </Group>

frontend/src/pages/_layout.tsx

@@ -3,7 +3,7 @@ import {
   AppShell,
   Burger,
   Container,
-  Grid,
+  Group,
   Header,
   Menu,
   Text,
@@ -13,7 +13,6 @@ import {
   useMantineColorScheme,
   useMantineTheme,
 } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
 import { FaGithub } from '@react-icons/all-files/fa/FaGithub';
 import { IconMoonStars, IconSun } from '@tabler/icons-react';
 import { useRouter } from 'next/router';
@@ -86,29 +85,28 @@ interface HeaderActionProps {
     icon?: Component | null;
     links?: { link: string; label: string; icon?: ReactNode }[] | null;
   }[];
+  navbarState: any;
 }
-export function HeaderAction({ links }: HeaderActionProps) {
+export function HeaderAction({ links, navbarState }: HeaderActionProps) {
   const { classes } = useStyles();
-  const router = useRouter();
+
+  const [opened, { toggle }] = navbarState != null ? navbarState : [false, { toggle: () => {} }];
   const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-  const [opened, { toggle }] = useDisclosure(false);
+  const router = useRouter();
 
   const items = links.map((link) => {
-    const menuItems = link.links?.map((item) => (
-      <Menu.Item
-        key={item.link}
-        onClick={async () => {
-          await router.push(item.link);
-        }}
-      >
-        <Container>
-          <span>{item.icon}</span>
-          <span style={{ marginLeft: '0.25rem' }}>{item.label}</span>
-        </Container>
-      </Menu.Item>
-    ));
-
-    if (menuItems) {
+    if (link.links) {
+      const menuItems = link.links?.map((item) => (
+        <UnstyledButton
+          key={item.label}
+          className={classes.link}
+          onClick={async () => {
+            await router.push(item.link);
+          }}
+        >
+          {item.label}
+        </UnstyledButton>
+      ));
       return (
         <Menu key={link.label} trigger="hover" transitionProps={{ exitDuration: 0 }} withinPortal>
           <Menu.Target>
@@ -133,7 +131,6 @@ export function HeaderAction({ links }: HeaderActionProps) {
 
     return (
       <UnstyledButton
-        mr="1rem"
         key={link.label}
         className={classes.link}
         onClick={async () => {
@@ -145,29 +142,30 @@ export function HeaderAction({ links }: HeaderActionProps) {
     );
   });
   return (
-    <Header height={{ base: HEADER_HEIGHT, md: HEADER_HEIGHT }}>
-      <Burger opened={opened} onClick={toggle} className={classes.burger} size="sm" mt="0.5rem" />
-      <Grid>
-        <Grid.Col span={4}>
+    <Header height={HEADER_HEIGHT} sx={{ borderBottom: 0 }} mb={120}>
+      <Container className={classes.inner} fluid>
+        <Group>
+          <Burger
+            opened={opened}
+            onClick={toggle}
+            className={classes.burger}
+            size="sm"
+            mt="0.5rem"
+          />
           <Brand />
-        </Grid.Col>
-        <Grid.Col span={4} offset={4}>
-          <Container className={classes.inner} fluid style={{ justifyContent: 'end' }}>
-            {items}
-            {/*<Button radius="xl" h={30}>*/}
-            {/*  Get early access*/}
-            {/*</Button>*/}
-            <ActionIcon variant="default" onClick={() => toggleColorScheme()} size={30} ml="1rem">
-              {colorScheme === 'dark' ? <IconSun size={16} /> : <IconMoonStars size={16} />}
-            </ActionIcon>
-          </Container>
-        </Grid.Col>
-      </Grid>
+        </Group>
+        <Group spacing={5} className={classes.links}>
+          {items}
+          <ActionIcon variant="default" onClick={() => toggleColorScheme()} size={30} ml="1rem">
+            {colorScheme === 'dark' ? <IconSun size={16} /> : <IconMoonStars size={16} />}
+          </ActionIcon>
+        </Group>
+      </Container>
     </Header>
   );
 }
 
-export default function Layout({ children, navbar }: any) {
+export default function Layout({ children, navbar, navbarState }: any) {
   const theme = useMantineTheme();
 
   return (
@@ -180,7 +178,7 @@ export default function Layout({ children, navbar }: any) {
       layout="default"
       navbarOffsetBreakpoint="sm"
       asideOffsetBreakpoint="sm"
-      header={<HeaderAction links={LINKS} />}
+      header={<HeaderAction links={LINKS} navbarState={navbarState} />}
       navbar={navbar}
     >
       {children}

frontend/src/pages/tournaments/_tournament_layout.tsx

@@ -1,5 +1,6 @@
 import { Navbar } from '@mantine/core';
-import React, { useState } from 'react';
+import { useDisclosure } from '@mantine/hooks';
+import React from 'react';
 
 import { MainLinks } from '../../components/navbar/_main_links';
 import { checkForAuthError, getTournaments } from '../../services/adapter';
@@ -7,7 +8,7 @@ import Layout from '../_layout';
 
 function NavBar({ navBarOpened, links }: any) {
   return (
-    <Navbar p="md" width={{ base: 80 }} hidden={!navBarOpened} hiddenBreakpoint="sm">
+    <Navbar p="md" width={{ sm: 80 }} hidden={!navBarOpened} hiddenBreakpoint="sm">
       {links == null ? (
         <Navbar.Section grow>
           <div />
@@ -21,7 +22,8 @@ function NavBar({ navBarOpened, links }: any) {
 
 export default function TournamentLayout({ children, tournament_id }: any) {
   const tournament = getTournaments();
-  const [navBarOpened] = useState(false);
+  const disclosure = useDisclosure(false);
+  const [opened] = disclosure;
   checkForAuthError(tournament);
   const links = (
     <Navbar.Section grow>
@@ -31,7 +33,9 @@ export default function TournamentLayout({ children, tournament_id }: any) {
 
   return (
     <>
-      <Layout navbar={<NavBar navBarOpened={navBarOpened} links={links} />}>{children}</Layout>
+      <Layout navbarState={disclosure} navbar={<NavBar navBarOpened={opened} links={links} />}>
+        {children}
+      </Layout>
     </>
   );
 }