136 lines
3.7 KiB
TypeScript
136 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import './Sidebar.css'
|
|
import Icon from '../Icon.png'
|
|
import { openUrl } from '@tauri-apps/plugin-opener'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import {
|
|
faCog,
|
|
faDownload,
|
|
faRankingStar,
|
|
faServer
|
|
} from '@fortawesome/free-solid-svg-icons'
|
|
import { faDiscord } from '@fortawesome/free-brands-svg-icons'
|
|
import { useState } from 'react'
|
|
import { platform } from '@tauri-apps/plugin-os'
|
|
import { getCurrentWindow } from '@tauri-apps/api/window'
|
|
import { useGlobal } from '../GlobalProvider'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
|
|
export default function Sidebar () {
|
|
const [rot, setRot] = useState(0)
|
|
const [dir, setDir] = useState(1)
|
|
const { setShowPopup, setPopupMode, setFadeOut, downloadProgress } =
|
|
useGlobal()
|
|
const pathname = usePathname()
|
|
|
|
return (
|
|
<aside className='sidebar'>
|
|
<div
|
|
className='dragarea'
|
|
style={{
|
|
height: '30px',
|
|
width: 'calc(var(--spacing) * 60)',
|
|
top: 0,
|
|
left: 0,
|
|
marginBottom: '-15px',
|
|
position: 'absolute',
|
|
zIndex: 9999,
|
|
display: platform() == 'macos' ? 'block' : 'none',
|
|
pointerEvents: 'auto'
|
|
}}
|
|
onMouseDown={() => {
|
|
getCurrentWindow().startDragging()
|
|
}}
|
|
></div>
|
|
<div className='logo'>
|
|
<Image
|
|
draggable={false}
|
|
src={Icon}
|
|
width={48}
|
|
height={48}
|
|
alt=''
|
|
style={{
|
|
transform: `rotate(${rot}deg)`,
|
|
transition: 'transform 0.3s ease',
|
|
marginTop: ['windows', 'macos'].includes(platform())
|
|
? '20px'
|
|
: '0px'
|
|
}}
|
|
onClick={() =>
|
|
setRot(r => {
|
|
let next = r + dir * 90
|
|
if (next >= 360) {
|
|
next = 360
|
|
setDir(-1)
|
|
} else if (next <= 0) {
|
|
next = 0
|
|
setDir(1)
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
onContextMenu={() =>
|
|
setRot(r => {
|
|
let next = r - dir * 90
|
|
if (next >= 360) {
|
|
next = 360
|
|
setDir(-1)
|
|
} else if (next <= 0) {
|
|
next = 0
|
|
setDir(1)
|
|
}
|
|
return next
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<nav className='nav-links'>
|
|
<Link
|
|
draggable={false}
|
|
href='/'
|
|
className={`link ${pathname === '/' ? 'active' : ''}`}
|
|
>
|
|
<FontAwesomeIcon icon={faServer} className='mr-1' /> Installs
|
|
</Link>
|
|
<Link
|
|
draggable={false}
|
|
href='/settings'
|
|
className={`link ${pathname === '/settings' ? 'active' : ''}`}
|
|
>
|
|
<FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
|
|
</Link>
|
|
<Link
|
|
draggable={false}
|
|
href='/leaderboards'
|
|
className={`link ${pathname === '/leaderboards' ? 'active' : ''}`}
|
|
>
|
|
<FontAwesomeIcon icon={faRankingStar} className='mr-1' /> Leaderboards
|
|
</Link>
|
|
<a
|
|
draggable={false}
|
|
onClick={() => openUrl('https://berrydash.lncvrt.xyz/discord')}
|
|
className='link'
|
|
>
|
|
<FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
|
|
</a>
|
|
</nav>
|
|
<div
|
|
className='sidebar-downloads'
|
|
style={{ display: downloadProgress.length != 0 ? 'block' : 'none' }}
|
|
onClick={() => {
|
|
setPopupMode(1)
|
|
setShowPopup(true)
|
|
setFadeOut(false)
|
|
}}
|
|
>
|
|
<p>
|
|
<FontAwesomeIcon icon={faDownload} /> Downloads
|
|
</p>
|
|
</div>
|
|
</aside>
|
|
)
|
|
}
|