Added selection background on "Home" and "Downloads" button

YARC-Official · Aug 24, 2023 · 8d0130e · 8d0130e
1 parent 2a40798
commit 8d0130e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/src/components/Sidebar/Sidebar.module.css b/src/components/Sidebar/Sidebar.module.css
@@ -38,11 +38,27 @@
  color: var(--primary);
 }
 
+.menus {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+}
+
 /* Menu Button */
 
 .button {
  display: flex;
  gap: 10px;
+
+ background: rgba(255, 255, 255, 0);
+ border-radius: 13px;
+
+ transition: background 0.1s;
+}
+
+[aria-current="page"] > .button,
+.button:hover {
+ background: rgba(255, 255, 255, 0.025);
 }
 
 .button .icon {

diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
@@ -1,7 +1,7 @@
 import styles from "./Sidebar.module.css";
 import { DiscordIcon, TwitterIcon, GithubIcon, HomeIcon, QueueIcon } from "@app/assets/Icons";
 import SidebarMenuButton from "./SidebarMenuButton";
-import { Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import VersionsList from "./Versions/List";
 import { useEffect, useState } from "react";
 import { getVersion } from "@tauri-apps/api/app";
@@ -31,13 +31,17 @@ const Sidebar: React.FC = () => {
 
  return <div className={styles.sidebar}>
  <div className={styles.menus}>
- <Link to="/"><SidebarMenuButton icon={<HomeIcon />}>Home</SidebarMenuButton></Link>
- {/* <Link to="/settings"><SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton></Link> */}
- <Link to="/queue">
+ <NavLink to="/">
+ <SidebarMenuButton icon={<HomeIcon />}>
+ Home
+ </SidebarMenuButton>
+ </NavLink>
+ {/* <NavLink to="/settings"><SidebarMenuButton icon={<SettingsIcon />}>Settings</SidebarMenuButton></NavLink> */}
+ <NavLink to="/queue">
  <SidebarMenuButton icon={<QueueIcon />}>
  Downloads {getDownloadCount() <= 0 ? "" : `(${getDownloadCount()})`}
  </SidebarMenuButton>
- </Link>
+ </NavLink>
  </div>
 
  <VersionsList />