Skip to content

Commit

Permalink
fix: toggle button position + remove storage bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmolki
gmolki committed Aug 5, 2024
1 parent 357e967 commit 82b8713
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 91 deletions.
47 changes: 21 additions & 26 deletions src/components/modules/RouterSidebar/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import {
StyledRouterLink2,
StyledNav2Container,
StyledNav2Title,
StyledProgressBar,
StyledSidebar,
StyledStorageContainer,
StyledToggleButton,
StyledLogoContainer,
StyledNav1Container,
Expand All @@ -23,6 +21,7 @@ import {
StyledOpenedNav2LinkContainer,
StyledClosedNav2LinkContainer,
StyledTooltip,
StyledToggleButtonContainer,
} from './styles'
import { RouteProps, RouterSidebarProps } from './types'
import { RouterLinkProps } from '../RouterLink'
Expand Down Expand Up @@ -180,12 +179,24 @@ const ClosedNav2Route = ({
}
ClosedNav2Route.displayName = 'ClosedNav2Route'

// -------------------------
const ToggleButton = ({ isOpen = false, handleToggle, onToggle }: any) => (
<StyledToggleButtonContainer>
{!!onToggle && (
<div tw="px-6">
<StyledToggleButton $isOpen={isOpen} onClick={handleToggle} />
</div>
)}
</StyledToggleButtonContainer>
)

ToggleButton.displayName = 'ToggleButton'

// -------------------------

export const RouterSidebar = ({
routes,
pathname,
allowanceInfo,
Link,
breakpoint: $breakpoint = 'md',
open,
Expand Down Expand Up @@ -224,12 +235,6 @@ export const RouterSidebar = ({
[pathname, routes],
)

// --------------------------------------------

const consumedSize = (allowanceInfo?.consumedSize || 0) / 1024
const allowedSize = (allowanceInfo?.allowedSize || 0) / 1024
const storePercent = allowedSize ? consumedSize / allowedSize : 0

// -----------------------------------------

const logo = useMemo(
Expand Down Expand Up @@ -286,6 +291,8 @@ export const RouterSidebar = ({
}}
/>
))}
<div tw="flex-1" />
<ToggleButton onToggle={onToggle} handleToggle={handleToggle} />
</StyledNav1Container>
</StyledNav1>
<StyledNav2
Expand Down Expand Up @@ -333,23 +340,11 @@ export const RouterSidebar = ({
))}
</StyledClosedNav2LinkContainer>
<div tw="flex-1" />
<div tw="py-12 flex flex-col justify-end h-[14.9375rem] shrink-0 w-full">
{!!onToggle && (
<div tw="px-6">
<StyledToggleButton onClick={handleToggle} />
</div>
)}
<div tw="flex-1" />
<StyledStorageContainer>
<div tw="mb-4 flex gap-1 flex-wrap">
<span tw="whitespace-nowrap">{consumedSize.toFixed(3)} GB</span>
<span tw="opacity-60 font-normal whitespace-nowrap">
of {allowedSize.toFixed(3)} GB
</span>
</div>
<StyledProgressBar $percent={storePercent} />
</StyledStorageContainer>
</div>
<ToggleButton
isOpen
onToggle={onToggle}
handleToggle={handleToggle}
/>
</StyledNav2Container>
</StyledNav2>
</StyledSidebar>
Expand Down
98 changes: 37 additions & 61 deletions src/components/modules/RouterSidebar/styles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const StyledNav1 = styled.nav`
`

export const StyledNav1Container = styled.div`
${tw`flex flex-col items-start`}
${tw`h-full flex flex-col items-start`}
width: ${nav1OpenSize}rem;
`

Expand Down Expand Up @@ -101,7 +101,7 @@ export const StyledNav2 = styled.nav`
`

export const StyledNav2Container = styled.div`
${tw`flex flex-col items-start h-full`}
${tw`h-full flex flex-col items-start`}
`

export const StyledNav2TitleContainer = styled.div`
Expand Down Expand Up @@ -265,12 +265,19 @@ export const StyledLogo = styled(Logo).attrs((props) => {
${tw`inline-flex items-center justify-center`}
`

export const StyledToggleButton = styled(Icon).attrs((props) => {
return {
export const StyledToggleButtonContainer = styled.div`
${tw`flex items-center justify-center shrink-0 w-full py-12`}
`

type StyledToggleButtonProps = {
$isOpen: boolean
}
export const StyledToggleButton = styled(Icon).attrs(
(props: StyledToggleButtonProps) => ({
...props,
name: 'angle-right', //props.$open ? 'angle-left' : 'angle-right',
}
})`
name: props.$isOpen ? 'angle-right' : 'angle-left',
}),
)<StyledToggleButtonProps>`
${({ theme }) => {
const { toggle } = theme.component.sidebar.nav2
Expand All @@ -282,10 +289,6 @@ export const StyledToggleButton = styled(Icon).attrs((props) => {
}}
`

export const StyledStorageContainer = styled.div.attrs(addClasses('tp-body3'))`
${tw`w-[10.5rem] max-w-full mx-auto px-1 cursor-auto`}
`

// https://github.com/aleph-im/aleph-account/blob/8b920e34fab9f4f70e3387eed2bd5839ae923971/src/layouts/MainLayout.vue#L131C14-L131C14
export const StyledProgressBar = styled.div<{ $percent: number }>(
({ theme, $percent }) => {
Expand Down Expand Up @@ -336,26 +339,6 @@ const fadeOutIn1Reverse = keyframes`
}
`

const fadeOutIn2 = keyframes`
0%, 6%, 80%, 100% {
opacity: 1;
}
46%, 60% {
opacity: 0;
}
`

const fadeOutIn2Reverse = keyframes`
0%, 10%, 70%, 100% {
opacity: 1;
}
30% {
opacity: 0;
}
`

export type StyledSidebarProps = {
$isOpen?: boolean
$isHover?: boolean
Expand All @@ -367,6 +350,7 @@ export type StyledSidebarProps = {

export const StyledSidebar = styled.aside<StyledSidebarProps>`
${tw`hidden items-stretch justify-start h-full`}
z-index: 15;
${({ $breakpoint }) => css`
/* MOBILE LAYOUT */
Expand Down Expand Up @@ -425,20 +409,11 @@ export const StyledSidebar = styled.aside<StyledSidebarProps>`
animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn1Reverse};
}
& ${StyledToggleButton} {
transform: rotateZ(-180deg);
transition: transform ease-in-out ${0.6 / $speed}s ${0.4 / $speed}s;
}
& ${StyledStorageContainer} {
font-size: 0.625rem;
transition: font-size linear 0s ${0.3 / $speed}s;
animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn2Reverse};
& ${StyledNav1} ${StyledToggleButtonContainer} {
${tw`opacity-100 visible`}
& > :first-child {
max-width: 100%;
transition: max-width linear 0s ${0.3 / $speed}s;
}
transition: opacity ease-in-out ${0.2 / $speed}s ${0.55 / $speed}s,
color ease-in-out 0.25s 0s !important;
}
& ${StyledNav1Link} {
Expand Down Expand Up @@ -514,21 +489,12 @@ export const StyledSidebar = styled.aside<StyledSidebarProps>`
animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn1};
}
& ${StyledToggleButton} {
transform: rotateZ(0deg);
transition: transform ease-in-out ${0.6 / $speed}s
${0.25 / $speed}s;
}
& ${StyledStorageContainer} {
font-size: 0.5rem;
transition: font-size linear 0s ${0.46 / $speed}s;
animation: ${1 / $speed}s ease-in-out 0s ${fadeOutIn2};
& ${StyledNav1} ${StyledToggleButtonContainer} {
${tw`opacity-0 invisible`}
& > :first-child {
max-width: 0;
transition: max-width linear 0s ${0.46 / $speed}s;
}
transition: opacity ease-in-out ${0.2 / $speed}s 0s,
visibility linear ${0.2 / $speed}s 0s,
color ease-in-out 0.25s 0s !important;
}
& ${StyledNav1Link} {
Expand All @@ -550,13 +516,15 @@ export const StyledSidebar = styled.aside<StyledSidebarProps>`
transition: color ease-in-out 0.25s 0s !important;
}
`};
}
${({ theme, $showOpened }) =>
$showOpened
? css`
& ${StyledNav2} ${StyledToggleButtonContainer} {
visibility: hidden;
}
& ${StyledOpenedNav2LinkContainer} {
& ${StyledRouterLink2} ${StyledRouterLink}._active {
background-color: ${theme.component.sidebar.nav2.active
Expand All @@ -570,6 +538,10 @@ export const StyledSidebar = styled.aside<StyledSidebarProps>`
}
`
: css`
& ${StyledNav1} ${StyledToggleButtonContainer} {
visibility: hidden;
}
& ${StyledOpenedNav2LinkContainer} {
position: absolute;
visibility: hidden;
Expand All @@ -587,7 +559,11 @@ export const StyledSidebar = styled.aside<StyledSidebarProps>`
!$showClosed &&
css`
& ${StyledClosedNav2LinkContainer} {
position: absolute;
visibility: hidden;
transition: visibility 500ms;
}
& ${StyledNav2} ${StyledToggleButtonContainer} {
visibility: hidden;
transition: visibility 500ms;
}
Expand Down
4 changes: 0 additions & 4 deletions src/components/modules/RouterSidebar/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,6 @@ export type RouterSidebarProps = {
routes: Route[]
pathname: string
breakpoint: BreakpointId
allowanceInfo?: {
consumedSize?: number
allowedSize?: number
}
Link: LinkComponent
open?: boolean
logoHref?: string
Expand Down

0 comments on commit 82b8713

Please sign in to comment.