Pango Toolbar Component

A customizable toolbar web component built with StencilJS. This component provides a structured navigation bar with a title, subtitle, social links, and a dropdown menu.

Features

• Customizable header title and subtitle
• Built-in social media and external links
• Dropdown menu for additional actions
• Shadow DOM encapsulation for style isolation
• Responsive design with flex-based layout

Installation

NPM

npm install @pantherdb/pango-toolbar

CDN

<script type="module" src="https://unpkg.com/@pantherdb/pango-toolbar@latest/dist/pango-toolbar/pango-toolbar.esm.js"></script>

Usage

Basic HTML

<script type="module" src="https://unpkg.com/@pantherdb/pango-toolbar@latest/dist/pango-toolbar/pango-toolbar.esm.js"></script>

<pango-toolbar
  header-title="PAN-GO"
  header-sub-title="Human Functionome"
  pango-home="/"
  api-version="pango-2">
</pango-toolbar>

React

import { PangoToolbar } from '@pantherdb/pango-toolbar';

const App = () => {
  return (
    <PangoToolbar headerTitle="PAN-GO" headerSubTitle="Human Functionome" pangoHome="/" apiVersion="pango-2" />
  );
};

Angular

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}

// app.component.ts
import { Component } from '@angular/core';
import '@pantherdb/pango-toolbar';

@Component({
  selector: 'app-root',
  template: `<pango-toolbar headerTitle="PAN-GO" headerSubTitle="Human Functionome" pangoHome="/" apiVersion="pango-2"> </pango-toolbar>`
})
export class AppComponent {}

Props

Prop	Type	Default	Description
headerTitle	string	"PAN-GO"	The main toolbar title.
headerSubTitle	string	"Human Functionome"	The subtitle below the main title.
pangoHome	string	"/"	The homepage URL linked to the logo.
apiVersion	string	"pango-2"	PAN-GO API version ("pango-1" or "pango-2"). Controls download URLs and config.

---

Pango Dropdown Component

A flexible dropdown web component that can be used inside pango-toolbar or independently.

Features

• Customizable trigger slot
• Supports any HTML or Stencil components inside dropdown
• Click outside detection for auto-close behavior

Usage

<pango-dropdown>
  <span slot="trigger">Download</span>
  <div slot="content">
    <a href="https://functionome.org/download/export_annotations.zip">As CSV</a>
    <a href="https://functionome.org/download/export_annotations.json.gz">As JSON</a>
  </div>
</pango-dropdown>

Styling

Both components support CSS variables for easy customization:

:root {
  --pango-primary-color: #173672;
  --pango-accent-color: #ebc336;
  --pango-toolbar-height: 50px;
  --pango-toolbar-bg: var(--pango-primary-color);
  --pango-toolbar-color: var(--pango-accent-color);
}

Override these in your project to match your vibe

Development

Setup

git clone https://github.com/pantherdb/pango-toolbar.git
cd pango-toolbar
npm install

Commands

Command	Description
npm start	Dev server with hot reload at localhost
npm run build	Production build
npm test	Run all tests (spec + e2e)
npm run test.watch	Run tests in watch mode
npm run generate	Scaffold a new component

Running a single test file

npx stencil test --spec src/components/pango-dropdown/pango-dropdown.spec.ts
npx stencil test --e2e src/components/pango-dropdown/pango-dropdown.e2e.ts

Contributing

Branch workflow

1. Create a feature branch from main
2. Make your changes and write tests
3. Open a PR against main
4. CI runs build, tests, and commit lint automatically
5. Squash merge into main with a conventional commit message

Commit messages

This project uses Conventional Commits to automate versioning and changelog generation. All commits must follow this format:

<type>(<optional scope>): <description>

Type	Version bump	When to use
feat	Minor (0.1.0 -> 0.2.0)	New feature or capability
fix	Patch (0.1.0 -> 0.1.1)	Bug fix
perf	Patch	Performance improvement
docs	No release	Documentation only
style	No release	Formatting, whitespace
refactor	No release	Code change that doesn't fix a bug or add a feature
test	No release	Adding or updating tests
chore	No release	Build process, tooling, dependencies
ci	No release	CI/CD changes

Examples:

git commit -m "feat: add dark mode toggle to toolbar"
git commit -m "fix: dropdown not closing on outside click"
git commit -m "feat(dropdown): add maxHeight prop"
git commit -m "docs: update CSS variables table in README"

For breaking changes, add BREAKING CHANGE: in the commit body or ! after the type:

git commit -m "feat!: rename headerTitle prop to title"

Commitlint runs on PRs to validate your messages. If it fails, amend your commit:

git commit --amend -m "feat: correct message here"
git push --force-with-lease

Releases

Releases are fully automated via semantic-release. When a PR is merged to main:

1. Semantic-release analyzes the commit messages since the last tag
2. Determines the version bump (major/minor/patch) or skips if no releasable commits
3. Updates package.json version and CHANGELOG.md
4. Publishes to npm
5. Creates a GitHub release with auto-generated notes
6. Tags the release (e.g., v0.2.0)
7. Commits the version bump back to main with [skip ci]

You never need to manually bump versions, edit the changelog, or create tags.

What triggers a release?

Commit type in main	Result
feat:	Minor version bump + release
fix:, perf:	Patch version bump + release
docs:, chore:, ci:, test:, refactor:, style:	No release
feat!: or BREAKING CHANGE:	Major version bump + release

Project structure

src/
  components/
    pango-toolbar/       # Main toolbar component
    pango-dropdown/      # Generic dropdown component
  utils/
    environment.ts       # Centralized external URLs
    __mocks__/           # Jest mocks (image imports)
.github/
  workflows/
    ci.yml               # Build + test on PRs
    semantic-release.yml # Auto-release on push to main
    commitlint.yml       # Commit message validation on PRs

Browser Support

• Chrome 67+
• Firefox 63+
• Safari 10.1+
• Edge 79+

License

MIT