feat(sidebar): implement new design [EE-3447] (#7118)

app/react/sidebar/Header.tsx

@@ -1,8 +1,9 @@
-import defaultLogo from '@/assets/images/logo.png';
+import { ChevronsLeft, ChevronsRight } from 'react-feather';
+
+import defaultLogo from '@/assets/images/logo_small_alt.png';
 
 import { Link } from '@@/Link';
 
-import styles from './Header.module.css';
 import { useSidebarState } from './useSidebarState';
 
 interface Props {
@@ -10,28 +11,32 @@ interface Props {
 }
 
 export function Header({ logo }: Props) {
-  const { toggle } = useSidebarState();
+  const { toggle, isOpen } = useSidebarState();
 
   return (
-    <div className={styles.root}>
-      <Link to="portainer.home" data-cy="portainerSidebar-homeImage">
+    <div className="flex justify-between items-center">
+      <Link
+        to="portainer.home"
+        data-cy="portainerSidebar-homeImage"
+        className="text-2xl text-white no-underline hover:no-underline hover:text-white"
+      >
         <img
           src={logo || defaultLogo}
           className="img-responsive logo"
-          alt={!logo ? 'Portainer' : ''}
+          alt={!logo ? 'portainer.io' : 'Logo'}
         />
+        {isOpen && 'portainer.io'}
       </Link>
-      {toggle && (
-        <button
-          type="button"
-          onClick={() => toggle()}
-          className={styles.toggleButton}
-          aria-label="Toggle Sidebar"
-          title="Toggle Sidebar"
-        >
-          <i className="glyphicon glyphicon-transfer" />
-        </button>
-      )}
+
+      <button
+        type="button"
+        onClick={() => toggle()}
+        className="w-6 h-6 flex justify-center items-center text-gray-4 be:text-gray-5 border-0 rounded text-sm be:bg-gray-10 bg-blue-11 hover:text-white be:hover:text-white"
+        aria-label="Toggle Sidebar"
+        title="Toggle Sidebar"
+      >
+        {isOpen ? <ChevronsLeft /> : <ChevronsRight />}
+      </button>
     </div>
   );
 }