twitter clone Part1　サイドバー作成

# 概要
今回はサイドバーを実装します。
ミニプロファイルの情報は現時点ではソースコードに直打ちです。

以下gifアニメ実装後の様子です。

![twitterSidebar１１.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/76b37426-4b4a-e4b0-4b6c-0f803ba9af1b.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"
  }
}
```

# 実装のポイント



## レスポンシブ対応
### 600px以下
元のdivでhiddenになるので全て非表示になる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/42cacda2-c337-b357-4749-745256f99c82.png)

### 600 - 1200 px

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/e3809d34-dbe5-359e-7bbf-29b7cf88e503.png)

### 1200以上
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/42911969-535a-6c35-6459-a4dc5e8f7ee0.png)



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


// サイドバーアイテム
// 600px-1200px 文字とアイコンを表示する
// 1200px以上　アイコンのみ
// 引数にactiveが指定されている場合文字が強調される

export default function SidebarMenuItem({text, Icon, active}){
    return (
        <div className="hoverEffect flex items-center text-gray-700 justify-center xl:justify-start text-lg space-x-3">
            <Icon className="h-7"  />
            <span className={`${active && "font-bold"} hidden xl:inline`}>{text}</span>
        </div>
    );
}

```



## Sidebar
```diff_jsx:Sidebar.jsx

import Image from "next/image";
import{HomeIcon} from "@heroicons/react/solid";
import{BellIcon,ClipboardIcon,DotsCircleHorizontalIcon,DotsHorizontalIcon,HashtagIcon,InboxIcon,UserIcon,BookmarkIcon} from "@heroicons/react/outline";
import SidebarMenuItem from "./SidebarMenuItem";

// サイドバーコンポーネント
// 600px-1200px 文字とアイコンを表示する
// 1200px以上　アイコンのみ

export default function Sidebar(){
    return(
        <div className="hidden sm:flex flex-col p2 xl:items-start fixed h-full">
            {/* ツイッター　ロゴ */}
            <div className="hoverEffect p-0 hover:bg-blue-100 xl:px-1">
                <Image
                    width="50"
                    height="50"
                    src="https://help.twitter.com/content/dam/help-twitter/brand/logo.png"
                ></Image>
            </div>
            {/* メニュー */}
            {/* 600-1200pxの場合アイコンのみになり、横幅が均一になるのでitems-startで左端揃えする必要がない */}
            <div className="mt-4 mb-2.5 xl;items-start">
                <SidebarMenuItem text="Home" Icon={HomeIcon} active/>
                <SidebarMenuItem text="Explore" Icon={HashtagIcon} />
                <SidebarMenuItem text="Notifications" Icon={BellIcon} />
                <SidebarMenuItem text="Messages" Icon={InboxIcon} />
                <SidebarMenuItem text="Bookmarks" Icon={BookmarkIcon} />
                <SidebarMenuItem text="Lists" Icon={ClipboardIcon} />
                <SidebarMenuItem text="Profile" Icon={UserIcon} />
                <SidebarMenuItem text="More" Icon={DotsCircleHorizontalIcon} />
            </div>
            {/* ボタン */}
            <button className="bg-blue-400 text-white rounded-full w-56 h-12 font-bold shadow-md hover::brightness-95 text-lg hidden xl:inline">Tweet</button>

            {/* ミニプロファイル */}
            <div>
                <img
                    src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/profile-images/1655538932"
                    alt="user-img"
                    className="h-10 w-10 rounded-full xl:mr-2"
                />
                <div className="loading-5 hidden xl:inline">
                    <h4 className="font-bold">RYA234</h4>
                    <p className="text-gray-500">@RYA234</p>
                </div>
                <DotsHorizontalIcon  className="h-5 xl:ml-8 hidden xl:inline"/>
            </div>
        </div>
    )
}
```




# 参考

## css

### flex items-start

https://tailwindcss.com/docs/align-items

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/d1eb4b33-28c2-bc45-fa94-c447911eed67.png)



## その他

### 


### heroicons

#### Github

https://github.com/tailwindlabs/heroicons

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2710623/b861cc2c-74ca-a6d5-43cd-8dc887c20c61.png)


#### アイコン集

https://heroicons.com/





Udemy

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

githubコミット分


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