fix(menu): filter out menu items with missing title or href (#543)

* fix(menu): filter out menu items with missing title or href

Add defensive rendering to prevent blank menu items from appearing.
Filter out any menu items that don't have both a title and href before
rendering them in both navigation and dropdown menu components.

This prevents runtime issues where menu items might be undefined or
have missing properties, which would cause blank cards to appear in
the menu grid layout.

Co-Authored-By: duyetbot <[email protected]>

* fix(menu): reduce menu item padding for better layout

Reduce padding to improve menu layout and prevent overflow issues:
- Grid container: p-4 → p-2 (16px → 8px)
- Menu item cards: p-3 → p-2 (12px → 8px)

This provides a more compact layout that better fits the menu content
and reduces the likelihood of layout issues causing blank items.

Co-Authored-By: duyetbot <[email protected]>

---------

Co-authored-by: duyetbot <[email protected]>

Author: duyet

components/menu/menu-dropdown-style.tsx

@@ -84,7 +84,7 @@ function HasChildItems({ item }: { item: MenuItem }) {
       </DropdownMenuSubTrigger>
       <DropdownMenuPortal>
         <DropdownMenuSubContent>
-          {item.items?.map((childItem) => (
+          {item.items?.filter((childItem) => childItem.title && childItem.href).map((childItem) => (
             <MenuItem key={childItem.href} item={childItem} />
           ))}
         </DropdownMenuSubContent>

components/menu/menu-navigation-style.tsx

@@ -95,8 +95,8 @@ function HasChildItems({ item }: { item: MenuItem }) {
         </div>
       </NavigationMenuTrigger>
       <NavigationMenuContent>
-        <ul className="grid w-fit min-w-[400px] grid-cols-1 content-center items-stretch gap-2 p-4 md:min-w-[700px] md:grid-cols-2">
-          {item.items?.map((childItem) => (
+        <ul className="grid w-fit min-w-[400px] grid-cols-1 content-center items-stretch gap-2 p-2 md:min-w-[700px] md:grid-cols-2">
+          {item.items?.filter((childItem) => childItem.title && childItem.href).map((childItem) => (
             <ListItem
               key={childItem.href}
               title={
@@ -153,7 +153,7 @@ function ListItem({
         >
           <div
             className={cn(
-              'block space-y-1 rounded-md p-3 leading-none no-underline outline-hidden transition-colors select-none',
+              'block space-y-1 rounded-md p-2 leading-none no-underline outline-hidden transition-colors select-none',
               'hover:bg-accent hover:text-accent-foreground',
               'focus:bg-accent focus:text-accent-foreground',
               className