diff options
| author | lonkaars <l.leblansch@gmail.com> | 2021-03-26 18:55:06 +0100 |
|---|---|---|
| committer | lonkaars <l.leblansch@gmail.com> | 2021-03-26 18:55:06 +0100 |
| commit | a01b3f2d8fae7fa8aaa9f2c6b3ae86a91dc9b0e3 (patch) | |
| tree | ba8ad47de952580c1ba3f4196e7c9b248ef7d107 | |
| parent | 1fafddfd1084753aeb7b6429065e761d708809bb (diff) | |
navbar item hover style
| -rw-r--r-- | pages/index.tsx | 4 | ||||
| -rw-r--r-- | 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 { |