display user in button on dashboard

src/components/layout/main.tsx

@@ -10,6 +10,9 @@ import {
 
 import Navbar from '../core/navbar';
 
+import { useAuth } from '../../auth/useAuth';
+import { useNavigate } from 'react-router-dom';
+
 interface LayoutProps {
   path: string,
   title?: string,
@@ -17,15 +20,19 @@ interface LayoutProps {
   children: any
 };
 
-const userNavigation = [
-  { name: 'Se déconnecter', href: '/logout' },
-];
-
 function classNames(...classes: unknown[]) {
   return classes.filter(Boolean).join(' ');
 }
 
 const Main = ({ path, title, subTitle, children }: LayoutProps) => {
+
+  let auth = useAuth();
+  let navigate = useNavigate();
+
+  const userNavigation = [
+    { name: 'Se déconnecter', action: (e) => {return auth.signout(() => navigate("/"))} },
+  ];
+
   const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
@@ -81,15 +88,16 @@ const Main = ({ path, title, subTitle, children }: LayoutProps) => {
                   leaveTo="transform opacity-0 scale-95"
                 >
                   <Menu.Items className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">
+                    <Menu.Item key="username"><span className="block px-4 py-2 text-sm text-gray-700 font-semibold">Bienvenue {auth.user} !</span></Menu.Item>
                     {userNavigation.map((item) => (
                       <Menu.Item key={item.name}>
                         {({ active }) => (
-                          <a
-                            href={item.href}
-                            className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700')}
+                          <button
+                            onClick={(e) => {item.action(e)}}
+                            className={classNames(active ? 'bg-gray-100' : '', 'block px-4 py-2 text-sm text-gray-700 w-full')}
                           >
                             {item.name}
-                          </a>
+                          </button>
                         )}
                       </Menu.Item>
                     ))}