Sidebar buttons

src/componets/Sidebar.tsx

@@ -5,6 +5,9 @@ import { Lexend } from 'next/font/google'
 import Image from 'next/image'
 
 import Icon from '@/assets/Icon.png'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faDiscord } from '@fortawesome/free-brands-svg-icons'
+import { openUrl } from '@tauri-apps/plugin-opener'
 
 const lexend = Lexend({
   variable: '--font-lexend',
@@ -18,6 +21,14 @@ export default function Sidebar () {
         <Image src={Icon} width={36} height={36} alt='' />
         <p>Lncvrt Games Launcher</p>
       </div>
+      <nav>
+        <button
+          onClick={() => openUrl('https://games.lncvrt.xyz/discord')}
+          className='link mr-auto'
+        >
+          <FontAwesomeIcon icon={faDiscord} className='mr-1' /> Community
+        </button>
+      </nav>
     </aside>
   )
 }

src/styles/Sidebar.css

@@ -11,3 +11,28 @@
 .sidebar .logo p {
   @apply text-[16px];
 }
+
+.sidebar nav {
+  @apply flex flex-col px-4 space-y-1 overflow-auto pt-2;
+}
+
+.sidebar nav .link {
+  @apply text-[#bdbdbd] p-2 rounded-md no-underline cursor-pointer transition-colors duration-[0.25s] border border-transparent;
+}
+
+.sidebar nav .link.active {
+  @apply bg-(--col2) border-(--col3);
+}
+
+.sidebar nav .link.active,
+.sidebar nav .link:hover {
+  @apply text-white;
+}
+
+.sidebar nav .link.active:hover {
+  @apply bg-(--col3) border-(--col4);
+}
+
+.sidebar ::-webkit-scrollbar {
+  @apply hidden;
+}