v7 hive navigation better animation

.changeset/blue-singers-yawn.md

@@ -0,0 +1,6 @@
+---
+"@theguild/components": patch
+---
+
+Improve HiveNavigation submenu navigation (slower in, faster out).
+

.eslintrc.cjs

@@ -42,6 +42,15 @@ module.exports = {
     },
   },
   overrides: [
+    {
+      files: ['*.cjs'],
+      rules: {
+        '@typescript-eslint/consistent-type-imports': [
+          'warn',
+          // back to the default settings. we need type imports in .storybook/main.ts because it's stripped, not compiled
+        ],
+      },
+    },
     {
       files: ['**/*.stories.{ts,tsx}'],
       rules: {

.github/workflows/pr.yml

@@ -4,10 +4,13 @@ on:
   pull_request: {}
 
 jobs:
-  dependencies:
-    uses: the-guild-org/shared-config/.github/workflows/changesets-dependencies.yaml@main
-    secrets:
-      githubToken: ${{ secrets.GUILD_BOT_TOKEN }}
+  # Dotan commented this out on `main` 7 months ago in
+  # https://github.com/the-guild-org/docs/commit/d4d3f454587dcc09d6931cf3cd3df1c9c48ece76
+  # and we also don't need it on `v7`.
+  # dependencies:
+  #   uses: the-guild-org/shared-config/.github/workflows/changesets-dependencies.yaml@main
+  #   secrets:
+  #     githubToken: ${{ secrets.GUILD_BOT_TOKEN }}
 
   canary:
     uses: the-guild-org/shared-config/.github/workflows/release-snapshot.yml@main

packages/components/src/components/hive-navigation/index.tsx

@@ -567,7 +567,7 @@ function HamburgerButton() {
     <button
       type="button"
       aria-label="Menu"
-      className="md:_hidden hover nextra-hamburger -m-1 rounded-lg bg-transparent p-1 text-green-1000 focus-visible:outline-none focus-visible:ring active:bg-beige-200 dark:text-neutral-200 dark:active:bg-neutral-800"
+      className="hover nextra-hamburger -m-1 rounded-lg bg-transparent p-1 text-green-1000 focus-visible:outline-none focus-visible:ring active:bg-beige-200 md:hidden dark:text-neutral-200 dark:active:bg-neutral-800"
       onClick={() => setMenu(!menu)}
     >
       <MenuIcon

packages/components/src/components/hive-navigation/navigation-menu.tsx

@@ -92,14 +92,10 @@ export const NavigationMenuContent = forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      'absolute left-0 top-0 w-auto bg-white data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 dark:bg-neutral-900 [&>:first-child]:p-6',
+      'absolute left-0 top-0 w-auto bg-white data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=to-]:![animation-duration:250ms] data-[motion^=from-]:![animation-duration:450ms] dark:bg-neutral-900 [&>:first-child]:p-6',
       className,
     )}
     {...rest}
-    style={{
-      animationDuration: '0.4s',
-      ...rest.style,
-    }}
   />
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;