Show a list when opening download menu, change button styles, switch from scss to tailwindcss, add downloads button to sidebar and more

src/componets/Sidebar.css

@@ -4,6 +4,15 @@
   @apply fixed top-0 left-0 w-60 h-screen bg-[#191919] flex flex-col border-e-[1px] border-[#2a2a2a];
 }
 
+.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;
 }
@@ -13,14 +22,18 @@
 }
 
 .link {
-  @apply text-[#bdbdbd] p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s];
+  @apply text-[#bdbdbd] p-2 rounded-md no-underline cursor-pointer transition-colors duration-[0.25s] border border-transparent;
 }
 
 .link.active {
-  @apply bg-[#313131];
+  @apply bg-[#242424] border-[#323232];
 }
 
 .link.active,
 .link:hover {
   @apply text-white;
 }
+
+.link.active:hover {
+  @apply bg-[#323232] border-[#484848];
+}

src/componets/Sidebar.tsx

@@ -2,13 +2,14 @@ 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 { faCog, faDownload, 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 { SidebarProps } from '../types/SidebarProps'
 
-const Sidebar = () => {
+export default function Sidebar({ downloadProgress }: SidebarProps) {
   const [rot, setRot] = useState(0)
   const [dir, setDir] = useState(1)
 
@@ -62,8 +63,9 @@ const Sidebar = () => {
         <a draggable={false} href="#settings" className={`link ${(window.location.hash || '#installs') === '#settings' ? 'active' : ''}`}><FontAwesomeIcon icon={faCog} className="mr-2" /> Settings</a>
         <a draggable={false} onClick={() => openUrl("https://berrydash.lncvrt.xyz/discord")} className="link"><FontAwesomeIcon icon={faDiscord} className="mr-2" /> Support</a>
       </nav>
+      <div className='sidebar-downloads'>
+        <p><FontAwesomeIcon icon={faDownload} /> Downloads</p>
+      </div>
     </aside>
   )
 }
-
-export default Sidebar