Skip to content

Commit

Permalink
feat: sidebar animation v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@amalcaraz
amalcaraz committed Oct 31, 2023
1 parent a3d86b2 commit 67ec640
Show file tree
Hide file tree
Showing 2 changed files with 192 additions and 55 deletions.
101 changes: 69 additions & 32 deletions src/components/common/Sidebar/cmp.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
import { IconName } from '@fortawesome/fontawesome-svg-core'
import { Icon, Logo } from '@aleph-front/aleph-core'
import { StyledLink, StyledNav1, StyledNav2, StyledSidebar } from './styles'
import { Icon } from '@aleph-front/aleph-core'
import {
StyledLinkContent,
StyledLogo,
StyledNav1,
StyledNav1Link,
StyledNav2,
StyledNav2Link,
StyledNav2LinkContainer,
StyledNav2Title,
StyledSidebar,
} from './styles'
import {
AnchorHTMLAttributes,
ReactNode,
Expand Down Expand Up @@ -59,19 +69,30 @@ export type SidebarLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
href: string
icon?: IconName
children?: ReactNode
isActive?: boolean
open: boolean
}

export const SidebarLink = memo(
({ href, icon, isActive, children }: SidebarLinkProps) => {
({ href, icon, children, open }: SidebarLinkProps) => {
const router = useRouter()
isActive = isActive || router.pathname.indexOf(href) >= 0
const isActive = router.pathname.indexOf(href) >= 0

const props = { href, $isActive: isActive, $open: open }
const iconProps = { name: icon as IconName, size: 'lg', tw: 'p-1' }

return (
<StyledLink href={href} $isActive={isActive} $hasText={!!children}>
{icon && <Icon name={icon} size="lg" tw="p-1" />}
{children}
</StyledLink>
return !children ? (
<StyledNav1Link {...props}>
<StyledLinkContent {...props}>
<span>{icon && <Icon {...iconProps} />}</span>
</StyledLinkContent>
</StyledNav1Link>
) : (
<StyledNav2Link {...props}>
<StyledLinkContent {...props}>
{icon && <Icon {...iconProps} />}
<span>{children}</span>
</StyledLinkContent>
</StyledNav2Link>
)
},
)
Expand All @@ -92,38 +113,54 @@ export const Sidebar = memo(() => {
)

return (
<StyledSidebar>
<StyledNav1>
<Logo text="" size="1.5rem" tw="h-8 mt-8 mb-12" />
<StyledSidebar $open={open}>
<StyledNav1 $open={open}>
<StyledLogo />

{routes.map((child) => (
<SidebarLink
key={child.path}
href={child.path}
icon={child.icon}
></SidebarLink>
open={open}
/>
))}

<SidebarLink href="/earn/bookmark" icon="bookmark"></SidebarLink>
<SidebarLink href="/earn/dropbox" icon="dropbox"></SidebarLink>
<SidebarLink
href="/earn/bookmark"
icon="bookmark"
open={open}
></SidebarLink>
<SidebarLink
href="/earn/dropbox"
icon="dropbox"
open={open}
></SidebarLink>
</StyledNav1>
<StyledNav2 $open={open}>
{currentRoute?.children && (
<>
<div className="tp-nav" tw="py-2 px-6 w-full">
{currentRoute?.name}
</div>
{currentRoute?.children.map((child) => (
<SidebarLink
key={child.path}
href={child.path}
icon={child?.icon || currentRoute?.icon}
>
{child.name}
</SidebarLink>
))}
</>
)}
<StyledNav2LinkContainer>
{currentRoute?.children && (
<>
{currentRoute?.name && (
<StyledNav2Title>
<span>{currentRoute?.name}</span>
</StyledNav2Title>
)}
{currentRoute?.children.map((child) => (
<SidebarLink
key={child.path}
href={child.path}
icon={child?.icon || currentRoute?.icon}
open={open}
>
{child.name}
</SidebarLink>
))}
</>
)}
</StyledNav2LinkContainer>
<div tw="flex-1" onClick={handleToggle} />
<div></div>
</StyledNav2>
</StyledSidebar>
)
Expand Down
146 changes: 123 additions & 23 deletions src/components/common/Sidebar/styles.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,141 @@
import { addClasses } from '@aleph-front/aleph-core'
import { Logo, addClasses } from '@aleph-front/aleph-core'
import Link from 'next/link'
import styled from 'styled-components'
import styled, { css } from 'styled-components'
import tw from 'twin.macro'

export const StyledSidebar = styled.aside`
display: flex;
align-items: stretch;
export const StyledSidebar = styled.aside<{ $open?: boolean }>`
${tw`flex items-stretch justify-start`}
transition: all linear 0.25s 0s;
${({ $open }) =>
$open
? css`
width: 23.25rem;
`
: css`
width: 4.875rem;
`};
`

// -------------- NAV 1 -----------------

export const StyledLogo = styled(Logo).attrs((props) => {
return {
...props,
size: '1.5rem',
text: '',
}
})`
${tw`relative h-8 mt-8 mb-12`}
`

export const StyledNav1 = styled.nav`
export const fadeInOutContentCss = css<{ $open?: boolean }>`
${({ $open }) => css`
opacity: ${$open ? '1' : '0'};
visibility: ${$open ? 'visible' : 'hidden'};
transition: all linear 0.25s 0s;
`}
`
export const StyledNav1 = styled.nav<{ $open?: boolean }>`
${tw`relative h-full flex flex-col items-center overflow-hidden`}
background-color: #0000004c;
transition: all linear 0.25s 0s;
height: 100%;
width: 4.5rem;
${({ $open }) =>
$open
? css`
width: 4.5rem;
`
: css`
width: 0.375rem;
`};
display: flex;
flex-direction: column;
align-items: center;
& ${StyledLogo} {
${fadeInOutContentCss}
}
`

export const StyledNav1Link = styled(Link).attrs(addClasses('tp-nav'))<{
$isActive?: boolean
$open?: boolean
}>`
${({ theme, $isActive, $open }) => css`
${tw`relative w-full`}
color: ${theme.color.main0};
opacity: ${!$isActive ? '0.4' : '1'};
background-color: ${$isActive && !$open
? theme.color.main0
: 'transparent'};
transition: all linear 0.25s 0s;
`}
`

// -------------- NAV 2 -----------------

export const StyledNav2 = styled.nav<{ $open?: boolean }>`
${tw`flex flex-col h-full overflow-hidden`}
background-color: #00000020;
height: 100%;
width: ${({ $open }) => ($open ? '18rem' : '0')};
transition: all ease-in-out 0.5s 0s;
padding-top: 7rem;
overflow: hidden;
background-color: #00000020;
transition: all linear 0.25s 0s;
${({ $open }) =>
$open
? css`
width: 18.75rem;
/* backdrop-filter: blur(0px); */
${StyledNav2Title} {
font-size: 1.125rem;
}
`
: css`
width: 4.5rem;
/* backdrop-filter: blur(999px); */
background-color: #100f20;
${StyledNav2Title} {
${tw`px-0 w-full`}
font-size: 0.75rem;
}
`};
`

export const StyledNav2Title = styled.div.attrs(addClasses('tp-nav'))`
${tw`relative py-2 px-6 w-0 text-center`}
transition: all linear 0.25s 0s;
`

export const StyledLink = styled(Link).attrs(addClasses('tp-nav'))<{
export const StyledNav2LinkContainer = styled.div<{ $open?: boolean }>`
${tw`relative flex flex-col items-start`}
transition: all linear 0.25s 0s;
`

export const StyledNav2Link = styled(Link).attrs(addClasses('tp-nav'))<{
$isActive?: boolean
$hasText?: boolean
$open?: boolean
}>`
${tw`flex items-center gap-1.5 py-2 px-6 w-full whitespace-nowrap`}
color: ${({ theme, $isActive, $hasText }) =>
$isActive || !$hasText ? theme.color.main0 : theme.color.base0};
opacity: ${({ $hasText, $isActive }) =>
!$isActive && !$hasText ? '0.4' : '1'};
justify-content: ${({ $hasText }) => (!$hasText ? 'center' : 'flex-start')};
${({ theme, $isActive }) => css`
${tw`relative w-full`}
color: ${$isActive ? theme.color.main0 : theme.color.base0};
`}
`

export const StyledLinkContent = styled.div<{ $open?: boolean }>`
${({ $open }) => css`
${tw`relative flex items-center justify-start gap-2.5 py-2 px-6 whitespace-nowrap w-full`}
transition: all linear 0.25s 0s;
${!$open &&
css`
padding-left: 1.75rem;
`}
& > span {
${fadeInOutContentCss}
}
`}
`

0 comments on commit 67ec640

Please sign in to comment.