AppHeader Component

A Vue component for the App Header of the City of Philadelphia's web applications.

Features

• 🎯 TypeScript support with full type definitions
• 🎨 Customizable options for sticky nav, showing / hiding trusted site, slots for mobile menu, navbar branding, nav links and search
• ♿ Accessibility features: ARIA roles, keyboard navigation
• 📏 Responsive design for mobile and desktop

Installation

npm install @phila/phila-ui-app-header
# or
yarn add @phila/phila-ui-app-header
# or
pnpm add @phila/phila-ui-app-header

Usage

<script setup lang="ts">
import { AppHeader } from "@phila/phila-ui-app-header";
import { MyMobileMenu } from "./MyMobileMenu.vue";
import { MyTranslationComponent } from "./MyTranslationComponent.vue";
import { MyServicesComponent } from "./MyServicesComponent.vue";
import { MySearchComponent } from "./MySearchPanel.vue";
const navLinks = [
  {
    text: "Services",
    href: "/services",
    subNav: MyServicesComponent,
  },
  {
    text: "Departments",
    href: "/departments",
    subLinks: [
      { text: "Department 1", href: "/departments/department-1" },
      { text: "Department 2", href: "/departments/department-2" },
    ],
  }
  {
    text: "About",
    href: "/about",
  },
];
const branding = {
  brandingImage: {
    href: "/",
    src: "https://www.phila.gov/assets/images/city-of-philadelphia-logo-medium-white.png",
    altText: "City of Philadelphia",
  },
  brandingLink: {
    text: "Mayor Cherelle L. Parker",
    href: "https://phila.gov/departments/mayor",
  },
};
</script>
<template>
  <AppHeader
    :sticky="true"
    :show-trusted-site="true"
    :nav-links="navLinks"
    :branding="branding"
    :search="MySearchComponent"
  >
    <template #translation>
      <MyTranslationComponent />
    </template>
  </AppHeader>
</template>

Flyout sub-navigation

The NavBar component supports flyout sub-navigations. You can provide a Vue component for the subNav property of a nav link to render custom content in the flyout. Your component should be wrapped by the nav-flyout class so it can be positioned correctly below the navbar.

<template>
  <div class="nav-flyout">
    <h3>Custom Sub-Navigation</h3>
    <ul>
      <li><a href="/custom-link-1">Custom Link 1</a></li>
      <li><a href="/custom-link-2">Custom Link 2</a></li>
    </ul>
  </div>
</template>

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

Test locally in your development environment

npm pack
cp ./dist/*.tgz ~/path/to/your/local/npm/repo
cd ~/path/to/your/local/npm/repo
npm install *.tgz

License

MIT