Skip to content

Commit 354de92

Browse files
xabg2xabg2
authored
Merge pull request #85 from internxt/feature/sidenav-transition
[_]: feature/sidenav transition
2 parents 86cdb6b + 9975de8 commit 354de92

4 files changed

Lines changed: 72 additions & 71 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@internxt/ui",
3-
"version": "0.1.6",
3+
"version": "0.1.7",
44
"description": "Library of Internxt components",
55
"repository": {
66
"type": "git",

‎src/components/sidenav/Sidenav.tsx‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const Sidenav = ({
7171
return (
7272
<div
7373
className={`relative flex flex-col p-2 h-full justify-between bg-gray-1 border-r border-gray-10 transition-all duration-300 group ${
74-
isCollapsed ? 'w-16' : 'w-64'
74+
isCollapsed ? 'w-[60px]' : 'w-64'
7575
}`}
7676
>
7777
<div className="flex flex-col">
@@ -85,21 +85,28 @@ const Sidenav = ({
8585
className={header.className}
8686
/>
8787

88-
<div className="flex flex-col gap-4">
89-
{isCollapsed ? collapsedPrimaryAction : primaryAction}
88+
<div className="flex flex-col gap-4 overflow-hidden">
89+
<div className="relative">
90+
{!isCollapsed && <div className="transition-opacity duration-300 opacity-100">{primaryAction}</div>}
91+
{isCollapsed && <div className="transition-opacity duration-300 opacity-100">{collapsedPrimaryAction}</div>}
92+
</div>
9093
<SidenavOptions options={options} isCollapsed={isCollapsed} showSubsections={showSubsections} />
9194
</div>
9295
</div>
9396

94-
{!isCollapsed && storage && (
95-
<SidenavStorage
96-
usage={storage.usage}
97-
limit={storage.limit}
98-
percentage={storage.percentage}
99-
onUpgradeClick={storage.onUpgradeClick}
100-
upgradeLabel={storage.upgradeLabel}
101-
isLoading={storage.isLoading}
102-
/>
97+
{storage && (
98+
<div
99+
className={`transition-all overflow-hidden duration-300 ${isCollapsed ? 'opacity-0 invisible delay-200' : 'opacity-100 delay-0'}`}
100+
>
101+
<SidenavStorage
102+
usage={storage.usage}
103+
limit={storage.limit}
104+
percentage={storage.percentage}
105+
onUpgradeClick={storage.onUpgradeClick}
106+
upgradeLabel={storage.upgradeLabel}
107+
isLoading={storage.isLoading}
108+
/>
109+
</div>
103110
)}
104111
</div>
105112
);

‎src/components/sidenav/SidenavHeader.tsx‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { SidebarIcon } from '@phosphor-icons/react';
1+
import { SidebarSimpleIcon } from '@phosphor-icons/react';
22
import { SuiteLauncher } from '../suiteLauncher';
33

44
interface SidenavHeaderProps {
@@ -32,52 +32,46 @@ const SidenavHeader = ({
3232
suiteLauncher,
3333
}: SidenavHeaderProps): JSX.Element => {
3434
return (
35-
<div
36-
className={`flex flex-row justify-between w-full py-5 px-2 ${className} ${isCollapsed ? 'justify-center' : ''}`}
37-
>
38-
{isCollapsed ? (
39-
<div className="relative flex items-center justify-center w-full">
40-
<button className="flex flex-row gap-2 items-center" onClick={onClick}>
41-
<img src={logo} width={28} alt={title} className="group-hover:hidden" />
42-
{onToggleCollapse && (
43-
<button
44-
onClick={(e) => {
45-
e.stopPropagation();
46-
onToggleCollapse();
47-
}}
48-
className="hidden group-hover:flex items-center justify-center text-gray-80"
49-
>
50-
<SidebarIcon size={28} />
51-
</button>
52-
)}
35+
<div className={`flex flex-row justify-between w-full py-5 px-2 ${className}`}>
36+
<div className="relative flex flex-row gap-2 items-center">
37+
<button className="flex flex-row gap-2 items-center" onClick={onClick}>
38+
<img
39+
src={logo}
40+
width={28}
41+
alt={title}
42+
className={`flex-shrink-0 ${isCollapsed ? 'group-hover:hidden' : ''}`}
43+
/>
44+
{!isCollapsed && <p className="text-xl font-medium text-gray-100 whitespace-nowrap">{title}</p>}
45+
</button>
46+
{isCollapsed && onToggleCollapse && (
47+
<button
48+
onClick={onToggleCollapse}
49+
className="hidden group-hover:flex items-center justify-center text-gray-80 absolute left-0"
50+
>
51+
<SidebarSimpleIcon size={28} />
5352
</button>
54-
</div>
55-
) : (
56-
<>
57-
<button className="flex flex-row gap-2 items-center" onClick={onClick}>
58-
<img src={logo} width={28} alt={title} />
59-
<p className="text-xl font-medium text-gray-100">{title}</p>
53+
)}
54+
</div>
55+
<div
56+
className={`flex z-20 flex-row gap-2 items-center transition-opacity duration-100 ${isCollapsed ? 'opacity-0 invisible' : 'opacity-100'}`}
57+
>
58+
{suiteLauncher && (
59+
<SuiteLauncher
60+
suiteArray={suiteLauncher?.suiteArray}
61+
soonText={suiteLauncher?.soonText}
62+
className={`text-gray-80 ${suiteLauncher?.className}`}
63+
align="left"
64+
/>
65+
)}
66+
{onToggleCollapse && (
67+
<button
68+
onClick={onToggleCollapse}
69+
className="flex items-center justify-center text-gray-80 hover:text-gray-90"
70+
>
71+
<SidebarSimpleIcon size={28} />
6072
</button>
61-
<div className="flex flex-row gap-2 items-center">
62-
{suiteLauncher && (
63-
<SuiteLauncher
64-
suiteArray={suiteLauncher?.suiteArray}
65-
soonText={suiteLauncher?.soonText}
66-
className={`text-gray-80 ${suiteLauncher?.className}`}
67-
align="left"
68-
/>
69-
)}
70-
{onToggleCollapse && (
71-
<button
72-
onClick={onToggleCollapse}
73-
className="flex items-center justify-center text-gray-80 hover:text-gray-90"
74-
>
75-
<SidebarIcon size={28} />
76-
</button>
77-
)}
78-
</div>
79-
</>
80-
)}
73+
)}
74+
</div>
8175
</div>
8276
);
8377
};

‎src/components/sidenav/SidenavItem.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,25 +25,25 @@ const SidenavItem = ({
2525
<button
2626
onClick={onClick}
2727
data-cy={iconDataCy}
28-
className={`flex w-full flex-col focus-visible:bg-gray-10 rounded-lg ${
28+
className={`flex w-full flex-col overflow-hidden focus-visible:bg-gray-10 rounded-lg ${
2929
isActive ? 'bg-primary/20' : 'hover:bg-gray-5'
3030
} ${subsection ? 'pl-5' : ''}`}
3131
title={isCollapsed ? label : undefined}
3232
>
33-
<div
34-
className={`flex flex-row px-2.5 py-2 w-full items-center ${isCollapsed ? 'justify-center' : 'justify-between'}`}
35-
>
33+
<div className="flex flex-row px-2.5 py-2 w-full items-center justify-between min-h-[36px]">
3634
<div className={`flex flex-row gap-3 items-center ${isActive ? 'text-primary' : 'text-gray-80'}`}>
37-
<Icon size={20} weight={isActive ? 'fill' : 'regular'} />
38-
{!isCollapsed && <p className="font-medium">{label}</p>}
39-
</div>
40-
{!isCollapsed && notifications && (
41-
<div
42-
className={`flex rounded-full px-2 py-1 ${isActive ? 'text-white bg-primary' : 'bg-gray-10 text-gray-60'}`}
35+
<Icon size={20} weight={isActive ? 'fill' : 'regular'} className="flex-shrink-0" />
36+
<p
37+
className={`font-medium whitespace-nowrap overflow-hidden transition-all duration-300 ${isCollapsed ? 'opacity-0 delay-200' : 'opacity-100 delay-0'}`}
4338
>
44-
<p className="text-xs font-medium">{notifications}</p>
45-
</div>
46-
)}
39+
{label}
40+
</p>
41+
</div>
42+
<div
43+
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'}`}
44+
>
45+
{notifications && <p className="text-xs font-medium">{notifications}</p>}
46+
</div>
4747
</div>
4848
</button>
4949
);

0 commit comments

Comments
 (0)