first commit

components/layout/Layout.js

@@ -0,0 +1,13 @@
+import classes from "./Layout.module.css";
+import MainNavigation from "./MainNavigation";
+
+function Layout(props) {
+  return (
+    <div>
+      <MainNavigation />
+      <main className={classes.main}>{props.children}</main>
+    </div>
+  );
+}
+
+export default Layout;

components/layout/Layout.module.css

@@ -0,0 +1,5 @@
+.main {
+  margin: 3rem auto;
+  width: 90%;
+  max-width: 40rem;
+}

components/layout/MainNavigation.js

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+import classess from './MainNavigation.module.css'
+
+function MainNavigation() {
+  return (
+    <header className={classess.header}>
+      <div className={classess.logo}>Fuzzy Durian</div>
+      <nav  className={classess.nav}>
+        <ul>
+          <li><Link href='/'>Cek Data</Link></li>
+          <li><Link href='/dataset'>Dataset</Link></li>
+          <li><Link href='/penulis'>Penulis</Link></li>
+        </ul>
+      </nav>
+    </header>
+  );
+}
+
+export default MainNavigation;

components/layout/MainNavigation.module.css

@@ -0,0 +1,61 @@
+.header {
+  width: 100%;
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #77002e;
+  padding: 0 10%;
+}
+
+.logo {
+  font-size: 2rem;
+  color: white;
+  font-weight: bold;
+}
+
+.header ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: baseline;
+}
+
+.header li {
+  margin-left: 3rem;
+}
+
+.header a {
+  text-decoration: none;
+  font-size: 1.5rem;
+  color: #fcb8d2;
+}
+
+.header a:hover,
+.header a:active,
+.header a.active {
+  color: white;
+}
+
+.badge {
+  background-color: #cc2062;
+  color: white;
+  border-radius: 12px;
+  padding: 0 1rem;
+  margin-left: 0.5rem;
+}
+
+/*  if display < 600px then hide logo */
+@media screen and (max-width: 600px) {
+  .header .logo {
+    display: none;
+  }
+  
+  /*  set the li from left to right */
+  .header li {
+    margin-left: 0;
+    /* add  space between li */
+    margin-right: 1rem;
+  }
+}