@avesh.k/prism-sidebar

Framework-agnostic Prism sidebar package powered by native Web Components.

Install

npm i @avesh.k/prism-sidebar

Registration

import { registerPrismSidebar } from '@avesh.k/prism-sidebar'
registerPrismSidebar()

Attributes

• token (required for API calls)
• api-url (preferred menu endpoint)
• api-base-url (legacy alias for api-url)
• base-url (default: current origin)
• active-path
• target (_self | _blank | _top, default: _top)
• use-shadow-dom (default: true)
• aria-label (default: Sidebar navigation)
• collapsed (default: true)
• auto-navigate (default: true)
• width (default: 240px)
• title (default: P.R.I.S.M.)
• subtitle (default: Purplle Retail Intelligence & Sales Management)
• home-url (default: /)
• logout-text (default: Logout)
• logout-path (default: /sentinel/logout)
• error (fallback message override)

JS Properties

• token
• baseUrl
• apiBaseUrl
• apiUrl
• activePath
• target
• useShadowDom
• ariaLabel
• collapsed
• autoNavigate
• width
• title
• subtitle
• homeUrl
• logoutText
• logoutPath
• error

Events

• sidebar-loaded (detail: { menu })
• sidebar-error (detail: { message, cause? })
• sidebar-item-click (detail: { item, resolvedPath, target })

Methods

• refresh()
• setActivePath(path)
• setConfig(partialConfig)

Menu API Shape

The component accepts either of the following API response formats:

{ "data": { "menu": [/* items */] } }

or

{ "menu": [/* items */] }

Each item requires:

{ "id": "string", "name": "string", "path": "/route", "children": [] }

url is also accepted as a legacy alias for path.

Plain HTML

<script type="module">
  import { registerPrismSidebar } from '@avesh.k/prism-sidebar'
  registerPrismSidebar()
</script>
<prism-sidebar
  token="abc"
  base-url="https://example.com"
  api-url="https://example.com/sentinel/api/v1/menu"
  active-path="/orders"
  target="_top"
  width="240px"
></prism-sidebar>

CDN Usage

<script type="module">
  import('https://cdn.jsdelivr.net/npm/@avesh.k/[email protected]/dist/prism-sidebar.js')
    .then(({ registerPrismSidebar }) => registerPrismSidebar())
</script>
<prism-sidebar token="abc" base-url="https://example.com"></prism-sidebar>

React

import { useEffect } from 'react'
import { registerPrismSidebar } from '@avesh.k/prism-sidebar'

export function App() {
  useEffect(() => {
    registerPrismSidebar()
  }, [])
  return <prism-sidebar token="abc" api-url="https://example.com/sentinel/api/v1/menu" />
}

Angular

Register once in bootstrap and consume directly:

<prism-sidebar [attr.token]="token" [attr.api-base-url]="apiBaseUrl"></prism-sidebar>

SolidJS

import { onMount } from 'solid-js'
import { registerPrismSidebar } from '@avesh.k/prism-sidebar'

export default function App() {
  onMount(() => registerPrismSidebar())
  return <prism-sidebar token="abc" api-url="https://example.com/sentinel/api/v1/menu" />
}

iframe-safe activePath

Pass active-path from the host application to avoid iframe routing mismatch. This is the recommended integration pattern in nested iframe environments.

Type Exports

import type {
  SidebarConfig,
  SidebarConfigInput,
  SidebarNavigationTarget,
  SidebarMenuItem,
  SidebarLoadedEventDetail,
  SidebarErrorEventDetail,
  SidebarItemClickEventDetail
} from '@avesh.k/prism-sidebar'

Testing

npm run test
npm run test:e2e

Publishing

Set .npmrc for internal registry and publish with:

npm run build
npm publish

Versioning

Use semantic versioning: patch for fixes, minor for backward-compatible features, major for breaking changes.