michi.vonah/nextjs
1
0
Fork 0
mirror of https://github.com/michivonah/nextjs.git synced 2025-12-22 22:16:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

dashboard layout + implement page navigation + docs

Browse source
This commit is contained in:
Michi 2025-04-19 15:03:37 +02:00
parent aa734325b4
commit aea677e6f7
6 changed files with 116 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
dashboard-app-course/app/dashboard/customers/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page(){
return <p>Customers Page</p>
}

3
dashboard-app-course/app/dashboard/invoices/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page(){
return <p>Invoices Page</p>;
}

14
dashboard-app-course/app/dashboard/layout.tsx Normal file
View file

@ -0,0 +1,14 @@
import SideNav from "@/app/ui/dashboard/sidenav";
export default function Layout({children}: {children: React.ReactNode}){
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">
{ children }
</div>
</div>
);
}

3
dashboard-app-course/app/dashboard/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page(){
return <p>Dashboard page</p>;
}

18
dashboard-app-course/app/ui/dashboard/nav-links.tsx
View file

@ -1,8 +1,13 @@
'use client';
import {
UserGroupIcon,
HomeIcon,
DocumentDuplicateIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import {usePathname} from 'next/navigation';
import clsx from 'clsx';
// Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database.
@ -17,19 +22,26 @@ const links = [
];
export default function NavLinks() {
const pathname = usePathname();
return (
<>
{links.map((link) => {
const LinkIcon = link.icon;
return (
<a
<Link
key={link.name}
href={link.href}
className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
className={clsx(
"flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3",
{
'bg-sky-100 text-blue-600': pathname === link.href,
},
)}
>
<LinkIcon className="w-6" />
<p className="hidden md:block">{link.name}</p>
</a>
</Link>
);
})}
</>