Add navbar elements animation util

iZooGooD · Jan 12, 2024 · 74d0a6e · 74d0a6e
1 parent 1d11392
commit 74d0a6e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 12 deletions.
diff --git a/src/components/gloabal-navbar/navbar.jsx b/src/components/gloabal-navbar/navbar.jsx
@@ -1,4 +1,3 @@
-import './navbar.scss';
 import logo from '../../assests/logos/stay_booker_logo.png';
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
@@ -37,27 +36,42 @@ const Navbar = () => {
       </div>
       <ul className="list-none hidden md:flex">
         <li className="p-4">
-          <Link to="/" className="uppercase font-medium text-slate-100">
+          <Link
+            to="/"
+            className="uppercase font-medium text-slate-100 hover-underline-animation"
+          >
             Home
           </Link>
         </li>
         <li className="p-4">
-          <Link to="listings" className="uppercase font-medium text-slate-100">
+          <Link
+            to="listings"
+            className="uppercase font-medium text-slate-100 hover-underline-animation"
+          >
             Booking
           </Link>
         </li>
         <li className="p-4">
-          <Link to="/" className="uppercase font-medium text-slate-100">
+          <Link
+            to="/"
+            className="uppercase font-medium text-slate-100 hover-underline-animation"
+          >
             About us
           </Link>
         </li>
         <li className="p-4">
           {isAuthenticated ? (
-            <Link to="/" className="uppercase font-medium text-slate-100">
+            <Link
+              to="/"
+              className="uppercase font-medium text-slate-100 hover-underline-animation"
+            >
               My account
             </Link>
           ) : (
-            <Link to="/" className="uppercase font-medium text-slate-100">
+            <Link
+              to="/"
+              className="uppercase font-medium text-slate-100 hover-underline-animation"
+            >
               Login/Register
             </Link>
           )}

diff --git a/src/components/hamburger-menu/HamburgerMenu.jsx b/src/components/hamburger-menu/HamburgerMenu.jsx
@@ -6,7 +6,7 @@ const HamburgerMenu = (props) => {
   const { isVisible, onHamburgerMenuToggle, isAuthenticated } = props;
   return (
     <div
-      className={`background-brand transition ease-in-out delay-150 ${
+      className={`background-brand shadow-2xl transition ease-in-out delay-150 ${
         isVisible ? 'absolute right-0 w-1/2 top-0 h-screen' : 'hidden'
       }`}
     >
@@ -19,22 +19,22 @@ const HamburgerMenu = (props) => {
         />
       </div>
       <ul className="list-none">
-        <li className="p-4">
+        <li className="p-4 hover:bg-sky-700">
           <Link to="/" className="uppercase font-medium text-slate-100">
             Home
           </Link>
         </li>
-        <li className="p-4">
+        <li className="p-4 hover:bg-sky-700">
           <Link to="listings" className="uppercase font-medium text-slate-100">
             Booking
           </Link>
         </li>
-        <li className="p-4">
+        <li className="p-4 hover:bg-sky-700">
           <Link to="/" className="uppercase font-medium text-slate-100">
             About us
           </Link>
         </li>
-        <li className="p-4">
+        <li className="p-4 hover:bg-sky-700">
           {isAuthenticated ? (
             <Link to="/" className="uppercase font-medium text-slate-100">
               My account

diff --git a/src/index.scss b/src/index.scss
@@ -3,4 +3,5 @@
 @tailwind utilities;
 
 @import './styles/constants';
-@import './styles/utility';
+@import './styles/utility';
+@import './components/gloabal-navbar/navbar.scss';
diff --git a/src/styles/_utility.scss b/src/styles/_utility.scss
@@ -1,3 +1,27 @@
 .background-brand {
     background-color: $primary-color;
+}
+
+// animations and effects
+.hover-underline-animation {
+    display: inline-block;
+    position: relative;
+}
+
+.hover-underline-animation::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    transform: scaleX(0);
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    background-color: $secondary-color;
+    transform-origin: bottom right;
+    transition: transform .3s ease-in;
+}
+
+.hover-underline-animation:hover::after {
+    transform: scaleX(1);
+    transform-origin: bottom left;
 }