View Source Shino.UI.VerticalNav (shino v0.1.1-alpha.0)

Provides vertical navigation related components.

Examples

<VerticalNav.root>
  <VerticalNav.group>
    <VerticalNav.item active={assigns[:nav] == :home}>
      <VerticalNav.anchor navigate={~p"/"}>
        <.icon name="hero-home" class="mr-2 h-4 w-4" /> Overview
      </VerticalNav.anchor>
    </VerticalNav.item>

    <VerticalNav.item active={assigns[:nav] == :income}>
      <VerticalNav.anchor navigate={~p"/income"} active={assigns[:nav] == :income}>
        <.icon name="hero-chart-pie" class="mr-2 h-4 w-4" /> Income
      </VerticalNav.anchor>
    </VerticalNav.item>

    <Collapsible.root
      :let={root}
      id="nav-app_releases"
      default_open={match?({:app_releases, _}, assigns[:nav])}
    >
      <Collapsible.trigger for={root}>
        <VerticalNav.item>
          <VerticalNav.plain>
            <.icon name="hero-device-phone-mobile" class="mr-2 h-4 w-4" /> APP Versions
            <.icon name="hero-chevron-down" class="ml-auto h-4 w-4" />
          </VerticalNav.plain>
        </VerticalNav.item>
      </Collapsible.trigger>

      <Collapsible.content for={root} class="mt-2 pl-6">
        <VerticalNav.sub_group>
          <VerticalNav.item active={assigns[:nav] == {:app_releases, :ios}}>
            <VerticalNav.anchor navigate={~p"/app_releases/ios"}>
              iOS APP Versions
            </VerticalNav.anchor>
          </VerticalNav.item>

          <VerticalNav.item active={assigns[:nav] == {:app_releases, :android}}>
            <VerticalNav.anchor navigate={~p"/app_releases/android"}>
              Android APP Versions
            </VerticalNav.anchor>
          </VerticalNav.item>
        </VerticalNav.sub_group>
      </Collapsible.content>
    </Collapsible.root>
  </VerticalNav.group>
</VerticalNav.root>

Summary

Functions

Renders a sidebar anchor.

Renders a sidebar group.

Renders a sidebar item.

Renders a sidebar plain.

The root contains all the parts of a collapsible.

Renders a sidebar sub_group.

Functions

Renders a sidebar anchor.

It should be used with <VerticalNav.item />.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["href", "navigate", "patch", "method"].

Slots

  • inner_block (required)

Renders a sidebar group.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sidebar item.

Attributes

  • class (:string) - Defaults to nil.
  • active (:boolean) - Defaults to false.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sidebar plain.

It should be used with <VerticalNav.item />.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

The root contains all the parts of a collapsible.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

Renders a sidebar sub_group.

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)