ナビゲーションヘッダー作成

ナビゲーションヘッダー作成する。

> https://atom.io/
> ![スクリーンショット 2020-11-17 23.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/38210dc2-1206-f595-e142-675a385a9900.png)


## ナビゲーションの土台を作成

```css
.navigation {
    background-color: #584b4f;
    color: #efeae1;
    height: 43px;
}
```

```react
import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                
            </nav>
        </>
    )
}
```
↓こうなる
![スクリーンショット 2020-11-17 23.14.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/2fcc754d-10ec-1d59-c955-cc413732cd24.png)


## メニューの作成

```css
.wrapper {
    margin: 0 auto;
}
```

```react
import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li>Hoge</li>
                        <li>Fuga</li>
                        <li>Piyo</li>
                    </ul>
                </div>
            </nav>
        </>
    )
}
```

↓こうなる
![スクリーンショット 2020-11-17 23.18.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/78fe70e1-7d20-ae0e-2ff9-2c9f05441e4c.png)



## メニューを横並びにする
・ul要素をinline-blockにすることで横並びにする

```css

.navigation {
    background-color: #584b4f;
    height: 43px;
    padding: 5px 0;
    font-size: 14px;
}

.wrapper {
    margin: 0 auto;
    width: 860px;
}

.navigation ul {
    display : inline-block;
    padding: 0;
    margin: 0;
}

.navigation li {
    display : inline-block;
    padding-right: 10px;
}

.navigation a {
    display: inline-block;
    padding: 5px;
    text-decoration: none;
    color: #efeae1;
}
```

```react
import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>
                </div>
            </nav>
        </>
    )
}
```


![スクリーンショット 2020-11-17 23.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/2a136900-3978-9bdf-216e-17303aa263d0.png)


## 右側にSign inボタンつける
・右側用のdivにfloat: rightをつけることで右端まで要素が移動する

```css
.navigation-right {
    float: right;
}

.navigation-right a {
    padding: 5px;
    text-decoration: none;
    color: efeae1;
}
```

```react
import React from 'react';
import './AtomPage.css';

export const AtomPage = () => {
    return (
        <>
            <nav className="navigation">
                <div className="wrapper">
                    <ul>
                        <li><a href="">Hoge</a></li>
                        <li><a href="">Fuga</a></li>
                        <li><a href="">Piyo</a></li>
                    </ul>

                    <div className="navigation-right">
                        <a href="">Sign in</a>
                    </div>
                </div>
            </nav>
        </>
    )
}
```

![スクリーンショット 2020-11-17 23.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/278474/6453a273-87d8-5739-e6f6-7b9e776e970e.png)