fix: transition delay

andrianfaa · Sep 6, 2023 · c33a88a · c33a88a
1 parent fd59233
commit c33a88a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/src/components/NavigationBar/NavigationMenu/NavigationMenu.component.tsx b/src/components/NavigationBar/NavigationMenu/NavigationMenu.component.tsx
@@ -86,21 +86,17 @@ const NavigationMenu = ({ isOpen, onClickClose }: NavigationMenuParams) => {
                 <li
                   key={loopKey}
                   // className={clsx("border-b border-b-gray-200 dark:border-b-zinc-700 last:border-b-0 lg:border-b-0")}
+                  className={clsx("opacity-0 -translate-x-3 lg:translate-x-0 lg:opacity-100")}
+                  style={{
+                    transitionDelay: transitionDelay
+                  }}
                 >
                   <a
                     href={url}
                     title={title}
                     target={isOpenInNewTab ? "_blank" : undefined}
                     rel={isOpenInNewTab ? "noreferrer noopener" : undefined}
-                    className={clsx(
-                      "py-2.5",
-                      "w-full block",
-                      "hover:text-gray-900 dark:hover:text-gray-100",
-                      "opacity-0 -translate-x-3 lg:translate-x-0 lg:opacity-100"
-                    )}
-                    style={{
-                      transitionDelay: transitionDelay
-                    }}
+                    className={clsx("py-2.5", "w-full block", "hover:text-gray-900 dark:hover:text-gray-100")}
                     onClick={(event) => {
                       event.isDefaultPrevented();
 

diff --git a/src/styles/_components.scss b/src/styles/_components.scss
@@ -58,11 +58,11 @@
 
     &-menu {
       ul {
-        > li > a {
+        > li {
           @apply transition-all duration-200 ease-in-out;
         }
 
-        &.open > li > a {
+        &.open > li {
           @apply translate-x-0 opacity-100;
         }
       }