Add side nav and hero icons (#129)

* add side nav component and hero icons

* update file name

* Update dashboard/15-final/app/dashboard/layout.tsx

Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>

* make nav mobile friendly

---------

Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>

dashboard/15-final/app/dashboard/layout.tsx

@@ -1,8 +1,10 @@
+import SideNav from '../ui/dashboard-sidenav';
+
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <div>
-      <div>Dashboard layout</div>
-      <div>{children}</div>
-    </div>
-  )
+	return (
+		<div className="flex h-screen">
+			<SideNav />
+			<div>{children}</div>
+		</div>
+	);
 }

dashboard/15-final/app/layout.tsx

@@ -1,13 +1,12 @@
-import "./globals.css"
-import type { Metadata } from "next"
-import { Inter } from "next/font/google"
-
-const inter = Inter({ subsets: ["latin"] })
+import './globals.css';
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-}
+	title: 'Create Next App',
+	description: 'Generated by create next app'
+};
 
 export default function RootLayout({
   children,

dashboard/15-final/app/ui/dashboard-sidenav.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { UserGroupIcon, HomeIcon, InboxIcon, PowerIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import Image from 'next/image';
+
+export default function SideNav() {
+	const pathname = usePathname();
+
+	const tabs = [
+		{ name: 'Home', href: '/dashboard', icon: HomeIcon },
+		{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
+		{ name: 'Invoices', href: '/dashboard/invoices', icon: InboxIcon }
+	];
+
+	return (
+		<div className="flex flex-col p-1 md:p-4 w-12 md:w-64 border-r h-full">
+			<Link href="/">
+				<Image priority src="/logo.svg" height={80} width={80} alt="Logo" className="mb-4 md:mb-6" />
+			</Link>
+			{tabs.map((tab, i) => {
+				const TabIcon = tab.icon;
+				return (
+					<Link
+						key={i}
+						href={tab.href}
+						className={`mb-2 ${
+							pathname === tab.href ? 'bg-gray-100 text-blue-600' : ' text-gray-600'
+						} hover:text-blue-600 hover:bg-gray-100 flex rounded p-2 text-sm font-semibold`}
+					>
+						<TabIcon className="h-5 w-5 md:mr-2" />
+						<div className="hidden md:block">{tab.name}</div>
+					</Link>
+				);
+			})}
+			<Link
+				href="/login"
+				className="flex mt-auto hover:text-blue-600 rounded p-2 text-sm font-semibold"
+			>
+				<PowerIcon className="h-5 w-5 md:mr-2" />
+				<div className="hidden md:block">Sign Out</div>
+			</Link>
+		</div>
+	);
+}

dashboard/15-final/package-lock.json

@@ -8,6 +8,7 @@
       "name": "15-final",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@types/node": "20.5.7",
         "@types/react": "18.2.21",
         "@types/react-dom": "18.2.7",
@@ -108,6 +109,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -4147,6 +4156,12 @@
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.48.0.tgz",
       "integrity": "sha512-ZSjtmelB7IJfWD2Fvb7+Z+ChTIKWq6kjda95fLcQKNS5aheVHn4IkfgRQE3sIIzTcSLwLcLZUD9UBt+V7+h+Pw=="
     },
+    "@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "requires": {}
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",

dashboard/15-final/package.json

@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@types/node": "20.5.7",
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",