Reactを使ってブログサイトを作る 05 - Layoutの静的構造の構築

layout/index.js

import { Layout, Menu, Popconfirm } from 'antd'
import {
HomeOutlined,
DiffOutlined,
EditOutlined,
LogoutOutlined,
} from '@ant-design/icons'
import './index.scss'
const { Header, Sider } = Layout
const items = [
  {
label: 'HOME',
key: '1',
icon: <HomeOutlined />,
  },
  {
label: 'Show Article',
key: '2',
icon: <DiffOutlined />,
  },
  {
label: 'New Article',
key: '3',
icon: <EditOutlined />,
  },
]
const GeekLayout = () => {
return (
<Layout>
<Header className="header">
<div className="logo" />
<div className="user-info">
<span className="user-name">Ky</span>
<span className="user-logout">
<Popconfirm title="Quit？" okText="Quit" cancelText="取消">
<LogoutOutlined /> Log out
</Popconfirm>
</span>
</div>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
theme="dark"
defaultSelectedKeys={['1']}
items={items}
style={{ height: '100%', borderRight: 0 }}></Menu>
</Sider>
<Layout className="layout-content" style={{ padding: 20 }}>
          内容
</Layout>
</Layout>
</Layout>
  )
}
export default GeekLayout

layout/index.scss

.ant-layout {
height: 100%;
  }
.header {
padding: 0;
  }
.logo {
width: 200px;
height: 60px;
  }
.layout-content {
overflow-y: auto;
  }
.user-info {
position: absolute;
right: 0;
top: 0;
padding-right: 20px;
color: #fff;
.user-name {
margin-right: 20px;
    }
.user-logout {
display: inline-block;
cursor: pointer;
    }
  }
.ant-layout-header {
padding: 0 !important;
  }

样式调整

• 上記の2つのファイルをインポート後、ページの角に隙間があることに気づき、normalize.cssを使用してページの角に隙間がないようにしました。

  • 1. normalize.cssをインストール

  npm install normalize.css
  

  • 1. コード実装
       

• もう一つの問題は、ページが画面全体に広がっていないことです。全体のCSSを調整してページが画面全体を覆うようにしました。

---