feat: added navbar animation (#166)

* feat: added navbar animation * chore: minor changes
dscnitrourkela · Oct 16, 2024 · 02d7750 · 02d7750
1 parent 0380c46
commit 02d7750
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/components/Marginals/navbar/navbar.styles.jsx b/src/components/Marginals/navbar/navbar.styles.jsx
@@ -12,7 +12,7 @@ export const NavCover = styled.div`
 `;
 
 export const MenuLogoItem = styled.div`
-  ${tw`w-10 h-10  transition-all duration-300 cursor-pointer md:w-11 md:h-11 p-2 flex items-center justify-center hover:scale-110`}
+  ${tw`flex items-center justify-center w-10 h-10 p-2 transition-all duration-300 cursor-pointer md:w-11 md:h-11 hover:scale-110`}
   border-radius: 11.061px;
   background: rgba(255, 255, 255, 0.05);
 `;
@@ -26,7 +26,20 @@ export const MainBar = styled.nav`
 `;
 
 export const MainBarItems = styled(NavbarLink)`
-  ${tw`text-xs transition-opacity transition-transform duration-300 opacity-70 md:text-sm hover:opacity-100 hover:scale-105`}
+  ${tw`relative text-xs transition-all duration-300 opacity-70 md:text-sm hover:opacity-100`}
+
+  &::after {
+    content: '';
+    ${tw`absolute bottom-0 left-0 w-full h-[1.5px] transition-all duration-300 bg-white opacity-0 hover:relative top-10`}
+    box-shadow: 0px -5px 20px 2px hsla(0, 0%, 100%, 0.7);
+    transform: scaleX(0);
+    transform-origin: center;
+  }
+
+  &:hover::after {
+    ${tw`opacity-100`}
+    transform: scaleX(1);
+  }
 `;
 
 export const HamburgerContainer = styled.button`

diff --git a/src/config/content/Sponsers/sponsers.js b/src/config/content/Sponsers/sponsers.js
@@ -92,7 +92,7 @@ export const sponsorData = {
     },
     {
       name: 'Polygon',
-      src: '/https://res.cloudinary.com/dqqyuvg1v/image/upload/v1728921809/image_10_1_wteplu.png',
+      src: 'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1728921809/image_10_1_wteplu.png',
       width: 100,
       height: 40,
     },