(#8) Styling: Header

betarixm · Mar 29, 2022 · 5a82494 · 5a82494
1 parent f06abe8
commit 5a82494
Show file tree

Hide file tree

Showing 2 changed files with 84 additions and 1 deletion.
diff --git a/layout/Header.module.scss b/layout/Header.module.scss
@@ -0,0 +1,61 @@
+@import "styles/_variables";
+
+$height: 60px;
+
+.nav {
+    height: $height;
+    width: 100%;
+    margin: auto;
+    position: fixed;
+}
+
+.container {
+    @include containerMixin;
+
+    .inner {
+        display: flex;
+        flex: 1 auto;
+        flex-direction: row;
+        align-items: center;
+        height: $height;
+    }
+}
+
+.title {
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    overflow-y: hidden;
+    max-height: 100%;
+    justify-content: flex-end;
+
+    ul {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        margin: 0;
+
+        li {
+            height: 100%;
+            list-style: none;
+            display: flex;
+            align-items: center;
+            padding: 0 8px;
+
+            a {
+                padding: 12px 10px;
+                font-size: 15px;
+                line-height: 20px;
+                color: currentColor;
+                border-radius: 8px;
+                border: 0;
+                cursor: pointer;
+                background-color: transparent;
+                text-decoration: none;
+                text-align: left;
+            }
+        }
+    }
+}
diff --git a/layout/Header.tsx b/layout/Header.tsx
@@ -1,12 +1,34 @@
 import React from "react";
+import Link from "next/link";
+import styles from "./Header.module.scss";
 
 interface HeaderProps {}
 
 interface HeaderState {}
 
 class Header extends React.Component<HeaderProps, HeaderState> {
     render = () => {
-        return <header>Header</header>;
+        return (
+            <nav className={styles.nav}>
+                <div className={styles.container}>
+                    <div className={styles.inner}>
+                        <div className={styles.title}>
+                            <Link href={"/"}>Ponix Bread</Link>
+                        </div>
+                        <div className={styles.content}>
+                            <ul>
+                                <li>
+                                    <Link href={"/draw"}>뽑기</Link>
+                                </li>
+                                <li>
+                                    <Link href={"/collection"}>도감</Link>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        );
     };
 }