[#4] feat: MenuItem component added

damla · Nov 22, 2020 · 29e1d5f · 29e1d5f
1 parent beebfd5
commit 29e1d5f
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 35 deletions.
diff --git a/components/layout/nav-bar/nav-bar.component.jsx b/components/layout/nav-bar/nav-bar.component.jsx
@@ -1,29 +1,21 @@
-import Link from "next/link";
-
 import Menu from "../../menu/menu.component";
 import Logo from "../../logo/logo.component";
+import MenuItem from "../../menu-item/menu-item.component";
 
 import "./nav-bar.styles.scss";
 
 export default function NavBar() {
   return (
     <nav className="navbar-container">
       <Menu align="left">
-        <Link href="/hakkımızda" className="menu-item">
-          HAKKIMIZDA
-        </Link>
-        <Link href="/iletişim" className="menu-item">
-          İLETİŞİM
-        </Link>
+        <MenuItem href="/hakkımızda">HAKKIMIZDA</MenuItem>
+
+        <MenuItem href="/iletişim">İLETİŞİM</MenuItem>
       </Menu>
-      <Logo />
+      <Logo width="150" height="50" />
       <Menu align="right">
-        <Link href="/fabrika" className="menu-item">
-          FABRİKA
-        </Link>
-        <Link href="/katalog" className="menu-item">
-          KATALOG
-        </Link>
+        <MenuItem href="/fabrika">FABRİKA</MenuItem>
+        <MenuItem href="/katalog">KATALOG</MenuItem>
       </Menu>
     </nav>
   );

diff --git a/components/logo/logo.component.jsx b/components/logo/logo.component.jsx
@@ -3,15 +3,16 @@ import Image from "next/image";
 
 import "./logo.styles.scss";
 
-export default function Logo() {
+export default function Logo({ width, height }) {
   return (
-    <Link className="logo-container" href="/">
+    <Link href="/">
       <Image
         className="logo"
         src="/assets/images/karsal-logo.png"
         alt="karsal-logo"
-        width={200}
-        height={60}
+        width={width}
+        height={height}
+        layout="fixed"
       />
     </Link>
   );

diff --git a/components/logo/logo.styles.scss b/components/logo/logo.styles.scss
@@ -1,7 +1,5 @@
-.logo-container {
-  .logo {
-    &:hover {
-      opacity: 0.7;
-    }
+.logo {
+  &:hover {
+    opacity: 0.7;
   }
 }
diff --git a/components/menu-item/menu-item.component.jsx b/components/menu-item/menu-item.component.jsx
@@ -0,0 +1,10 @@
+import Link from "next/link";
+import "./menu-item.styles.scss";
+
+export default function MenuItem({ href, children }) {
+  return (
+    <Link href={href}>
+      <a className="menu-item">{children}</a>
+    </Link>
+  );
+}
diff --git a/components/menu-item/menu-item.styles.scss b/components/menu-item/menu-item.styles.scss
@@ -0,0 +1,10 @@
+.menu-item {
+  color: white;
+  font-weight: 300;
+  font-size: 1.2rem;
+
+  &:hover {
+    color: black;
+    text-decoration: underline;
+  }
+}
diff --git a/components/menu/menu.styles.scss b/components/menu/menu.styles.scss
@@ -3,17 +3,6 @@ $margin-between-links: 1.7rem;
 .menu-container {
   display: flex;
 
-  .menu-item {
-    color: white;
-    font-weight: 600;
-    font-size: 1.2rem;
-
-    &:hover {
-      color: black;
-      text-decoration: underline;
-    }
-  }
-
   &__left {
     flex-direction: row;