概要
今回はヘッダーを実装します。
ディスプレイのサイズに応じて、デザインが変化します。
開発環境
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以下
600-1200 px
1200 px以上
コード部分
Feed
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
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]
max-w-xl
javascript
Next.js
React
firebase
その他
Udemy
githubコミット分