Lncvrt-Games/launcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New sidebar style

Browse Source
This commit is contained in:
Lncvrt
2026-01-01 02:24:53 -07:00
parent b46c52e042
commit 1e11525c8e
2 changed files with 59 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/componets/Sidebar.css
View File

@@ -14,7 +14,7 @@
} }
.logo { .logo {
@apply flex items-center pl-1 h-14 w-60; @apply flex items-center pl-2 h-10 w-60 pt-2;
} }
.nav-links { .nav-links {

113
src/app/componets/Sidebar.tsx
View File

@@ -17,6 +17,11 @@ import Image from 'next/image'
import Link from 'next/link' import Link from 'next/link'
import { usePathname, useSearchParams } from 'next/navigation' import { usePathname, useSearchParams } from 'next/navigation'
import { getCurrentWindow } from '@tauri-apps/api/window' import { getCurrentWindow } from '@tauri-apps/api/window'
import { Lexend } from 'next/font/google'
const lexend = Lexend({
subsets: ['latin']
})
export default function Sidebar () { export default function Sidebar () {
const { const {
@@ -63,64 +68,62 @@ export default function Sidebar () {
} }
}} }}
> >
<Image draggable={false} src={Icon} width={48} height={48} alt='' /> <Image draggable={false} src={Icon} width={36} height={36} alt='' />
<p className='ml-1 text-[17px] whitespace-nowrap'> <p className={`ml-1 text-[16px] whitespace-nowrap ${lexend.className}`}>
Lncvrt Games Launcher Lncvrt Games Launcher
</p> </p>
</div> </div>
<div className='overflow-auto'> <nav className='nav-links overflow-auto pt-2'>
<nav className='nav-links'> <Link
<Link draggable={false}
draggable={false} href='/'
href='/' className={`link relative flex items-center ${
className={`link relative flex items-center ${ pathname === '/' || pathname === '/game' ? 'active' : ''
pathname === '/' || pathname === '/game' ? 'active' : '' }`}
}`} >
> <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games
<FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Games </Link>
</Link> {getListOfGames()
{getListOfGames() .sort((a, b) => {
.sort((a, b) => { return a.id - b.id
return a.id - b.id })
}) .map(i => (
.map(i => ( <Link
<Link key={i.id}
key={i.id} draggable={false}
draggable={false} href={'/game?id=' + i.id}
href={'/game?id=' + i.id} className={`link ${
className={`link ${ pathname === '/game' && Number(params.get('id') || 0) == i.id
pathname === '/game' && Number(params.get('id') || 0) == i.id ? 'active'
? 'active' : ''
: '' } ml-auto w-50 ${
} ml-auto w-50 ${ normalConfig?.settings.alwaysShowGamesInSidebar ||
normalConfig?.settings.alwaysShowGamesInSidebar || pathname === '/' ||
pathname === '/' || pathname === '/game'
pathname === '/game' ? ''
? '' : 'hidden'
: 'hidden' }`}
}`} >
> <div className='flex items-center'>
<div className='flex items-center'> <FontAwesomeIcon icon={faGamepad} className='mr-1' />
<FontAwesomeIcon icon={faGamepad} className='mr-1' /> <span className='truncate max-w-full'>{i.name}</span>
<span className='truncate max-w-full'>{i.name}</span> </div>
</div> </Link>
</Link> ))}
))} <Link
<Link draggable={false}
draggable={false} href='/settings'
href='/settings' className={`link ${pathname === '/settings' ? 'active' : ''}`}
className={`link ${pathname === '/settings' ? 'active' : ''}`} >
> <FontAwesomeIcon icon={faCog} className='mr-1' /> Settings
<FontAwesomeIcon icon={faCog} className='mr-1' /> Settings </Link>
</Link> <button
<button onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
onClick={() => openUrl('https://games.lncvrt.xyz/discord')} className='link mr-auto'
className='link mr-auto' >
> <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
<FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community </button>
</button> </nav>
</nav>
</div>
<div <div
className='sidebar-downloads' className='sidebar-downloads'
hidden={downloadProgress.length == 0} hidden={downloadProgress.length == 0}