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
@latestwith 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"anddata-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 namedNunitoandmuseo-sansrespectively.
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>
- 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:
-
In the cart-brand-console-frontend project, use the following to update the bundle served:
npm run layout:build:all