Move to NextJS + other changes

src/app/componets/Setting.css

@@ -0,0 +1,17 @@
+@import "tailwindcss";
+
+.setting-checkbox-wrapper {
+  @apply relative w-5 h-5;
+}
+
+.setting-checkbox {
+  @apply appearance-none w-full h-full border-2 border-[#484848] rounded-md bg-[#242424] transition-colors duration-200 cursor-pointer;
+}
+
+.setting-checkbox:checked {
+  @apply bg-blue-500 border-blue-600;
+}
+
+.fa-check-icon {
+  @apply absolute top-1/2 left-1/2 text-white text-[11px] pointer-events-none -translate-x-2/4 -translate-y-2/4;
+}

src/app/componets/Setting.tsx

@@ -0,0 +1,21 @@
+import './Setting.css'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { SettingProps } from '../types/SettingProps'
+
+export function Setting ({ label, value, onChange, className }: SettingProps) {
+  return (
+    <div className={`flex items-center gap-2 mb-2 ${className}`}>
+      <label className='text-white text-lg'>{label}</label>
+      <div className='setting-checkbox-wrapper'>
+        <input
+          type='checkbox'
+          className='setting-checkbox'
+          checked={value}
+          onChange={() => onChange(!value)}
+        />
+        {value && <FontAwesomeIcon icon={faCheck} className='fa-check-icon' />}
+      </div>
+    </div>
+  )
+}

src/app/componets/Sidebar.css

@@ -0,0 +1,39 @@
+@import "tailwindcss";
+
+.sidebar {
+  @apply fixed top-0 left-0 w-60 h-screen bg-[#161616] flex flex-col border-e-[1px] border-[#242424] z-[1];
+}
+
+.sidebar-downloads {
+  @apply text-[#bdbdbd] fixed bottom-3 left-2 bg-[#242424] rounded-lg border border-[#323232] w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
+}
+
+.sidebar-downloads:hover {
+  @apply text-white;
+  @apply bg-[#323232] border-[#484848];
+}
+
+.logo {
+  @apply text-2xl font-bold p-4;
+}
+
+.nav-links {
+  @apply flex flex-col p-4 space-y-1;
+}
+
+.link {
+  @apply text-[#bdbdbd] p-2 rounded-md no-underline cursor-pointer transition-colors duration-[0.25s] border border-transparent;
+}
+
+.link.active {
+  @apply bg-[#242424] border-[#323232];
+}
+
+.link.active,
+.link:hover {
+  @apply text-white;
+}
+
+.link.active:hover {
+  @apply bg-[#323232] border-[#484848];
+}

src/app/componets/Sidebar.tsx

@@ -0,0 +1,135 @@
+'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>
+  )
+}