128 lines
3.8 KiB
TypeScript
Raw Permalink Normal View History

import React, { useEffect } from 'react'
import { useShallow } from 'zustand/react/shallow'
import { RiLayoutRight2Line } from '@remixicon/react'
import { LayoutRight2LineMod } from '../base/icons/src/public/knowledge'
2023-05-15 08:51:32 +08:00
import NavLink from './navLink'
2023-08-28 19:48:53 +08:00
import type { NavIcon } from './navLink'
import AppBasic from './basic'
import AppInfo from './app-info'
import DatasetInfo from './dataset-info'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import { useStore as useAppStore } from '@/app/components/app/store'
import cn from '@/utils/classnames'
2023-08-28 19:48:53 +08:00
2023-05-15 08:51:32 +08:00
export type IAppDetailNavProps = {
iconType?: 'app' | 'dataset' | 'notion'
2023-05-15 08:51:32 +08:00
title: string
desc: string
isExternal?: boolean
2023-05-19 17:36:44 +08:00
icon: string
icon_background: string
2023-05-15 08:51:32 +08:00
navigation: Array<{
name: string
href: string
2023-08-28 19:48:53 +08:00
icon: NavIcon
selectedIcon: NavIcon
2023-05-15 08:51:32 +08:00
}>
2024-01-16 12:14:09 +08:00
extraInfo?: (modeState: string) => React.ReactNode
2023-05-15 08:51:32 +08:00
}
const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
appSidebarExpand: state.appSidebarExpand,
setAppSiderbarExpand: state.setAppSiderbarExpand,
})))
const media = useBreakpoints()
const isMobile = media === MediaType.mobile
const expand = appSidebarExpand === 'expand'
const handleToggle = (state: string) => {
setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
}
useEffect(() => {
if (appSidebarExpand) {
localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
setAppSiderbarExpand(appSidebarExpand)
}
}, [appSidebarExpand, setAppSiderbarExpand])
2023-05-15 08:51:32 +08:00
return (
<div
className={`
2024-07-23 17:11:02 +08:00
shrink-0 flex flex-col bg-background-default-subtle border-r border-divider-burn transition-all
${expand ? 'w-[216px]' : 'w-14'}
`}
>
<div
className={`
shrink-0
${expand ? 'p-2' : 'p-1'}
`}
>
{iconType === 'app' && (
2024-07-23 17:11:02 +08:00
<AppInfo expand={expand} />
)}
{iconType === 'dataset' && (
<DatasetInfo
name={title}
description={desc}
isExternal={isExternal}
expand={expand}
extraInfo={extraInfo && extraInfo(appSidebarExpand)}
/>
)}
{!['app', 'dataset'].includes(iconType) && (
<AppBasic
mode={appSidebarExpand}
iconType={iconType}
icon={icon}
icon_background={icon_background}
name={title}
type={desc}
isExternal={isExternal}
/>
)}
2023-05-15 08:51:32 +08:00
</div>
<div className='px-4'>
<div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} />
</div>
<nav
className={`
2024-07-23 17:11:02 +08:00
grow space-y-1
${expand ? 'p-4' : 'px-2.5 py-4'}
`}
>
2023-05-15 08:51:32 +08:00
{navigation.map((item, index) => {
return (
<NavLink key={index} mode={appSidebarExpand} iconMap={{ selected: item.selectedIcon, normal: item.icon }} name={item.name} href={item.href} />
2023-05-15 08:51:32 +08:00
)
})}
</nav>
{
!isMobile && (
<div
className={`
shrink-0 py-3
${expand ? 'px-6' : 'px-4'}
`}
>
<div
className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer'
onClick={() => handleToggle(appSidebarExpand)}
>
{
expand
? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' />
: <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' />
}
</div>
</div>
)
}
2023-05-15 08:51:32 +08:00
</div>
)
}
export default React.memo(AppDetailNav)