NextJs Simple admin Panel /Dashboard with TailwindCss

#nextjs #tailwindcss #javascript #beginners

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. and run on your computer.

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

This admin panel first run dashboard page. First we talk about layout component. After the end we talk about pages.

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]

this Sidebar.js file inside three components. Logo, Nav and SettingButton. If you go Logo component, then you can change logo what you want.

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

part two

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

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.

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

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.