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

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 modal in your Shop Admin js file. E.g.

import * as octantisHooks from "octantis";
Hooks = { ...octantisHooks }

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