From 7ec279a10e66c4696c0a0e25c3aed6503edc266a Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Mon, 2 Mar 2026 18:52:18 +0100
Subject: [PATCH 1/3] feat(styles): add smooth transition when collapsing

---
 src/components/sidenav/Sidenav.tsx       | 37 ++++++++----
 src/components/sidenav/SidenavHeader.tsx | 77 ++++++++++--------------
 src/components/sidenav/SidenavItem.tsx   | 22 +++----
 3 files changed, 68 insertions(+), 68 deletions(-)

diff --git a/src/components/sidenav/Sidenav.tsx b/src/components/sidenav/Sidenav.tsx
index a6e9bd2..92b98bd 100644
--- a/src/components/sidenav/Sidenav.tsx
+++ b/src/components/sidenav/Sidenav.tsx
@@ -70,8 +70,8 @@ const Sidenav = ({
 }: SidenavProps) => {
   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'
+      className={`relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group overflow-hidden ${
+        isCollapsed ? 'w-[60px]' : 'w-64'
       }`}
     >
       <div className="flex flex-col">
@@ -86,20 +86,33 @@ const Sidenav = ({
         />
 
         <div className="flex flex-col gap-4">
-          {isCollapsed ? collapsedPrimaryAction : primaryAction}
+          <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-opacity duration-300 ${isCollapsed ? 'opacity-0 invisible' : 'opacity-100'}`}>
+          <SidenavStorage
+            usage={storage.usage}
+            limit={storage.limit}
+            percentage={storage.percentage}
+            onUpgradeClick={storage.onUpgradeClick}
+            upgradeLabel={storage.upgradeLabel}
+            isLoading={storage.isLoading}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/src/components/sidenav/SidenavHeader.tsx b/src/components/sidenav/SidenavHeader.tsx
index 864ca96..df44b93 100644
--- a/src/components/sidenav/SidenavHeader.tsx
+++ b/src/components/sidenav/SidenavHeader.tsx
@@ -32,52 +32,41 @@ 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' : ''}`} />
+          <p className={`text-xl font-medium text-gray-100 whitespace-nowrap overflow-hidden transition-opacity duration-300 ${isCollapsed ? 'opacity-0 w-0' : 'opacity-100'}`}>
+            {title}
+          </p>
+        </button>
+        {isCollapsed && onToggleCollapse && (
+          <button
+            onClick={onToggleCollapse}
+            className="hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0"
+          >
+            <SidebarIcon 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 flex-row gap-2 items-center transition-opacity duration-300 ${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"
+          >
+            <SidebarIcon 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>
   );
 };
diff --git a/src/components/sidenav/SidenavItem.tsx b/src/components/sidenav/SidenavItem.tsx
index 0e380f6..7d71dc7 100644
--- a/src/components/sidenav/SidenavItem.tsx
+++ b/src/components/sidenav/SidenavItem.tsx
@@ -30,20 +30,18 @@ const SidenavItem = ({
       } ${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>}
+          <Icon size={20} weight={isActive ? 'fill' : 'regular'} className="flex-shrink-0" />
+          <p className={`font-medium whitespace-nowrap overflow-hidden transition-opacity duration-300 ${isCollapsed ? 'opacity-0 w-0' : 'opacity-100'}`}>
+            {label}
+          </p>
+        </div>
+        <div
+          className={`flex rounded-full px-2 py-1 transition-opacity duration-300 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'} ${isCollapsed || !notifications ? 'opacity-0 invisible' : 'opacity-100'}`}
+        >
+          {notifications && <p className="text-xs font-medium">{notifications}</p>}
         </div>
-        {!isCollapsed && notifications && (
-          <div
-            className={`flex rounded-full px-2 py-1 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'}`}
-          >
-            <p className="text-xs font-medium">{notifications}</p>
-          </div>
-        )}
       </div>
     </button>
   );

From 6568d927454bb955ad47a2bcb1463889c485450a Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 3 Mar 2026 10:08:36 +0100
Subject: [PATCH 2/3] feat: add smooth transition for sidenav items

---
 src/components/sidenav/Sidenav.tsx       | 20 +++++++-------------
 src/components/sidenav/SidenavHeader.tsx | 21 +++++++++++++--------
 src/components/sidenav/SidenavItem.tsx   |  8 +++++---
 3 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/src/components/sidenav/Sidenav.tsx b/src/components/sidenav/Sidenav.tsx
index 92b98bd..182197a 100644
--- a/src/components/sidenav/Sidenav.tsx
+++ b/src/components/sidenav/Sidenav.tsx
@@ -70,7 +70,7 @@ const Sidenav = ({
 }: SidenavProps) => {
   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 overflow-hidden ${
+      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-[60px]' : 'w-64'
       }`}
     >
@@ -85,25 +85,19 @@ const Sidenav = ({
           className={header.className}
         />
 
-        <div className="flex flex-col gap-4">
+        <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>
-            )}
+            {!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>
 
       {storage && (
-        <div className={`transition-opacity duration-300 ${isCollapsed ? 'opacity-0 invisible' : 'opacity-100'}`}>
+        <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}
diff --git a/src/components/sidenav/SidenavHeader.tsx b/src/components/sidenav/SidenavHeader.tsx
index df44b93..cf83d96 100644
--- a/src/components/sidenav/SidenavHeader.tsx
+++ b/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 {
@@ -35,21 +35,26 @@ const SidenavHeader = ({
     <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' : ''}`} />
-          <p className={`text-xl font-medium text-gray-100 whitespace-nowrap overflow-hidden transition-opacity duration-300 ${isCollapsed ? 'opacity-0 w-0' : 'opacity-100'}`}>
-            {title}
-          </p>
+          <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"
           >
-            <SidebarIcon size={28} />
+            <SidebarSimpleIcon size={28} />
           </button>
         )}
       </div>
-      <div className={`flex flex-row gap-2 items-center transition-opacity duration-300 ${isCollapsed ? 'opacity-0 invisible' : 'opacity-100'}`}>
+      <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}
@@ -63,7 +68,7 @@ const SidenavHeader = ({
             onClick={onToggleCollapse}
             className="flex items-center justify-center text-gray-80 hover:text-gray-90"
           >
-            <SidebarIcon size={28} />
+            <SidebarSimpleIcon size={28} />
           </button>
         )}
       </div>
diff --git a/src/components/sidenav/SidenavItem.tsx b/src/components/sidenav/SidenavItem.tsx
index 7d71dc7..356882c 100644
--- a/src/components/sidenav/SidenavItem.tsx
+++ b/src/components/sidenav/SidenavItem.tsx
@@ -25,7 +25,7 @@ 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}
@@ -33,12 +33,14 @@ const SidenavItem = ({
       <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'} className="flex-shrink-0" />
-          <p className={`font-medium whitespace-nowrap overflow-hidden transition-opacity duration-300 ${isCollapsed ? 'opacity-0 w-0' : 'opacity-100'}`}>
+          <p
+            className={`font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${isCollapsed ? 'opacity-0 delay-200' : 'opacity-100 delay-0'}`}
+          >
             {label}
           </p>
         </div>
         <div
-          className={`flex rounded-full px-2 py-1 transition-opacity duration-300 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'} ${isCollapsed || !notifications ? 'opacity-0 invisible' : 'opacity-100'}`}
+          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>

From 9975de8ba572031dd2dea64b5f3f951b72dc8cb0 Mon Sep 17 00:00:00 2001
From: Xavier Abad <77491413+xabg2@users.noreply.github.com>
Date: Tue, 3 Mar 2026 10:10:12 +0100
Subject: [PATCH 3/3] chore: bump package version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 94d80d4..f90ab1c 100644
--- a/package.json
+++ b/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",