💄 use absolute position to make margin for navbar dropdown

nonebot · Sep 22, 2024 · 5248dbb · 5248dbb
1 parent 4a11f9a
commit 5248dbb
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/packages/theme-nonepress/src/theme/Navbar/PrimaryNavbar/styles.css b/packages/theme-nonepress/src/theme/Navbar/PrimaryNavbar/styles.css
@@ -26,7 +26,7 @@
 
   /* navbar item */
   &-item {
-    @apply flex items-center text-base-content font-medium opacity-75 !bg-transparent;
+    @apply flex items-center text-base-content font-medium opacity-75;
 
     &:hover {
       @apply opacity-100;

diff --git a/packages/theme-nonepress/src/theme/NavbarItem/DocsMenuDropdownNavbarItem.tsx b/packages/theme-nonepress/src/theme/NavbarItem/DocsMenuDropdownNavbarItem.tsx
@@ -138,7 +138,11 @@ function DocsMenuDropdownNavbarItemDesktop({
         aria-haspopup="true"
         role="button"
         to={link}
-        className={clsx("menu-link", isActive && "menu-link-active", className)}
+        className={clsx(
+          "menu-link menu-item",
+          isActive && "menu-link-active",
+          className,
+        )}
         activeClassName={clsx("menu-link-active", activeClassName)}
         {...props}
       >

diff --git a/packages/theme-nonepress/src/theme/NavbarItem/DropdownNavbarItem.tsx b/packages/theme-nonepress/src/theme/NavbarItem/DropdownNavbarItem.tsx
@@ -56,7 +56,7 @@ function DropdownNavbarItemDesktop({
         role="button"
         isNavLink
         href={props.to ? undefined : "#"}
-        className={clsx("menu-link", className)}
+        className={clsx("menu-link menu-item", className)}
         activeClassName={clsx("menu-link-active", activeClassName)}
         {...props}
         onClick={props.to ? undefined : (e) => e.preventDefault()}

diff --git a/packages/theme-nonepress/src/theme/NavbarItem/styles.css b/packages/theme-nonepress/src/theme/NavbarItem/styles.css
@@ -8,17 +8,14 @@
     &-content {
       @apply rounded-md bg-base-100 shadow-lg border border-base-200;
       @apply w-max z-10 m-0 left-1/2 -translate-x-1/2;
+      @apply absolute !top-[calc(100%+0.25rem)];
     }
   }
 
   /* docs menu */
   &-docs-menu {
     &-content {
       @apply block w-[28rem] xl:w-[36rem] 2xl:w-[48rem] pl-0 overflow-hidden whitespace-normal;
-
-      &::before {
-        @apply content-none;
-      }
     }
 
     &-docs {