Update navbar and navbar menu responsive design

.env.example

@@ -1 +1,2 @@
 DATABASE_URL=postgres://postgres:password@127.0.0.1:5432/next-dashboard
+ENVIRONMENT=prod

README.md

@@ -8,6 +8,16 @@ Showcase: [website](https://next-dashboard.tzgyn.com) hosted on linode using doc
 -   [Postgres](https://www.postgresql.org/)
 -   [Docker](https://www.docker.com/) to self host
 
+## Environments
+
+Copy .env.example to .env.local before building
+
+```bash
+DATABASE_URL=postgres://{postgres}:{password}@127.0.0.1:5432/next-dashboard
+ENVIRONMENT=prod
+
+```
+
 # Next.js & NextUI Template
 
 This is a template for creating applications using Next.js 13 (app directory) and NextUI (v2).

components/navbar.tsx

@@ -1,6 +1,14 @@
 'use client'
 
 import {
+	Avatar,
+	AvatarIcon,
+	Button,
+	Dropdown,
+	DropdownMenu,
+	DropdownItem,
+	DropdownTrigger,
+	Link,
 	Navbar as NextUINavbar,
 	NavbarContent,
 	NavbarMenu,
@@ -8,16 +16,7 @@ import {
 	NavbarBrand,
 	NavbarItem,
 	NavbarMenuItem,
-} from '@nextui-org/navbar'
+} from '@nextui-org/react'
-import {
-	Dropdown,
-	DropdownMenu,
-	DropdownItem,
-	DropdownTrigger,
-} from '@nextui-org/dropdown'
-import { Avatar, AvatarIcon } from '@nextui-org/avatar'
-import { Link } from '@nextui-org/link'
-import { Button } from '@nextui-org/react'
 
 import { link as linkStyles } from '@nextui-org/theme'
 
@@ -70,24 +69,30 @@ export const Navbar = ({
 							icon={'mdi:bookmark-box'}
 							fontSize={32}
 						/>
-						<p className='font-bold text-inherit'>Dashboard</p>
 					</NextLink>
 				</NavbarBrand>
-				{siteConfig.navItems.map((item) => (
+				{siteConfig.navItems.map((item) => {
-					<NavbarItem
+					if (
-						key={item.href}
+						pathname.startsWith('/dashboard') &&
-						className='hidden sm:flex'>
+						item.label === 'Dashboard'
-						<NextLink
+					)
-							className={clsx(
+						return
-								linkStyles({ color: 'foreground' }),
+					return (
-								'data-[active=true]:font-medium data-[active=true]:text-primary'
+						<NavbarItem
-							)}
+							key={item.href}
-							color='foreground'
+							className='hidden sm:flex'>
-							href={item.href}>
+							<NextLink
-							{item.label}
+								className={clsx(
-						</NextLink>
+									linkStyles({ color: 'foreground' }),
-					</NavbarItem>
+									'data-[active=true]:font-medium data-[active=true]:text-primary'
-				))}
+								)}
+								color='foreground'
+								href={item.href}>
+								{item.label}
+							</NextLink>
+						</NavbarItem>
+					)
+				})}
 				{pathname.startsWith('/dashboard') && (
 					<NavbarItem className='hidden sm:flex'>
 						<Dropdown>
@@ -156,23 +161,23 @@ export const Navbar = ({
 
 			<NavbarMenu>
 				<div className='mx-4 mt-2 flex flex-col gap-2'>
-					{siteConfig.navMenuItems.map((item, index) => (
+					{siteConfig.navMenuItems.map((item, index) => {
-						<NavbarMenuItem key={`${item}-${index}`}>
+						if (
-							<Link
+							pathname.startsWith('/dashboard') &&
-								color={
+							item.label === 'Dashboard'
-									index === 2
+						)
-										? 'primary'
+							return
-										: index ===
+						return (
-										  siteConfig.navMenuItems.length - 1
+							<NavbarMenuItem key={`${item}-${index}`}>
-										? 'danger'
+								<Link
-										: 'foreground'
+									color={'foreground'}
-								}
+									href={item.href}
-								href={item.href}
+									size='lg'>
-								size='lg'>
+									{item.label}
-								{item.label}
+								</Link>
-							</Link>
+							</NavbarMenuItem>
-						</NavbarMenuItem>
+						)
-					))}
+					})}
 					{pathname.startsWith('/dashboard') &&
 						categories.length > 0 &&
 						categories.map((category) => (