Improve Sign component

app/page.js

@@ -2,6 +2,7 @@ import {createDirectus, rest, readItems} from '@directus/sdk'
 import Container from '@mui/material/Container'
 import Box from '@mui/material/Box'
 import Typography from '@mui/material/Typography'
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'
 import {auth} from '../auth.js'
 import Konstitisyon from '@/components/konstitisyon/index.js'
 import Footer from '@/components/footer.js'
@@ -11,6 +12,13 @@ import Create from '@/components/konstitisyon/create/index.js'
 const apiUrl = process.env.DIRECTUS_API_URL
 const appTitle = process.env.APP_TITLE
 
+const navButton = {
+  title: 'Tableau de bord',
+  path: '/dashboard',
+  color: 'success',
+  icon: <AdminPanelSettingsIcon fontSize='large' />
+}
+
 async function getData() {
   if (!apiUrl) {
     throw new Error('DIRECTUS_API_URL is required')
@@ -67,7 +75,7 @@ export default async function Page() {
     >
       <Container maxWidth='sm'>
         <Typography mt={1} component='h1' textAlign='center' variant='h4'>{appTitle.toUpperCase()}</Typography>
-        <Sign session={session} />
+        <Sign session={session} navButton={navButton} />
         {session && (
           <Create session={session} titres={titres} />
         )}

components/session/sign.js

@@ -12,7 +12,6 @@ import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import LogoutIcon from '@mui/icons-material/Logout'
 import LoginIcon from '@mui/icons-material/Login'
 import PersonAddIcon from '@mui/icons-material/PersonAdd'
-import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings'
 import ConfirmationAlert from './confirmation-alert.js'
 
 const LightTooltip = styled(({className, ...props}) => (
@@ -26,7 +25,7 @@ const LightTooltip = styled(({className, ...props}) => (
   },
 }))
 
-export default function Sign({session}) {
+export default function Sign({session, navButton}) {
   const router = useRouter()
   const [isOpen, setIsOpen] = useState(false)
 
@@ -45,9 +44,9 @@ export default function Sign({session}) {
                 <LogoutIcon fontSize='large' />
               </Fab>
             </LightTooltip>
-            <LightTooltip title='Tableau de bord' placement='right'>
-              <Fab sx={{mr: 3}} size='large' color='warning' onClick={() => router.push('/dashboard')}>
-                <AdminPanelSettingsIcon fontSize='large' />
+            <LightTooltip title={navButton.title} placement='right'>
+              <Fab sx={{mr: 3}} size='large' color={navButton.color} onClick={() => router.push(navButton.path)}>
+                {navButton.icon}
               </Fab>
             </LightTooltip>
           </Stack>
@@ -78,5 +77,6 @@ export default function Sign({session}) {
 }
 
 Sign.propTypes = {
-  session: PropTypes.object
+  session: PropTypes.object,
+  navButton: PropTypes.object.isRequired
 }