diff options
| -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 { |