create(navbar) created and styled navbar

components/layout.js

@@ -1,8 +1,9 @@
-import navbar from "./navbar";
+import Navbar from "./navbar";
 
 function Layout({ children }) {
   return (
     <div className="container">
+      <Navbar />
       <div className="children">{children}</div>
     </div>
   );

components/navbar.js

@@ -1,5 +1,43 @@
+import Link from "next/link";
+import { useRouter } from "next/router";
+
 function Navbar() {
-  return <div className="navbar"></div>;
+  const router = useRouter();
+
+  return (
+    <div className="navbar">
+      <h1>Teknoloji Rehberleri</h1>
+      <ul className="navbar_list">
+        <li
+          className={
+            router.asPath == "/"
+              ? "navbar_list-item navbar_list-item--active"
+              : "navbar_list-item"
+          }
+        >
+          <Link href="/">Anasayfa</Link>
+        </li>
+        <li
+          className={
+            router.asPath == "/hakkinda"
+              ? "navbar_list-item navbar_list-item--active"
+              : "navbar_list-item"
+          }
+        >
+          <Link href="/hakkinda"> Site Hakkında </Link>
+        </li>
+        <li
+          className={
+            router.asPath == "/yazigonder"
+              ? "navbar_list-item navbar_list-item--active"
+              : "navbar_list-item"
+          }
+        >
+          <Link href="/yazigonder"> Yazı Gönder </Link>
+        </li>
+      </ul>
+    </div>
+  );
 }
 
 export default Navbar;

styles/abstracts/_variables.scss

@@ -1,5 +1,19 @@
 // COLORS
+:root {
+  --color-background: #292929;
+
+  --color-primary: #fff;
+  --color-tertiary: #468eee;
+
+  --color-grey: #383838;
+  --color-grey-dark-1: #b2aba1;
+  --color-grey-dark-2: #fff;
+}
 
 // FONT CONTROL
+$normal-font-size: 1.4rem;
+$default-font-size: 1.6rem;
+$medium-font-size: 3rem;
+$big-font-size: 5rem;
 
 // OTHER

styles/base/_base.scss

@@ -8,11 +8,13 @@
 
 html {
   font-size: 62.5%; // 1 rem = 10px; 10px/16px = 62.5% (16 is default browser font size)
+  font-family: "NunitoSansRegular", sans-serif;
 }
 
 body {
   box-sizing: border-box;
   padding: 3rem;
+  background-color: var(--color-background);
 }
 
 /*

styles/base/_typography.scss

@@ -0,0 +1,30 @@
+p,
+li {
+  color: var(--color-primary);
+}
+
+h1 {
+  font-size: 2.7rem;
+  color: var(--color-primary);
+}
+
+a {
+  color: var(--color-grey-light-1);
+  text-decoration: none;
+  display: inline-block;
+
+  &::after {
+    content: "";
+    display: block;
+    width: 0;
+    height: 2px;
+    background: var(--color-tertiary);
+    transition: all 0.5s;
+  }
+  &:hover::after {
+    width: 100%;
+  }
+  &:hover {
+    color: var(--color-primary);
+  }
+}

styles/components/navbar.scss

@@ -0,0 +1,37 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+
+  &_list {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+
+    font-size: 2rem;
+    list-style-type: none;
+
+    li:not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    &-item {
+      a:visited,
+      a:link {
+        text-decoration: none;
+        color: var(--color-primary);
+      }
+
+      &--active a {
+        color: var(--color-primary);
+        &:after {
+          content: "";
+          display: block;
+          margin: auto;
+          height: 2px;
+          width: 100%;
+          background-color: var(--color-tertiary);
+        }
+      }
+    }
+  }
+}

styles/globals.scss

@@ -7,3 +7,7 @@
 @import "./base/typography";
 @import "./base/base";
 @import "./base/utilities";
+
+@import "./components/navbar";
+
+@import url("https://fontlibrary.org//face/nunito-sans");

styles/layout/_grid-float.scss

@@ -1,66 +0,0 @@
-.row {
-  max-width: $grid-width;
-  margin: 0 auto;
-
-  &:not(:last-child) {
-    margin-bottom: $gutter-vertical;
-
-    @include respond(tab-port) {
-      margin-bottom: $gutter-horizontal;
-    }
-  }
-
-  @include respond(tab-port) {
-    max-width: 50rem;
-    padding: 0 3rem;
-  }
-
-  @include clearfix;
-
-  [class^="col-"] {
-    float: left;
-
-    &:not(:last-child) {
-      margin-right: $gutter-horizontal;
-
-      @include respond(tab-port) {
-        margin-right: 0;
-        margin-bottom: $gutter-horizontal;
-      }
-    }
-
-    @include respond(tab-port) {
-      width: 100% !important;
-    }
-  }
-
-  .col-1-of-2 {
-    width: calc((100% - #{$gutter-horizontal}) / 2);
-  }
-
-  .col-1-of-3 {
-    width: calc((100% - (2 * #{$gutter-horizontal})) / 3);
-  }
-
-  .col-1-of-4 {
-    width: calc((100% - (3 * #{$gutter-horizontal})) / 4);
-  }
-
-  .col-2-of-3 {
-    width: calc(
-      2 * ((100% - (2 * #{$gutter-horizontal})) / 3) + #{$gutter-horizontal}
-    );
-  }
-
-  .col-2-of-4 {
-    width: calc(
-      2 * ((100% - (3 * #{$gutter-horizontal})) / 4) + #{$gutter-horizontal}
-    );
-  }
-
-  .col-3-of-4 {
-    width: calc(
-      3 * ((100% - (3 * #{$gutter-horizontal})) / 4) + 2 * #{$gutter-horizontal}
-    );
-  }
-}