Add sidebar

src/App.tsx

@@ -1,10 +1,12 @@
 import { HashRouter, Route, Routes } from 'react-router-dom'
 import './App.scss'
 import Home from './routes/Home'
+import Sidebar from './componets/Sidebar'
 
 export default function App () {
   return (
     <HashRouter>
+      <Sidebar />
       <Routes>
         <Route path='/' element={<Home />} />
       </Routes>

src/componets/Sidebar.css

@@ -0,0 +1,21 @@
+@import 'tailwindcss';
+
+.sidebar {
+  @apply w-60 h-screen bg-[#191919] flex flex-col;
+}
+
+.logo {
+  @apply text-2xl font-bold p-4;
+}
+
+.nav-links {
+  @apply flex flex-col p-4 space-y-1;
+}
+
+.link {
+  @apply text-white p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s];
+}
+
+.link.active, .link:hover {
+  @apply bg-[#313131];
+}

src/componets/Sidebar.tsx

@@ -0,0 +1,48 @@
+import './Sidebar.css'
+import Icon from '../Icon.png'
+import { openUrl } from '@tauri-apps/plugin-opener'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCog, faServer } from '@fortawesome/free-solid-svg-icons'
+import { faDiscord } from '@fortawesome/free-brands-svg-icons'
+import { useState } from 'react'
+
+const Sidebar = () => {
+  const [rot, setRot] = useState(0)
+  const [dir, setDir] = useState(1)
+
+  return (
+    <aside className='sidebar'>
+      <div className='logo'>
+        <img
+          src={Icon}
+          width={48}
+          height={48}
+          style={{
+            transform: `rotate(${rot}deg)`,
+            transition: 'transform 0.3s ease'
+          }}
+          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
+            })
+          }
+        />
+      </div>
+      <nav className="nav-links">
+        <a href="/" className={`link ${window.location.pathname === "/" ? "active" : ""}`}><FontAwesomeIcon icon={faServer} className="mr-2" /> Installs</a>
+        <a href="/settings" className={`link ${window.location.pathname === "/settings" ? "active" : ""}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
+        <a onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-2" /> Support</a>
+      </nav>
+    </aside>
+  )
+}
+
+export default Sidebar