This is the preview of what we are going to build
Here is the live preview of the site and the link to the GitHub repo. This tutorial is part of a series and In this part, we will concentrate only on the website's design.
SETUP
STEP 1
Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use Create Next App.
npx create-next-app my-project
cd my-project
STEP 2
Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.
STEP 3
Add the paths to all of your template files in your tailwind.config.js file.
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [require("tailwind-scrollbar-hide")],
}
STEP 4
Add the @tailwind directives for each of Tailwind’s layers to your ./styles/globals.css file.
@tailwind base;
@tailwind components;
@tailwind utilities;
STEP 5
Clean up the boilerplate code and run the command
npm run dev
If you get stuck at the above steps at any point, refer to this doc
Installing other dependencies
Now before we start, we have a couple of dependencies to download.
"axios": "^0.27.2",
"next": "12.2.2",
"react": "18.2.0",
"react-avatar": "^5.0.1",
"react-dom": "18.2.0",
"react-icons": "^4.4.0",
"react-loading-skeleton": "^3.1.0",
"react-player": "^2.10.1",
"react-tooltip": "^4.2.21",
"tailwind-scrollbar-hide": "^1.1.7"
Add these to your package.json file and run the command npm install
Component structure
Now, inside the <main> tag of the index.js file, we will have these lines of codes:
<main>
<div>
<Header />
<div className='grid grid-cols-7 mt-20'>
<Sidebar />
<Body />
</div>
</div>
</main>
At the root directory, there will be the components folder where we will be creating a new file 'Sidebar.js':
// Sidebar.js
import {Items} from './Data/Items';
function Sidebar({) {
return (
<div className='flex flex-col justify-between ml-2 mr-2 col-span-1 z-10 shadow-sm md:ml-7 md:mr-0':'hidden'>
<ul className="flex flex-col justify-between gap-10 fixed overflow-y-scroll h-[95%]">
{Items && Items.map((item, index) => {
return (
<li className='flex items-center text-center gap-4 transition-none p-3 cursor-pointer hover:text-gray-600 md:p-2'
key={index}
>
{item.icon} {' '}<span className='font-semibold pr-4 hidden lg:block'>{item.name}</span>
</li>
)
})}
</ul>
</div>
)
}
export default Sidebar
Inside the components folder, we will create a new folder called 'data' and create the file 'Items.js'
import {BsHouse, BsCompass, BsController, BsFilm, BsClockHistory, BsCollectionPlay, BsHandThumbsUp, BsLightbulb, BsTrophy, BsGraphUp, BsMusicPlayer, BsGear} from 'react-icons/bs';
export const Items = [
{
name: 'Home',
icon: <BsHouse size={25} />,
},
{
name: 'Explore',
icon: <BsCompass size={25} />,
},
{
name: "Trending",
icon: <BsGraphUp size={25} />
},
{
name: "Subscriptions",
icon: <BsCollectionPlay size={25} />
},
{
name: "Gaming",
icon: <BsController size={25} />
},
{
name: "Films",
icon: <BsFilm size={25} />
},
{
name: "History",
icon: <BsClockHistory size={25} />
},
{
name:"Likes",
icon: <BsHandThumbsUp size={25} />
},
{
name: "Learning",
icon: <BsLightbulb size={25} />
},
{
name: "Sports",
icon: <BsTrophy size={25} />
},
{
name:"Music",
icon: <BsMusicPlayer size={25} />
},
{
name: "Settings",
icon: <BsGear size={25} />
}
]
That will be it for this part, See you soon with the next part.
Top comments (0)