NextJs Simple admin Panel /Dashboard with TailwindCss
Tags: nextjs, tailwindcss, javascript, beginners
Published: 2022-04-05 20:34:23

Today I am talking about the template for the admin panel. When new learning developer working on admin panel for backend work for his learning. That times he does not find out simple admin panel. There is a lot of admin panel on the internet. You can easily find out. But This admin panel has a lot of components. This component getting a little bit difficult to handle admin panel for a new developer who is just learning. 

That's why I am showing a simple admin panel for a new developer. This admin panel you can easily handle. It has a few components. You can add more components when you need. Below is a detailed discussion of this admin panel

clone/download this admin panel on this github [Link](https://github.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss). and run on your computer.

Now go to pages folder and open index.js file. you can see below image

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm3ara3llq7amqesby61.png)
This admin panel first run dashboard page. First we talk about layout component. After the end we talk about pages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mntjm2uthy3w76zf8d8s.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vysoml6jdnex9cgxjij2.png)

go to layout component [components/layout/Layout.js]. this file we can see Three component Sidebar, Header, and Footer Component. First we see Sidebar component. crt with click Sidebar  component or go to  [components/layout/Sidebar.js]

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f6rbrutmdxxu0lixoey.png)
this Sidebar.js file inside three components. Logo, Nav and SettingButton. If you go Logo component, then you can change logo what you want.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vabtwyx1vlwbbia85gb6.png)

go to Nav component [components/layout/sidebar/Nav.js]. this file, we can see little bit long code. Don't worry, it is simple code.  I will discuss step by step.

## part one
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7im44fkxfccf420oyif.png)

## part two

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsxnlsohtmzcuzfod0he.png)

Nav.js file, you will see Nav Item component. This NavItem is separate single menu. you just pass some props. Like as page link, menu title and menu logo.
if you need menu under child menu then props subMenu will be true and pass array into subMenuArray props

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqdpg2bpljqn11h1wlaz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/arajvj7i3j82nlonrtfk.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ld86c27qg7xld0q4d7h.png)
That's all sidebar components. Now we will see Header and Footer Component.

When you go Header component [components/layout/Header.js]. This file you will see Four components. Search Box, UserMenu, Notifications and LogOutButton component. You can change easily what ever you want.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apr0c6wrnhxk9y58aho1.png)

Now, we talk about pages. Go pages folder and open index.js. this file has Dashboard component

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ixs4n7v6akggly1r8q49.png)

click Dashboard component or go to components/dashboard/Dashboard.js file and open. you will see main div.  this main div under you can change what ever you want. same as category and other pages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckxnnlxmellfg4xv8qvn.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wo8yllc1vfl1hbc12g1w.png)

## Mobile responsive view

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/si2bron84ojbeppc2cnd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bj48t9zrc6gpduswknv6.png)

That's all. Happy Learning :) .
[if it is helpful, giving a star to the repository 😇]
https://github.com/kamruzzamanripon/nextjs-admin-panel-with-tailwindcss