first commit

components/header/Header.jsx

@@ -0,0 +1,12 @@
+import { HStack } from '@chakra-ui/react';
+import { Logo } from './Logo';
+import { Navigation } from './Navigation';
+
+export function Header() {
+  return (
+    <HStack justify="space-between">
+      <Logo />
+      <Navigation />
+    </HStack>
+  );
+}

components/header/Logo.jsx

@@ -0,0 +1,20 @@
+import NextLink from 'next/link';
+import { Heading, HStack } from '@chakra-ui/react';
+import { DraughtsCrown } from '../draughts/board/views/DraughtsCrown';
+
+export function Logo() {
+  return (
+    <NextLink href="/" passHref>
+      <HStack as="a">
+        <DraughtsCrown
+          bg="black"
+          padding={1}
+          borderRadius="50%"
+          height="1.5em"
+          width="1.5em"
+        />
+        <Heading fontSize="2xl">Givan Checkers</Heading>
+      </HStack>
+    </NextLink>
+  );
+}

components/header/Navigation.jsx

@@ -0,0 +1,77 @@
+import { useRef } from 'react';
+import {
+  HStack,
+  VStack,
+  IconButton,
+  Link,
+  useDisclosure,
+  Drawer,
+  DrawerBody,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerCloseButton,
+  DrawerHeader,
+} from '@chakra-ui/react';
+import { HamburgerIcon } from '@chakra-ui/icons';
+
+const pages = [
+  {'url':'rules','name' : 'Peraturan'},
+  {'url':'strategies','name': 'Strategi'}, 
+  {'url':'history','name':'Sejarah'}
+];
+
+export function Navigation() {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const btnRef = useRef();
+  return (
+    <>
+      <HStack as="nav" display={['none', 'none', 'block']} spacing={[2, 2, 4]}>
+        {pages.map((page) => (
+          <Link
+            key={`navlink-desktop-${page.url}`}
+            fontSize="lg"
+            fontWeight="bold"
+            href={`/${page.url}`}
+          >
+            {page.name}
+          </Link>
+        ))}
+      </HStack>
+      <IconButton
+        ref={btnRef}
+        display={['block', 'block', 'none']}
+        aria-label="Open Menu"
+        icon={<HamburgerIcon />}
+        onClick={onOpen}
+        size="sm"
+      />
+      <Drawer
+        finalFocusRef={btnRef}
+        isOpen={isOpen}
+        onClose={onClose}
+        placement="right"
+        size="xs"
+      >
+        <DrawerOverlay />
+        <DrawerContent>
+          <DrawerCloseButton />
+          <DrawerHeader>Explore</DrawerHeader>
+          <DrawerBody>
+            <VStack as="nav">
+              {pages.map((page) => (
+                <Link
+                  key={`navlink-mobile-${page}`}
+                  fontSize="lg"
+                  fontWeight="bold"
+                  href={`/${page}`}
+                >
+                  {page}
+                </Link>
+              ))}
+            </VStack>
+          </DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    </>
+  );
+}