@cartdotcom/unified-sidebar NPM

The Unified Sidebar component is a customizable navigation menu that can be used to display a list of links and submenus in a sidebar on the left side of a webpage.

This is the initial implementation of a shared Unified Sidebar.

Usage

Add the following script tag:

<script src="https://unpkg.com/@cartdotcom/unified-sidebar@latest/bundle-<env>.js"></script>

Where <env> is one of development, stage, or production.

You can replace @latest with any specific version (eg. 1.0.4).

When the script is loaded, you can use it as a web component:

<cart-unified-sidebar
  uns-url="<menu-service-url>"
  dfw-url="<dfw url>"
  jazz-url="<jazz url>"
  mcm-url="<mcm url>"
  bc-url="<bc url>"
  spa="<boolean>"
  tenant-code="<jazz tenant code>"
  user-menu-items="<JSON string>"
></cart-unified-sidebar>

Parameters

Parameter	Description
dfw-url	DFW url
jazz-url	Jazz url
mcm-url	MCM url
bc-url	Brand Console url
spa	Determines if the consuming application is a Single Page Application (SPA). If true, the PopStateEvent Web API will be used to trigger URL changes instead of a full page refresh. Defaults to false.
tenant-code	The Jazz tenant code.
uns-url	The url of the nav service that the Unified Sidebar should get the menu data from.
user-menu-items	A JSON string with an array of the items of the user menu. See below.
auth-method	The authentication method. `jazz` and `auth0` are valid values. Defaults to `auth0`

User menu items

The user menu items are an array of objects that follows the structure defined by the SideMenuNode type from the Unified Nav service. Here's an example of the structure:

[
  {
    "title": "User Menu First Menu Link",
    "url": "https://domain.com/page",
    "icon": "faThLarge"
  },
  {
    "title": "User Menu Second Menu Link",
    "url": "javascript:secondMenuLinkAction()",
    "icon": "faThLarge"
  }
]

From the example above, the title and url properties are required. The icon property is optional and it should be a valid Font Awesome 6 icon class name.

Note that the second item won't trigger a simple route change, but it will execute the secondMenuLinkAction function instead.

A real implementation of the example above would look like this:

<cart-unified-sidebar
  ...
  user-menu-items='[{"title": "User Menu First Menu Link","url": "https://domain.com/page","icon": "faThLarge"},{"title": "User Menu Second Menu Link","url": "javascript:secondMenuLinkAction()","icon": "faThLarge"}]'
></cart-unified-sidebar>

Fonts

Cart.com Design system uses two font families: Nunito and Museo Sans. Click here to read more information about the available font weights, styles and how to use them.

Usage

Below is an example of how to use the Unified Sidebar component (development bundle).

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My page title</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="https://use.typekit.net/fxs2iwb.css" />
    <script src="https://unpkg.com/@cartdotcom/unified-sidebar@latest/bundle-development.js"></script>
  </head>
  <body>
    <main data-cartid="layout-container">
      <cart-unified-sidebar uns-url="https://nav-dev.cart.site" tenant-code="acme"></cart-unified-sidebar>
      <div data-cartid="app-container">
        <!-- Your page content goes here -->
      </div>
    </div>
  </body>
</html>

Things to note:

The data-cartid="layout-container" and data-cartid="app-container" attributes are required to allow the sidebar to work correctly in different viewport sizes.
The two <link> tags are required to load the fonts used by the application. The first one is for Nunito and the second one is for Museo Sans. If you prefer a hosted solution, please make sure the fonts are named Nunito and museo-sans respectively.

Local Development

Update the following in line in mcm-app-main/src/SellerActive.App/ClientApp/src/index.html:
```
<script src="https://pkg.cart.com/boostrap/bootstrap-mcm.js" type="text/javascript"></script>
```
1. Change https://pkg.cart.com to http://localhost:8083
In the cart-brand-console-frontend project, start the server:
```
npm run boostrap:serve
```
Run mcm-app-main locally:
1. MCM - How to run the app on Windows
2. How to run the app on macOS or Linux
In the cart-brand-console-frontend project, use the following to update the bundle served:
```
npm run layout:build:all
```