@manamerge/mana-atomic-ui 1.0.167 → 1.0.169

package/dist/index.js

@@ -526,7 +526,7 @@ const WrapperBackground = styled.div `
                     );
 
                     opacity: 1;
-                    transition: opacity 3s ease;
+                    transition: opacity 0.7s ease;
                     pointer-events: none;
                 }
                 &:hover::before {
@@ -702,6 +702,10 @@ const Header = ({ moleculeVariant = "primary", iconTop, iconDot, buttonLeftIcon,
 const NavBar = styled.nav `
     display: flex;
     align-items: flex-start;
+    position: absolute;
+    width: auto;
+    right: 0;
+    left: 0;
 
     ${({ theme, moleculeVariant }) => {
     var _a;
@@ -712,11 +716,11 @@ const NavBar = styled.nav `
                 align-items: center;
             }
             gap: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.gap};
-            background: ${(navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background) || "#333"};
+            background: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.background};
+            height: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.height};
+            padding: ${navigationTheme === null || navigationTheme === void 0 ? void 0 : navigationTheme.padding};
         `;
 }}
-
-    padding: 1rem;
 `;
 const BurgerWrapper = styled.div `
     flex-direction: column;
@@ -779,24 +783,46 @@ const StyledLink$1 = styled(Link).attrs(({ theme, moleculeVariant }) => {
         variant: (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) === null || _c === void 0 ? void 0 : _c.variant
     });
 }) `
+    position: relative;
+
     ${({ theme, moleculeVariant, currentPath }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const linkTheme = ((_b = (_a = theme === null || theme === void 0 ? void 0 : theme.navigation) === null || _a === void 0 ? void 0 : _a[moleculeVariant]) === null || _b === void 0 ? void 0 : _b.atomLink) || {};
     return css `
-            color: ${currentPath
-        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.color) || "#f0f"
-        : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color) || "#0f0"};
             font-weight: ${currentPath
-        ? ((_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.fontWeight) || "900"
+        ? ((_c = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _c === void 0 ? void 0 : _c.fontWeight) || "900"
         : (linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.fontWeight) || "700"};
+            color: ${currentPath
+        ? (_d = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.currentPath) === null || _d === void 0 ? void 0 : _d.color
+        : linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.color};
+
+            /* ---------- CENTER EXPANDING UNDERLINE ---------- */
+            &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _e === void 0 ? void 0 : _e.bottom) || "2px"};
+                width: 100%;
+                height: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _f === void 0 ? void 0 : _f.height) || "2px"};
+                background: ${(_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _g === void 0 ? void 0 : _g.background};
+                transform: scaleX(${currentPath ? 1 : 0});
+                transform-origin: ${(_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _h === void 0 ? void 0 : _h.transformOrigin};
+                transition: transform ${(_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.underline) === null || _j === void 0 ? void 0 : _j.transition};
+            }
+
+            &:hover::after {
+                transform: scaleX(1);
+            }
+
             &:focus {
-                color: ${((_e = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _e === void 0 ? void 0 : _e.color) || "gold"};
-                box-shadow: ${((_f = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _f === void 0 ? void 0 : _f.boxShadow) || "none"};
-                transform: ${((_g = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _g === void 0 ? void 0 : _g.transform) || "none"};
+                color: ${(_k = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _k === void 0 ? void 0 : _k.color};
+                box-shadow: ${((_l = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _l === void 0 ? void 0 : _l.boxShadow) || "none"};
+                transform: ${((_m = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.focus) === null || _m === void 0 ? void 0 : _m.transform) || "none"};
             }
             &:hover {
-                color: ${((_h = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _h === void 0 ? void 0 : _h.color) || "purple"};
-                transition: ${((_j = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _j === void 0 ? void 0 : _j.transition) || "none"};
+                color: ${(_o = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _o === void 0 ? void 0 : _o.color};
+                transition: ${((_p = linkTheme === null || linkTheme === void 0 ? void 0 : linkTheme.hover) === null || _p === void 0 ? void 0 : _p.transition) || "none"};
+                text-decoration: none;
             }
         `;
 }};