Merge pull request #8 from hsipl/LayoutIndent

Indent layout and modify inline style of the Header to class

src/pages/BasicLayout.jsx

@@ -8,13 +8,18 @@ export const BasicLayout = () => {
   return (
     <Layout style={{ minHeight: "100vh" }}>
       <div style={{ position: "fixed", width: "100%" }}>
-        <Header style={{ color: "#F2F2F7" }}>
+        <Header style={{ color: "#F2F2F7", padding: 0 }}>
           <HeaderMenu />
         </Header>
         <HeaderSearch />
       </div>
       <Layout style={{ paddingTop: "128px" }}>
-        <Content>
+        <Content
+          style={{
+            paddingLeft: "calc((100vw - 1440px)/2 + 64px)",
+            paddingRight: "calc((100vw - 1440px)/2 + 64px)",
+          }}
+        >
           <Outlet />
         </Content>
         <Footer

src/views/Header/Header.css

@@ -0,0 +1,71 @@
+.header-menu {
+  display: grid;
+  flex: 1;
+  grid-template-columns: auto auto;
+  padding-left: calc((100vw - 1440px) / 2 + 64px);
+  padding-right: calc((100vw - 1440px) / 2 + 64px);
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.header-right {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 240px;
+}
+
+.left-menu {
+  width: 100%;
+}
+
+.right-menu-dropdown {
+  position: relative;
+  display: flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  align-items: center;
+  padding: 0 12px;
+  cursor: pointer;
+}
+
+.header-search {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 4px 64px;
+  min-height: 64px;
+  background-color: rgba(240, 242, 245);
+  padding-left: calc((100vw - 1440px) / 2 + 64px);
+  padding-right: calc((100vw - 1440px) / 2 + 64px);
+  box-shadow: inset 0 -1px 0 0 #e0e1e1;
+}
+
+.header-search-logo {
+  display: flex;
+  flex: 1;
+  flex-grow: row nowrap;
+  align-items: center;
+}
+
+.header-search-product-dropdown {
+  max-width: 1200px;
+  position: relative;
+  display: flex;
+  flex: 1;
+  margin: 0px 48px;
+}
+
+.header-search-sell-button {
+  display: flex;
+  align-items: center;
+}

src/views/Header/HeaderMenu.jsx

@@ -2,34 +2,15 @@ import React from "react";
 import { LeftMenu } from "./LeftMenu";
 import { RightMenu } from "./RightMenu";
 
+import "./Header.css";
+
 export const HeaderMenu = () => {
   return (
-    <div
-      style={{
-        display: "grid",
-        flex: "1",
-        gridTemplateColumns: "auto auto",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-start",
-          overflow: "hidden",
-        }}
-      >
+    <div className="header-menu">
+      <div className="header-left">
         <LeftMenu />
       </div>
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          flexGrow: 1,
-          flexShrink: 1,
-          flexBasis: "240px",
-        }}
-      >
+      <div className="header-right">
         <RightMenu />
       </div>
     </div>

src/views/Header/HeaderSearch.jsx

@@ -1,6 +1,7 @@
 import { DownOutlined } from "@ant-design/icons";
 import { Button, Dropdown, Input, Menu, Space, Typography } from "antd";
 import React from "react";
+import "./Header.css";
 
 const menu = () => {
   const handleMenuClick = (e) => {
@@ -27,26 +28,8 @@ export const HeaderSearch = () => {
   const onSearch = (value) => console.log(value);
 
   return (
-    <div
-      style={{
-        position: "relative",
-        display: "flex",
-        flexFlow: "row nowrap",
-        alignItems: "stretch",
-        justifyContent: "space-between",
-        padding: "4px 64px",
-        minHeight: "64px",
-        backgroundColor: "rgba(240, 242, 245)", // set backgroundColor same as content
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          flex: 1,
-          flexGrow: "row nowrap",
-          alignItems: "center",
-        }}
-      >
+    <div className="header-search">
+      <div className="header-search-logo">
         <div>
           <Typography.Title
             level={3}
@@ -55,15 +38,7 @@ export const HeaderSearch = () => {
             HSIPLSELL
           </Typography.Title>
         </div>
-        <div
-          style={{
-            maxWidth: "1200px",
-            position: "relative",
-            display: "flex",
-            flex: 1,
-            margin: "0px 48px",
-          }}
-        >
+        <div className="header-search-product-dropdown">
           <Dropdown overlay={menu}>
             <Button>
               <Space>
@@ -79,7 +54,7 @@ export const HeaderSearch = () => {
           />
         </div>
       </div>
-      <div style={{ display: "flex", alignItems: "center" }}>
+      <div className="header-search-sell-button">
         <Button>
           <Space>出售</Space>
         </Button>

src/views/Header/LeftMenu.jsx

@@ -1,5 +1,6 @@
 import { Menu } from "antd";
 import React from "react";
+import "./Header.css";
 
 const leftMenus = [
   {
@@ -34,7 +35,7 @@ export const LeftMenu = () => {
       theme="dark"
       mode="horizontal"
       items={leftMenus}
-      style={{ width: "100%" }}
+      className="left-menu"
     />
   );
 };

src/views/Header/RightMenu.jsx

@@ -7,6 +7,7 @@ import {
 } from "@ant-design/icons";
 import { Dropdown, Menu } from "antd";
 import React from "react";
+import "./Header.css";
 
 const rightMenus = [
   {
@@ -45,19 +46,7 @@ export const RightMenu = () => {
   return (
     <>
       <Dropdown overlay={userMenus}>
-        <a
-          onClick={(e) => e.preventDefault()}
-          style={{
-            position: "relative",
-            display: "flex",
-            flexGrow: 0,
-            flexShrink: 0,
-            flexBasis: "auto",
-            alignItems: "center",
-            padding: "0 12px",
-            cursor: "pointer",
-          }}
-        >
+        <a onClick={(e) => e.preventDefault()} className="right-menu-dropdown">
           Hi, Yuchi
         </a>
       </Dropdown>