add update package & weather details

resources/js/components/Header.tsx

@@ -1,15 +1,20 @@
 import React from "react"
 import {Link, useLocation} from "react-router-dom"
 import useAuthUser from "../hooks/AuthUser"
+import useDimension from "../hooks/DimensionHook"
 
 const Header = () => {
 
     const {authUser} = useAuthUser()
     const location = useLocation()
+    const {targetRef, dimensions} = useDimension()
 
-    return <header className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
+    return <header ref={targetRef}
+                   className="flex justify-between bg-blue-700 px-5 py-3 text-xl text-white">
         <div>
-            <Link to="/">Bermite</Link>
+            <Link to="/" className={`font-bold`}>
+                {dimensions.width < 400 ? 'B' : 'Bermite'}
+            </Link>
         </div>
 
         {authUser?.locations && authUser.locations.length > 0 && <nav className="flex gap-2">
@@ -19,7 +24,9 @@ const Header = () => {
 
         {authUser
             ? <span className="flex gap-2">
-                <Link to="/profile" className={location.pathname === '/profile' ? 'font-bold' : ''}>{authUser.name}</Link>
+                <Link to="/profile" className={`${location.pathname === '/profile' ? 'font-bold' : ''} font-bold`}>
+                    {dimensions.width < 400 ? authUser.name[0] : authUser.name}
+                </Link>
             </span>
             : <span className="flex gap-2">
                 <Link to="/connexion">Connexion</Link>