Skip to content

Commit

Permalink
fix/refactor: sidebar speed + short screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmolki
gmolki committed Aug 6, 2024
1 parent 91488ba commit 36c317b
Show file tree
Hide file tree
Showing 4 changed files with 295 additions and 202 deletions.
308 changes: 172 additions & 136 deletions src/components/modules/RouterSidebar/cmp.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { useState } from 'react'
import { StoryFn } from '@storybook/react'
import RouterSidebar from './cmp'
import { RouterSidebarProps } from './types'
import { Route } from '../../../types'

export default {
title: 'Components/UI/modules/RouterSidebar',
Expand Down Expand Up @@ -67,26 +68,160 @@ const defaultArgs: Partial<RouterSidebarProps> = {
Link: (props) => <a {...props} />,
}

// ---
const nestedRoutes: Route[] = [
{
name: 'Console',
href: '/',
icon: 'console',
children: [
{
name: 'Solutions',
href: '/',
exact: true,
children: [
{
name: 'Dashboard',
href: '/',
exact: true,
icon: 'dashboard',
},
{
name: 'Settings',
href: '/settings',
exact: true,
icon: 'settings',
},
{
name: 'Web3 Hosting',
href: '/hosting',
icon: 'web3HostingBox',
children: [
{
name: 'Manage your website',
href: '/hosting/website',
icon: 'manageWebsite',
},
],
},
{
name: 'Computing',
href: '/computing',
icon: 'computeSolutions',
children: [
{
name: 'Functions',
href: '/computing/function',
icon: 'functions',
},
{
name: 'Instances',
href: '/computing/instance',
icon: 'instance',
},
{
name: 'Confidential',
href: '/computing/confidential',
disabled: true,
label: '(SOON)',
icon: 'confidential',
},
],
},
{
name: 'Storage',
href: '/storage',
icon: 'storageSolutions',
children: [
{
name: 'Volumes',
href: '/storage',
icon: 'storageSolutions',
},
],
},
{
name: 'Tools',
href: '#',
icon: 'console',
children: [
{
name: 'VRF',
href: 'https://medium.com/aleph-im/aleph-im-verifiable-random-function-vrf-b03544a7e904',
external: true,
highlighted: true,
target: '_blank',
icon: 'arrow-up-right-from-square',
},
{
name: 'Indexer Framework',
href: 'https://docs.aleph.im/tools/indexer/',
external: true,
highlighted: true,
target: '_blank',
icon: 'arrow-up-right-from-square',
},
],
},
],
},
],
},
{
name: 'Account',
icon: 'profile',
href: 'https://account.aleph.im/',
target: '_blank',
external: true,
},
{
name: 'Explorer',
icon: 'explore',
href: 'https://explorer.aleph.im/',
target: '_blank',
external: true,
},
{
name: 'Swap',
icon: 'swap',
href: 'https://swap.aleph.im/',
target: '_blank',
external: true,
},
]

const Template: StoryFn<typeof RouterSidebar> = (args) => {
const [open, setOpen] = useState<boolean>()
const ViewportBox = ({
children,
height = '1100px',
}: {
children: React.ReactNode
height?: string
}) => (
<div style={{ height }} tw="flex overflow-hidden">
{children}
<div tw="flex flex-col flex-1 overflow-x-hidden overflow-y-auto px-8 py-4 ">
<h1>A random title</h1>

return (
<div tw="h-[1100px]">
<RouterSidebar {...{ ...args, open, onToggle: setOpen }} />

{/* <h1>A random title</h1>
{Array.from({ length: 200 }, (_, i) => (
{Array.from({ length: 100 }, (_, i) => (
<p key={i}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Error debitis
ullam voluptate necessitatibus? Quod debitis autem eveniet suscipit
aperiam qui, optio laboriosam animi labore repudiandae incidunt
excepturi sint tempore accusamus.
</p>
))} */}
))}
</div>
</div>
)

// ---

const Template: StoryFn<typeof RouterSidebar> = (args) => {
const [open, setOpen] = useState<boolean>()

return (
<ViewportBox>
<RouterSidebar {...{ ...args, open, onToggle: setOpen }} />
</ViewportBox>
)
}

Expand All @@ -102,146 +237,47 @@ export const NestedRoutes = Template.bind({})
NestedRoutes.args = {
...defaultArgs,
pathname: '/computing/instance',
routes: [
{
name: 'Console',
href: '/',
icon: 'console',
children: [
{
name: 'Solutions',
href: '/',
exact: true,
children: [
{
name: 'Dashboard',
href: '/',
exact: true,
icon: 'dashboard',
},
{
name: 'Settings',
href: '/settings',
exact: true,
icon: 'settings',
},
{
name: 'Web3 Hosting',
href: '/hosting',
icon: 'web3HostingBox',
children: [
{
name: 'Manage your website',
href: '/hosting/website',
icon: 'manageWebsite',
},
],
},
{
name: 'Computing',
href: '/computing',
icon: 'computeSolutions',
children: [
{
name: 'Functions',
href: '/computing/function',
icon: 'functions',
},
{
name: 'Instances',
href: '/computing/instance',
icon: 'instance',
},
{
name: 'Confidential',
href: '/computing/confidential',
disabled: true,
label: '(SOON)',
icon: 'confidential',
},
],
},
{
name: 'Storage',
href: '/storage',
icon: 'storageSolutions',
children: [
{
name: 'Volumes',
href: '/storage',
icon: 'storageSolutions',
},
],
},
{
name: 'Tools',
href: '#',
icon: 'console',
children: [
{
name: 'VRF',
href: 'https://medium.com/aleph-im/aleph-im-verifiable-random-function-vrf-b03544a7e904',
external: true,
highlighted: true,
target: '_blank',
icon: 'arrow-up-right-from-square',
},
{
name: 'Indexer Framework',
href: 'https://docs.aleph.im/tools/indexer/',
external: true,
highlighted: true,
target: '_blank',
icon: 'arrow-up-right-from-square',
},
],
},
],
},
],
},
{
name: 'Account',
icon: 'profile',
href: 'https://account.aleph.im/',
target: '_blank',
external: true,
},
{
name: 'Explorer',
icon: 'explore',
href: 'https://explorer.aleph.im/',
target: '_blank',
external: true,
},
{
name: 'Swap',
icon: 'swap',
href: 'https://swap.aleph.im/',
target: '_blank',
external: true,
},
],
routes: nestedRoutes,
}
NestedRoutes.parameters = {
controls: { exclude: ['color', 'size'] },
}

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

const ShortScreenTemplate: StoryFn<typeof RouterSidebar> = (args) => {
const [open, setOpen] = useState<boolean>()

return (
<ViewportBox height="500px">
<RouterSidebar {...{ ...args, open, onToggle: setOpen }} />
</ViewportBox>
)
}

export const ShortScreen = ShortScreenTemplate.bind({})
ShortScreen.args = {
...defaultArgs,
pathname: '/computing/instance',
routes: nestedRoutes,
}
ShortScreen.parameters = {
controls: { exclude: ['color', 'size'] },
}

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

const LockedTemplate: StoryFn<typeof RouterSidebar> = (args) => {
return (
<div tw="h-[1100px]">
<RouterSidebar {...args} />
</div>
<ViewportBox>
<RouterSidebar {...args} onToggle={undefined} />
</ViewportBox>
)
}

export const Locked = LockedTemplate.bind({})
Locked.args = {
...defaultArgs,
open: true,
onToggle: undefined,
}
Locked.parameters = {
controls: { exclude: ['color', 'size'] },
Expand Down
15 changes: 10 additions & 5 deletions src/components/modules/RouterSidebar/cmp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,8 @@ export const RouterSidebar = ({
open,
logoHref = '/',
logoTarget,
animationSpeed = 1.5,
animationSpeedOpeningMultiplier = 0.8,
onToggle,
}: RouterSidebarProps) => {
const [hover, setHover] = useState<boolean | undefined>(false)
Expand Down Expand Up @@ -246,20 +248,21 @@ export const RouterSidebar = ({
[Link, logoHref, logoTarget],
)

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

// --------------------------------------
const theme = useTheme()
const $closingSpeed = animationSpeed
const $openingSpeed = animationSpeed * animationSpeedOpeningMultiplier
const $isOpen = open
const $isHover = hover && !!onToggle
const isOpenState = $isOpen || $isOpen === undefined
const theme = useTheme()

const { shouldMount: $shouldMountOpened } = useTransition(
isOpenState,
theme.transition.duration.normal,
theme.transition.duration.normal / $closingSpeed,
)
const { shouldMount: $shouldMountClosed } = useTransition(
!isOpenState,
theme.transition.duration.normal,
theme.transition.duration.normal / $openingSpeed,
)

const $showOpened = $shouldMountOpened && !$shouldMountClosed
Expand All @@ -273,6 +276,8 @@ export const RouterSidebar = ({
$isHover,
$showOpened,
$showClosed,
$closingSpeed,
$openingSpeed,
}}
>
<StyledNav1>
Expand Down
Loading

0 comments on commit 36c317b

Please sign in to comment.