Add dropdown arrow to library to show/hide games

src/app/main/layout.tsx

@@ -86,6 +86,7 @@ export default function RootLayout ({
   const [versions, setVersions] = useState<Store | null>(null)
   const [account, setAccount] = useState<Store | null>(null)
 
+  const [sidebarShowGames, setSidebarShowGames] = useState<boolean>(false)
   const [linuxUseWine, setLinuxUseWine] = useState<boolean>(false)
   const [linuxWineCommand, setLinuxWineCommand] =
     useState<string>('wine %path%')
@@ -827,6 +828,9 @@ export default function RootLayout ({
     }
 
     watchSettings<string>('theme', v => setTheme(v ?? 'dark'))
+    watchSettings<boolean>('sidebarShowGames', v =>
+      setSidebarShowGames(v ?? true)
+    )
     watchSettings<boolean>('linuxUseWine', v => setLinuxUseWine(v ?? false))
     watchSettings<string>('linuxWineCommand', v =>
       setLinuxWineCommand(v ?? 'wine %path%')
@@ -892,6 +896,7 @@ export default function RootLayout ({
                 settings,
                 versions,
                 account,
+                sidebarShowGames,
                 linuxUseWine,
                 linuxWineCommand,
                 theme,

src/components/ExpandArrow.tsx

@@ -0,0 +1,12 @@
+import '@/styles/dropdown.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
+
+export default function ExpandArrow ({ open }: { open: boolean }) {
+  return (
+    <FontAwesomeIcon
+      icon={faChevronDown}
+      className={`dropdown-arrow ${!open ? 'open' : ''}`}
+    />
+  )
+}

src/components/Sidebar.tsx

@@ -24,6 +24,7 @@ import { getCurrentWindow } from '@tauri-apps/api/window'
 import { Lexend } from 'next/font/google'
 import React, { useState } from 'react'
 import { message } from '@tauri-apps/plugin-dialog'
+import ExpandArrow from './ExpandArrow'
 
 const lexend = Lexend({
   subsets: ['latin']
@@ -44,7 +45,8 @@ export default function Sidebar () {
     settings,
     developerMode,
     accountName,
-    accountAdmin
+    accountAdmin,
+    sidebarShowGames
   } = useGlobal()
 
   const pathname = usePathname()
@@ -138,8 +140,21 @@ export default function Sidebar () {
           }}
         >
           <FontAwesomeIcon icon={faHexagonNodes} className='mr-2' /> Library
+          {(pathname === '/main/library' ||
+            pathname.startsWith('/main/game')) && (
+            <div
+              className='ml-auto w-6 h-6 flex justify-center items-center'
+              onClick={async e => {
+                e.preventDefault()
+                await settings?.set('sidebarShowGames', !sidebarShowGames)
+              }}
+            >
+              <ExpandArrow open={sidebarShowGames} />
+            </div>
+          )}
         </Link>
         {(pathname === '/main/library' || pathname.startsWith('/main/game')) &&
+          sidebarShowGames &&
           serverVersionList?.games
             .filter(g =>
               serverVersionList.versions

src/providers/GlobalProvider.tsx

@@ -54,6 +54,7 @@ type GlobalCtxType = {
   settings: Store | null
   versions: Store | null
   account: Store | null
+  sidebarShowGames: boolean
   linuxUseWine: boolean
   linuxWineCommand: string
   theme: string