Merge pull request #5 from jphacks/feat/2-Header

Header: 概形作成
jphacks · Oct 26, 2024 · 0a34f34 · 0a34f34
2 parents ed392d3 + 1b36797
commit 0a34f34
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 4 deletions.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import "@/styles/style.scss";
 import React from "react";
+import Header from "@/components/Header/Header";
 
 export const metadata: Metadata = {
   title: "websocket sample",
@@ -15,7 +16,7 @@ export default function RootLayout({
   return (
     <html lang="ja">
       <body>
-        <header>header</header>
+        <Header />
         <main>{children}</main>
         <footer>footer</footer>
       </body>

diff --git a/frontend/src/components/Header/Header.module.scss b/frontend/src/components/Header/Header.module.scss
@@ -0,0 +1,36 @@
+.header {
+  z-index: 1000;
+  transition: all 0.3s ease-out;
+}
+
+.headerMain {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.navigationContainer {
+  padding: 8px 0 6px 0;
+  background-color: #f8f8f8;
+  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
+  opacity: 1;
+  transition: all 0.3s ease-out;
+  transform: translateY(0);
+}
+
+.navigation {
+  display: flex;
+  width: 100%;
+  padding: 0 !important;
+}
+
+.logo {
+  padding: 8px 100px 6px 100px;
+}
+
+.userNumber {
+  padding: 8px 100px 6px 100px;
+}
+
+.logoutButton {
+  padding: 8px 0 6px 0;
+}
diff --git a/frontend/src/components/Header/Header.tsx b/frontend/src/components/Header/Header.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./Header.module.scss";
+export default function Header() {
+  return (
+    <header className={styles.header}>
+      <div className={styles.navigationContainer}>
+        <nav className={styles.navigation}>
+          <div className={styles.logo}>ls-chat</div>
+          <div className={styles.userNumber}>users</div>
+          <button className={styles.logoutButton}>logout</button>
+        </nav>
+      </div>
+    </header>
+  );
+}
diff --git a/frontend/src/styles/style.scss b/frontend/src/styles/style.scss
@@ -3,12 +3,12 @@ html {
 }
 
 body {
-  margin: 0;
-  background: white;
   max-width: 700px;
-  margin: 0 auto;
   height: 100vh;
+  margin: 0;
+  margin: 0 auto;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
+  background: white;
 }