| | |
| | | import React, { useEffect } from 'react' |
| | | import { useShallow } from 'zustand/react/shallow' |
| | | import { RiLayoutLeft2Line, RiLayoutRight2Line } from '@remixicon/react' |
| | | import { RiLayoutRight2Line } from '@remixicon/react' |
| | | import { LayoutRight2LineMod } from '../base/icons/src/public/knowledge' |
| | | import NavLink from './navLink' |
| | | import type { NavIcon } from './navLink' |
| | | import AppBasic from './basic' |
| | |
| | | return ( |
| | | <div |
| | | className={` |
| | | flex shrink-0 flex-col border-r border-divider-burn bg-background-default-subtle transition-all |
| | | 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'} |
| | | ${expand ? 'p-3' : 'p-2'} |
| | | `} |
| | | > |
| | | {iconType === 'app' && ( |
| | |
| | | )} |
| | | </div> |
| | | <div className='px-4'> |
| | | <div className={cn('mx-auto mt-1 h-[1px] bg-divider-subtle', !expand && 'w-6')} /> |
| | | <div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} /> |
| | | </div> |
| | | <nav |
| | | className={` |
| | |
| | | `} |
| | | > |
| | | <div |
| | | className='flex h-6 w-6 cursor-pointer items-center justify-center' |
| | | className='flex items-center justify-center w-6 h-6 text-gray-500 cursor-pointer' |
| | | onClick={() => handleToggle(appSidebarExpand)} |
| | | > |
| | | { |
| | | expand |
| | | ? <RiLayoutRight2Line className='h-5 w-5 text-components-menu-item-text' /> |
| | | : <RiLayoutLeft2Line className='h-5 w-5 text-components-menu-item-text' /> |
| | | ? <RiLayoutRight2Line className='w-5 h-5 text-components-menu-item-text' /> |
| | | : <LayoutRight2LineMod className='w-5 h-5 text-components-menu-item-text' /> |
| | | } |
| | | </div> |
| | | </div> |