feat(style): use a compact layout when there are many nav items (#1415)

web-infra-dev · Sep 13, 2024 · 174b188 · 174b188
1 parent 22552b5
commit 174b188
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx b/packages/theme-default/src/components/Nav/NavMenuSingleItem.tsx
@@ -12,6 +12,7 @@ interface Props {
   langs?: string[];
   base: string;
   rightIcon?: React.ReactNode;
+  compact?: boolean;
 }
 
 export function NavMenuSingleItem(
@@ -28,7 +29,7 @@ export function NavMenuSingleItem(
         key={item.text}
         className={`rspress-nav-menu-item ${styles.singleItem} ${
           isActive ? styles.activeItem : ''
-        } text-sm font-medium mx-1.5 px-3 py-2 flex items-center`}
+        } text-sm font-medium ${item.compact ? 'mx-0.5' : 'mx-1.5'} px-3 py-2 flex items-center`}
       >
         <Tag tag={item.tag} />
         {item.text}

diff --git a/packages/theme-default/src/components/Nav/index.tsx b/packages/theme-default/src/components/Nav/index.tsx
@@ -69,6 +69,7 @@ export function Nav(props: NavProps) {
               langs={langs}
               base={base}
               key={item.link}
+              compact={menuItems.length > 5}
               {...item}
             />
           );

diff --git a/packages/theme-default/src/components/Search/index.module.scss b/packages/theme-default/src/components/Search/index.module.scss
@@ -213,7 +213,7 @@
   cursor: pointer;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 960px) {
   .navSearchButton {
     display: none;
   }