ownego / polaris-vue

Shopify Polaris design system for Vue JS. Shopify’s design system to help us build the great apps for all of our merchants.
https://ownego.github.io/polaris-vue/
MIT License
139 stars 29 forks source link

Is it possible to add navigation menus #379

Closed geneowak closed 4 months ago

geneowak commented 5 months ago

Scenario

Add app navigation menus within the app and not from the app dashboard. Looking for a component like Nav-Menu

image

Question

I haven't been able to find the Nav-Menu component mentioned above but according to the Shopify docs there is a web API for the ui-nav-menu and I'm wondering if there is a way of using that with the vue app using your package because I have not been able to find a way so far.

How do you create menus within your own @ownego Shopify apps

<ui-nav-menu>
  <a href="/" rel="home">Home</a>
  <a href="/templates">Templates</a>
  <a href="/settings">Settings</a>
</ui-nav-menu>
juzser commented 4 months ago

@geneowak Correct, you have to use the ui-nav-menu element from AppBridge by Shopify.

Here is the example that we're using in our project:

// Install navigation side bar
  const setNavigation = (navigationItems) => {
    // only run first time
    if (navMenu) {
      return;
    }

    setupClientSideRouting();

    navMenu = document.createElement('ui-nav-menu');

    if (navMenu) {
      navigationItems.forEach(item => {
        const anchor = document.createElement('a');

        anchor.href = item.destination;
        anchor.setAttribute('rel', item.rel);
        anchor.textContent = item.label;

        anchor.addEventListener('click', e => {
          e.preventDefault();
        });

        navMenu?.appendChild(anchor);
      });

      document.head.append(navMenu);
    }
  };

It's a bit roughly and just a part of our scripts so you have to modify as your need.

geneowak commented 4 months ago

@juzser thanks for the quick response. I've tried out what you suggested but the menu is not showing up in the app. When I inspect the elements, I see the ui-nav-menu in the head but it still is not showing up in the app menu.

geneowak commented 4 months ago

@juzser it works when I add

<meta name="shopify-api-key" content="%VITE_SHOPIFY_API_KEY%" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js" /></script>

to the header, is that necessary or is there a way that Polaris vue can take care of that?

juzser commented 4 months ago

I think you're mis-understanding the purpose or usability of AppBridge and Polaris.

The AppBridge is must-have for embedded apps and will not be included in Polaris (even in the Shopify React version)

geneowak commented 4 months ago

Ah! Sorry for the confusion, it's my first time building an embedded app with a UI so am not familiar with how it is supposed to work. I thought adding Polaris Vue was all I needed to do and that it would take care of everything else.

geneowak commented 4 months ago

Going to close this since I have gotten a working solution.

Many thanks @juzser 🙏🏾