Improve sidebar buttons

src/Globals.scss

@@ -8,4 +8,4 @@ body {
 
 .button {
   @apply bg-[#4378bf] hover:bg-[#5988c6] rounded-md cursor-pointer text-[16px] p-3 transition-colors duration-[0.25s];
-}
+}

src/componets/Sidebar.css

@@ -13,9 +13,14 @@
 }
 
 .link {
-  @apply text-white p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s];
+  @apply text-[#bdbdbd] p-2 rounded-lg no-underline cursor-pointer transition-colors duration-[0.25s];
 }
 
-.link.active, .link:hover {
+.link.active {
   @apply bg-[#313131];
-}
+}
+
+.link.active,
+.link:hover {
+  @apply text-white;
+}

src/componets/Sidebar.tsx

@@ -66,4 +66,4 @@ const Sidebar = () => {
   )
 }
 
-export default Sidebar
+export default Sidebar

src/main.tsx

@@ -20,10 +20,10 @@ function App () {
     return () => document.removeEventListener('contextmenu', handler)
   }, [])
 
-  function renderContent() {
+  function renderContent () {
-    if (hash === "#installs") {
+    if (hash === '#installs') {
       return <Installs />
-    } else if (hash === "#settings") {
+    } else if (hash === '#settings') {
       return <Settings />
     }
     return null
@@ -32,9 +32,7 @@ function App () {
   return (
     <>
       <Sidebar />
-      <main style={{ marginLeft: '15rem' }}>
+      <main style={{ marginLeft: '15rem' }}>{renderContent()}</main>
-        {renderContent()}
-      </main>
     </>
   )
 }