Twitter clone Part2　ヘッダー作成

# 概要
今回はヘッダーを実装します。
ディスプレイのサイズに応じて、デザインが変化します。

![twitterHeader111.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/b3ef1ee6-6898-5f6c-ecf7-23f87f742bbf.gif)




# 開発環境

OS:Windows10
IDE:VSCode


```package.json
{
  "name": "",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@heroicons/react": "^1.0.6",
    "next": "12.0.9",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "^20.4.2",
    "@types/react": "^18.2.15",
    "autoprefixer": "^10.4.2",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.9",
    "postcss": "^8.4.5",
    "tailwindcss": "^3.0.18"
  }
}
```

# 実装のポイント

## レスポンス対応

ディスプレイサイズ|Left-margin|ヘッダーの幅
----|----|---
1200px以上|370px|一定(576px)
600~1200px|73px|一定(576px)
600px以下|0px|可変


### 600 px以下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d1ba7327-fccf-c861-391e-1490efed60f9.png)

### 600-1200 px
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/94c4e640-585c-b3fc-c9b6-255f94054ec0.png)


### 1200 px以上

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/54f3d75e-bdf4-4335-e8dc-9c1a6ba2f728.png)



# コード部分
## Feed
```diff_jsx:Feed.jsx

import { SparklesIcon} from "@heroicons/react/solid";

export default function Feed(){
    return(
        <div className="xl:ml-[370px] border-1 border-r border-gray-200 xl:min-w-[576px] sm:ml-[73px] flex-grow max-w-xl">
            <div className="flex py-2 px-3 sticky top-0 z-50 bg-white border-b border-gray-200">
                <h2 className="text-lg sm:text-xl font-bold cursor-pointer">Home</h2>
                <div className="hoverEffect flex items-center justify-center px-0 ml-auto w-9 h-9">
                    <SparklesIcon className="h-5"/>
                </div>
            </div>
        </div>
    )
}

```

## index
```diff_jsx:index.jsx
import Head from 'next/head'
import Image from 'next/image'
import Sidebar from '../components/Sidebar'
import Feed from '../components/Feed'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Twitter Clone</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className="flex min-h-screen max-w-7xl mx-auto">
        {/* Header */}

        {/* Sidebar */}
        <Sidebar />


        {/* Feed */}
+        <Feed/>
        {/* Modal */}
      </main>
    </div>
  )
}
```



# 参考

## css

### ml-[〇〇px]

https://tailwindcss.com/docs/margin

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/c0b8fab9-7471-1073-aecf-a8fce5cc308d.png)

### max-w-xl

https://tailwindcss.com/docs/max-width


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d443294e-eb8e-7fac-0e75-9d7c85634b75.png)

## javascript

## Next.js

## React

## firebase

## その他

Udemy

https://www.udemy.com/course/react-js-tutorial/learn/lecture/31192334#overview

githubコミット分

https://github.com/RYA234/twitter-clone/commit/ff9cafbeab2efd1cab7f10aae35308abfb9bba18