OctantisWeb.Components.AppBridge.UiNavMenu (octantis v0.1.12)

Renders the AppBridge navigation menu <ui-nav-menu/>. This adds navigation elements for your app in the Shopify side bar.

This catches the click events on the side navigation elements and turns them into calls to JS.navigate/1. This component allows navigation without a full page reload.

Requires importing the hook AppBridgeNavManu in your Shop Admin js file. E.g. import {AppBridgeNavManu} from "octantis"

Examples

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="csrf-token" content={get_csrf_token()} />
      <meta name="shopify-api-key" content={SectionsApp.Config.api_key()} />

      <OctantisWeb.Components.Head.stylesheet />
      <OctantisWeb.Components.Head.javascript />

      <script defer data-phx-track-static type="text/javascript" src={~p"/assets/shop_admin.js"}>
      </script>

      <.ui_nav_menu>
        <:link name="Home" url="/shop_admin/" />
        <:link name="Settings" url="/shop_admin/settings" />
        <:link name="Contact" url="/shop_admin/contact" />
      </.ui_nav_menu>
    </head>
    <body style="background-color: var(--p-color-bg-app); color: var(--p-color-text);">
      {@inner_content}
    </body>
  </html>