[_]: feature/sidenav transition

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

src/components/sidenav/Sidenav.tsx

@@ -71,7 +71,7 @@ const Sidenav = ({
   return (
     <div
       className={`relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group ${
-        isCollapsed ? 'w-16' : 'w-64'
+        isCollapsed ? 'w-[60px]' : 'w-64'
       }`}
     >
       <div className="flex flex-col">
@@ -85,21 +85,28 @@ const Sidenav = ({
           className={header.className}
         />
 
-        <div className="flex flex-col gap-4">
-          {isCollapsed ? collapsedPrimaryAction : primaryAction}
+        <div className="flex flex-col gap-4 overflow-hidden">
+          <div className="relative">
+            {!isCollapsed && <div className="transition-opacity duration-300 opacity-100">{primaryAction}</div>}
+            {isCollapsed && <div className="transition-opacity duration-300 opacity-100">{collapsedPrimaryAction}</div>}
+          </div>
           <SidenavOptions options={options} isCollapsed={isCollapsed} showSubsections={showSubsections} />
         </div>
       </div>
 
-      {!isCollapsed && storage && (
-        <SidenavStorage
-          usage={storage.usage}
-          limit={storage.limit}
-          percentage={storage.percentage}
-          onUpgradeClick={storage.onUpgradeClick}
-          upgradeLabel={storage.upgradeLabel}
-          isLoading={storage.isLoading}
-        />
+      {storage && (
+        <div
+          className={`transition-all overflow-hidden duration-300 ${isCollapsed ? 'opacity-0 invisible delay-200' : 'opacity-100 delay-0'}`}
+        >
+          <SidenavStorage
+            usage={storage.usage}
+            limit={storage.limit}
+            percentage={storage.percentage}
+            onUpgradeClick={storage.onUpgradeClick}
+            upgradeLabel={storage.upgradeLabel}
+            isLoading={storage.isLoading}
+          />
+        </div>
       )}
     </div>
   );

src/components/sidenav/SidenavHeader.tsx

@@ -1,4 +1,4 @@
-import { SidebarIcon } from '@phosphor-icons/react';
+import { SidebarSimpleIcon } from '@phosphor-icons/react';
 import { SuiteLauncher } from '../suiteLauncher';
 
 interface SidenavHeaderProps {
@@ -32,52 +32,46 @@ const SidenavHeader = ({
   suiteLauncher,
 }: SidenavHeaderProps): JSX.Element => {
   return (
-    <div
-      className={`flex flex-row justify-between w-full py-5 px-2 ${className} ${isCollapsed ? 'justify-center' : ''}`}
-    >
-      {isCollapsed ? (
-        <div className="relative flex items-center justify-center w-full">
-          <button className="flex flex-row gap-2 items-center" onClick={onClick}>
-            <img src={logo} width={28} alt={title} className="group-hover:hidden" />
-            {onToggleCollapse && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onToggleCollapse();
-                }}
-                className="hidden group-hover:flex items-center justify-center text-gray-80"
-              >
-                <SidebarIcon size={28} />
-              </button>
-            )}
+    <div className={`flex flex-row justify-between w-full py-5 px-2 ${className}`}>
+      <div className="relative flex flex-row gap-2 items-center">
+        <button className="flex flex-row gap-2 items-center" onClick={onClick}>
+          <img
+            src={logo}
+            width={28}
+            alt={title}
+            className={`flex-shrink-0 ${isCollapsed ? 'group-hover:hidden' : ''}`}
+          />
+          {!isCollapsed && <p className="text-xl font-medium text-gray-100 whitespace-nowrap">{title}</p>}
+        </button>
+        {isCollapsed && onToggleCollapse && (
+          <button
+            onClick={onToggleCollapse}
+            className="hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0"
+          >
+            <SidebarSimpleIcon size={28} />
           </button>
-        </div>
-      ) : (
-        <>
-          <button className="flex flex-row gap-2 items-center" onClick={onClick}>
-            <img src={logo} width={28} alt={title} />
-            <p className="text-xl font-medium text-gray-100">{title}</p>
+        )}
+      </div>
+      <div
+        className={`flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${isCollapsed ? 'opacity-0 invisible' : 'opacity-100'}`}
+      >
+        {suiteLauncher && (
+          <SuiteLauncher
+            suiteArray={suiteLauncher?.suiteArray}
+            soonText={suiteLauncher?.soonText}
+            className={`text-gray-80 ${suiteLauncher?.className}`}
+            align="left"
+          />
+        )}
+        {onToggleCollapse && (
+          <button
+            onClick={onToggleCollapse}
+            className="flex items-center justify-center text-gray-80 hover:text-gray-90"
+          >
+            <SidebarSimpleIcon size={28} />
           </button>
-          <div className="flex flex-row gap-2 items-center">
-            {suiteLauncher && (
-              <SuiteLauncher
-                suiteArray={suiteLauncher?.suiteArray}
-                soonText={suiteLauncher?.soonText}
-                className={`text-gray-80 ${suiteLauncher?.className}`}
-                align="left"
-              />
-            )}
-            {onToggleCollapse && (
-              <button
-                onClick={onToggleCollapse}
-                className="flex items-center justify-center text-gray-80 hover:text-gray-90"
-              >
-                <SidebarIcon size={28} />
-              </button>
-            )}
-          </div>
-        </>
-      )}
+        )}
+      </div>
     </div>
   );
 };

src/components/sidenav/SidenavItem.tsx

@@ -25,25 +25,25 @@ const SidenavItem = ({
     <button
       onClick={onClick}
       data-cy={iconDataCy}
-      className={`flex w-full flex-col focus-visible:bg-gray-10 rounded-lg ${
+      className={`flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${
         isActive ? 'bg-primary/20' : 'hover:bg-gray-5'
       } ${subsection ? 'pl-5' : ''}`}
       title={isCollapsed ? label : undefined}
     >
-      <div
-        className={`flex flex-row px-2.5 py-2 w-full items-center ${isCollapsed ? 'justify-center' : 'justify-between'}`}
-      >
+      <div className="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]">
         <div className={`flex flex-row gap-3 items-center ${isActive ? 'text-primary' : 'text-gray-80'}`}>
-          <Icon size={20} weight={isActive ? 'fill' : 'regular'} />
-          {!isCollapsed && <p className="font-medium">{label}</p>}
-        </div>
-        {!isCollapsed && notifications && (
-          <div
-            className={`flex rounded-full px-2 py-1 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'}`}
+          <Icon size={20} weight={isActive ? 'fill' : 'regular'} className="flex-shrink-0" />
+          <p
+            className={`font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${isCollapsed ? 'opacity-0 delay-200' : 'opacity-100 delay-0'}`}
           >
-            <p className="text-xs font-medium">{notifications}</p>
-          </div>
-        )}
+            {label}
+          </p>
+        </div>
+        <div
+          className={`flex rounded-full px-2 py-1 transition-all duration-300 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'} ${isCollapsed || !notifications ? 'opacity-0 invisible delay-300' : 'opacity-100 delay-0'}`}
+        >
+          {notifications && <p className="text-xs font-medium">{notifications}</p>}
+        </div>
       </div>
     </button>
   );