Fix: Replace styled logo with Avatar component for workspace logo in NavigationDrawerHeader (#9093)

This PR addresses issue #9042

- Replaced the styled logo with the `Avatar` component.
- `Avatar` now handles the case when no `logo` is uploaded by using the
workspace name's first character as the `placeholder`.
- This ensures a consistent fallback when the `logo` is undefined.

---------

Co-authored-by: guillim <guigloo@msn.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-ui/src/display/avatar/components/Avatar.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@linaria/react';
-import { isNonEmptyString, isUndefined } from '@sniptt/guards';
+import { isNonEmptyString, isNull, isUndefined } from '@sniptt/guards';
 import { useContext } from 'react';
 import { useRecoilState } from 'recoil';
 
@@ -90,12 +90,10 @@ export const Avatar = ({
       })
     : null;
 
-  const noAvatarUrl = !isNonEmptyString(avatarImageURI);
-
   const placeholderChar = placeholder?.[0]?.toLocaleUpperCase();
 
   const showPlaceholder =
-    noAvatarUrl || invalidAvatarUrls.includes(avatarImageURI);
+    isNull(avatarImageURI) || invalidAvatarUrls.includes(avatarImageURI);
 
   const handleImageError = () => {
     if (isNonEmptyString(avatarImageURI)) {