Skip to content

Commit

Permalink
feat: add forwardRef
Browse files Browse the repository at this point in the history
  • Loading branch information
@vutuanlinh2k2
vutuanlinh2k2 committed Jul 27, 2023
1 parent 70023c4 commit dda1d9d
Show file tree
Hide file tree
Showing 2 changed files with 191 additions and 195 deletions.
225 changes: 111 additions & 114 deletions libs/webb-ui-components/src/components/SideBar/SideBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState, forwardRef } from 'react';
import cx from 'classnames';
import useLocalStorageState from 'use-local-storage-state';
import { twMerge } from 'tailwind-merge';
Expand Down Expand Up @@ -28,135 +28,132 @@ import { SidebarProps } from './types';
* />
* ```
*/
export const SideBar: React.FC<SidebarProps> = ({
Logo,
ClosedLogo,
logoLink,
items,
footer,
className,
}) => {
const [isSidebarOpen, setIsSidebarOpen] = useLocalStorageState(
'isSidebarOpen',
{
defaultValue: true,
}
);
export const SideBar = forwardRef<HTMLDivElement, SidebarProps>(
({ Logo, ClosedLogo, logoLink, items, footer, className, ...props }, ref) => {
const [isSidebarOpen, setIsSidebarOpen] = useLocalStorageState(
'isSidebarOpen',
{
defaultValue: true,
}
);

const [activeItem, setActiveItem] = useState<number | null>(0);
const [isHovering, setIsHovering] = useState(false);
const [activeItem, setActiveItem] = useState<number | null>(0);
const [isHovering, setIsHovering] = useState(false);

return (
<div
className={cx('flex gap-2 top-0 left-0 z-50 relative', className)}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
>
return (
<div
className={twMerge(
'h-screen flex flex-col justify-between py-12 px-4 bg-mono-0 dark:bg-mono-160 transition-all duration-200 ease-in-out',
isSidebarOpen ? 'w-72' : 'w-16'
)}
className={cx('flex gap-2 top-0 left-0 z-50 relative', className)}
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
{...props}
ref={ref}
>
<div>
<div className={isSidebarOpen ? 'px-2' : ''}>
<a
href={logoLink ? logoLink : '/'}
target="_blank"
rel="noopener noreferrer"
>
{!isSidebarOpen && ClosedLogo ? (
<ClosedLogo />
) : (
<Logo size="md" />
)}
</a>
</div>

<div className="flex flex-col gap-4 mt-11">
{items.map((itemProps, index) => (
<SideBarItem
key={index}
{...itemProps}
isSidebarOpen={isSidebarOpen}
isActive={activeItem === index}
setIsActive={() => setActiveItem(index)}
/>
))}
</div>
</div>

<div
className="flex-grow"
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
/>

<div
className={twMerge(
'flex items-center justify-between',
isSidebarOpen ? 'p-2' : 'pl-1'
'h-screen flex flex-col justify-between py-12 px-4 bg-mono-0 dark:bg-mono-160 transition-all duration-200 ease-in-out',
isSidebarOpen ? 'w-72' : 'w-16'
)}
>
<div className="flex items-center justify-between group">
<Link href={footer.href} aTagProps={{ target: '_blank' }}>
<footer.Icon
width={24}
height={24}
className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
/>
</Link>
<div>
<div className={isSidebarOpen ? 'px-2' : ''}>
<a
href={logoLink ? logoLink : '/'}
target="_blank"
rel="noopener noreferrer"
>
{!isSidebarOpen && ClosedLogo ? (
<ClosedLogo />
) : (
<Logo size="md" />
)}
</a>
</div>

<div className="flex flex-col gap-4 mt-11">
{items.map((itemProps, index) => (
<SideBarItem
key={index}
{...itemProps}
isSidebarOpen={isSidebarOpen}
isActive={activeItem === index}
setIsActive={() => setActiveItem(index)}
/>
))}
</div>
</div>

{isSidebarOpen && (
<>
<div className={isSidebarOpen ? 'pl-4' : ''}>
<Link href={footer.href} aTagProps={{ target: '_blank' }}>
<Typography
variant="body1"
className="cursor-pointer text-mono-100 dark:text-mono-60 group-hover:text-mono-200 dark:group-hover:text-mono-0"
>
{footer.name}
</Typography>
</Link>
</div>
<div
className="flex-grow"
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
/>

{!footer.isInternal ? (
<div className={isSidebarOpen ? 'pl-[26px]' : ''}>
<div
className={twMerge(
'flex items-center justify-between',
isSidebarOpen ? 'p-2' : 'pl-1'
)}
>
<div className="flex items-center justify-between group">
<Link href={footer.href} aTagProps={{ target: '_blank' }}>
<footer.Icon
width={24}
height={24}
className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
/>
</Link>

{isSidebarOpen && (
<>
<div className={isSidebarOpen ? 'pl-4' : ''}>
<Link href={footer.href} aTagProps={{ target: '_blank' }}>
<ExternalLinkLine
className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
width={24}
height={24}
/>
<Typography
variant="body1"
className="cursor-pointer text-mono-100 dark:text-mono-60 group-hover:text-mono-200 dark:group-hover:text-mono-0"
>
{footer.name}
</Typography>
</Link>
</div>
) : (
''
)}
</>
)}
</div>

{isSidebarOpen && <ThemeToggle />}
{!footer.isInternal ? (
<div className={isSidebarOpen ? 'pl-[26px]' : ''}>
<Link href={footer.href} aTagProps={{ target: '_blank' }}>
<ExternalLinkLine
className="cursor-pointer !fill-mono-100 dark:!fill-mono-60 group-hover:!fill-mono-200 dark:group-hover:!fill-mono-0"
width={24}
height={24}
/>
</Link>
</div>
) : (
''
)}
</>
)}
</div>

{isSidebarOpen && <ThemeToggle />}
</div>
</div>
</div>

{isHovering && (
<div
className="absolute top-0 right-0 px-3 pt-12"
style={{ transform: 'translateX(100%)' }}
>
{isHovering && (
<div
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className="p-1 rounded-full shadow-lg cursor-pointer bg-mono-0 dark:bg-mono-180"
className="absolute top-0 right-0 px-3 pt-12"
style={{ transform: 'translateX(100%)' }}
>
{isSidebarOpen ? (
<ChevronLeft size="md" />
) : (
<ChevronRight size="md" />
)}
<div
onClick={() => setIsSidebarOpen(!isSidebarOpen)}
className="p-1 rounded-full shadow-lg cursor-pointer bg-mono-0 dark:bg-mono-180"
>
{isSidebarOpen ? (
<ChevronLeft size="md" />
) : (
<ChevronRight size="md" />
)}
</div>
</div>
</div>
)}
</div>
);
};
)}
</div>
);
}
);
Loading

0 comments on commit dda1d9d

Please sign in to comment.