Fix app router features (#42)

- Fix unnecessary use of parallels routes for a "header" layout title and replace it with a simple component "Header"
- Convert useRouter().pathname to usePathname according to documentation (useRouter().pathname was undefined and the active props of NavLInk weren't working).

src/app/(app)/Header.js

@@ -0,0 +1,14 @@
+const Header = ({ title }) => {
+    return (
+        <header className="bg-white shadow">
+            <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
+
+                <h2 className="font-semibold text-xl text-gray-800 leading-tight">
+                    {title}
+                </h2>
+            </div>
+        </header>
+    )
+}
+
+export default Header

src/app/(app)/Navigation.js

@@ -7,12 +7,10 @@ import ResponsiveNavLink, {
 } from '@/components/ResponsiveNavLink'
 import { DropdownButton } from '@/components/DropdownLink'
 import { useAuth } from '@/hooks/auth'
-import { useRouter } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 import { useState } from 'react'
 
 const Navigation = ({ user }) => {
-    const router = useRouter()
-
     const { logout } = useAuth()
 
     const [open, setOpen] = useState(false)
@@ -34,7 +32,7 @@ const Navigation = ({ user }) => {
                         <div className="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                             <NavLink
                                 href="/dashboard"
-                                active={router.pathname === '/dashboard'}>
+                                active={usePathname() === '/dashboard'}>
                                 Dashboard
                             </NavLink>
                         </div>
@@ -109,7 +107,7 @@ const Navigation = ({ user }) => {
                     <div className="pt-2 pb-3 space-y-1">
                         <ResponsiveNavLink
                             href="/dashboard"
-                            active={router.pathname === '/dashboard'}>
+                            active={usePathname() === '/dashboard'}>
                             Dashboard
                         </ResponsiveNavLink>
                     </div>
@@ -156,4 +154,4 @@ const Navigation = ({ user }) => {
     )
 }
 
-export default Navigation
+export default Navigation

src/app/(app)/dashboard/page.js

@@ -1,19 +1,24 @@
+import Header from '@/app/(app)/Header'
+
 export const metadata = {
     title: 'Laravel - Dashboard',
 }
 
 const Dashboard = () => {
     return (
-        <div className="py-12">
-            <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
-                    <div className="p-6 bg-white border-b border-gray-200">
-                        You're logged in!
+        <>
+            <Header title="Dashboard" />
+            <div className="py-12">
+                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+                        <div className="p-6 bg-white border-b border-gray-200">
+                            You are logged in!
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+        </>
     )
 }
 
-export default Dashboard
+export default Dashboard

src/app/(app)/layout.js

@@ -15,12 +15,6 @@ const AppLayout = ({ children, header }) => {
         <div className="min-h-screen bg-gray-100">
             <Navigation user={user} />
 
-            <header className="bg-white shadow">
-                <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
-                    {header}
-                </div>
-            </header>
-
             <main>{children}</main>
         </div>
     )