feat (next): Added <ChevronRight />'s render condition, based on mainItem.items.length

[GrungeElFz]

Issue:

#1513 : Sidebar menu: icon is always displayed, regardless of the sub-items existence

---

Modified:

File: nav-main.svelte

↳ (sites/docs/src/lib/registry/new-york/block/sidebar-07/components/nav-main.svelte)

• Added <ChevronRight />'s render condition, based on mainItem.items.length

File: nav-main.svelte

↳ (sites/docs/src/lib/registry/new-york/block/sidebar-08/components/nav-main.svelte)

• Added <ChevronRight />'s render condition, based on mainItem.items.length

---

Explanation:

[app-sidebar.svelte]

↳ (sites/docs/src/lib/registry/new-york/block/sidebar-07/components/app-sidebar.svelte)

// This is sample data.
const data = {
  user: {
    name: 'shadcn',
    email: '[email protected]',
    avatar: '/avatars/shadcn.jpg'
  },
  teams: [
    { name: 'Acme Inc', logo: GalleryVerticalEnd, plan: 'Enterprise' },
    { name: 'Acme Corp.', logo: AudioWaveform, plan: 'Startup' },
    { name: 'Evil Corp.', logo: Command, plan: 'Free' }
  ],
  navMain: [
    {
      title: 'Playground',
      url: '#',
      icon: SquareTerminal,
      isActive: true,
      items: [
        { title: 'History', url: '#' },
	{ title: 'Starred', url: '#' },
	{ title: 'Settings', url: '#' }
      ]
    },
    {
      title: 'Models',
      url: '#',
      icon: Bot,
      items: [
        { title: 'Genesis', url: '#' },
        { title: 'Explorer', url: '#' },
        { title: 'Quantum', url: '#' }
      ]
    },
    {
      title: 'Documentation',
      url: '#',
      icon: BookOpen,
      items: [
        { title: 'Introduction', url: '#' },
        { title: 'Get Started', url: '#' },
        { title: 'Tutorials', url: '#' },
        { title: 'Changelog', url: '#' }
      ]
    },
    {
      title: 'Settings',
      url: '#',
      icon: Settings2,
      items: [
        { title: 'General', url: '#' },
        { title: 'Team', url: '#' },
        { title: 'Billing', url: '#' },
        { title: 'Limits', url: '#' }
      ]
    }
    ],
  projects: [
    { name: 'Design Engineering', url: '#', icon: Frame },
    { name: 'Sales & Marketing', url: '#', icon: ChartPie },
    { name: 'Travel', url: '#', icon: Map }
  ]
};

Referring to the app-sidebar.svelte above, the current<ChevronRight /> in the nav-main.svelte is being functional as expected.

---

However, for the case where there is no items: [...]:

{
  title: 'Playground',
  url: '#',
  icon: SquareTerminal,
  isActive: true,
},

The current <ChevronRight /> in the nav-main.svelte will always be rendered and clickable, regardless of the data existence of the item:

<Sidebar.MenuButton {...props}>
  {#snippet tooltipContent()}
    {mainItem.title}
  {/snippet}
    {#if mainItem.icon}
      <mainItem.icon />
    {/if}
  <span>{mainItem.title}</span>
  <ChevronRight
    class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
  />
</Sidebar.MenuButton>

↑ Current version

---

This change is to encapsulate <ChevronRight /> in the condition to check whether to render <ChevronRight />, based on the existence and the amount of item more than 1 from mainItem.items:

<Sidebar.MenuButton {...props}>
  {#snippet tooltipContent()}
    {mainItem.title}
  {/snippet}
    {#if mainItem.icon}
      <mainItem.icon />
    {/if}
  <span>{mainItem.title}</span>
  {#if mainItem.items && mainItem.items.length > 1}
    <ChevronRight
      class="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90"
    />
  {/if}
</Sidebar.MenuButton>

↑ Updated version

[changeset-bot]

⚠️ No Changeset found

Latest commit: a99d7e8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR