From a01b3f2d8fae7fa8aaa9f2c6b3ae86a91dc9b0e3 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Fri, 26 Mar 2021 18:55:06 +0100
Subject: navbar item hover style

---
 pages/index.tsx       | 4 ++--
 styles/navbarItem.css | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index e76b666..1d9f474 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,8 +13,8 @@ export default function Home() {
 			</div>
 			<div className="navAreaWrapper">
 				<div className="sticky">
-					<NavbarItem icon={<HomeRoundedIcon/>} title="Home" href="#"/>
-					<NavbarItem icon={<SearchRoundedIcon/>} title="Search for posts" href="#"/>
+					<NavbarItem icon={<HomeRoundedIcon/>} title="Home" href="/"/>
+					<NavbarItem icon={<SearchRoundedIcon/>} title="Search for posts" href="/search"/>
 				</div>
 			</div>
 			<div className="contentWrapper">
diff --git a/styles/navbarItem.css b/styles/navbarItem.css
index 843f510..9c042a9 100644
--- a/styles/navbarItem.css
+++ b/styles/navbarItem.css
@@ -9,6 +9,15 @@
 	padding: 8px;
 	border-radius: 8px;
 	margin-bottom: 12px;
+
+	transition-property: background-color, color;
+	transition-duration: .15s;
+}
+
+.navbarItem.active,
+.navbarItem:hover {
+	background-color: var(--heliotrope-gray);
+	color: var(--oxford-blue);
 }
 
 .navbarItem span {
-- 
cgit v1.2.3