Phila AppFooter Component

A Vue component for displaying site footer information with navigation links, social media icons, and legal links.

Features

• 🎨 Three customizable navigation sections with default content
• 📱 Responsive design with mobile breakpoint
• 🔗 Social media icons from @phila/phila-ui-core/icons
• 🎯 TypeScript support with full type definitions
• ♿ Accessibility features: semantic HTML, proper link structure
• 🔄 Flexible slots for custom content

Installation

pnpm add @phila/phila-ui-app-footer @phila/phila-ui-core
# or
npm install @phila/phila-ui-app-footer @phila/phila-ui-core

Import core styles in your main entry file (e.g., main.js|ts):

import "@phila/phila-ui-core/styles/template-light.css";

Usage

Basic Usage

Use the AppFooter component with default content:

<template>
  <AppFooter />
</template>

<script setup lang="ts">
import { AppFooter } from "@phila/phila-ui-app-footer";
</script>

Custom Content with Slots

Customize any section using named slots:

<template>
  <AppFooter>
    <template #firstNavSlot>
      <div>
        <h4>Custom Section</h4>
        <ul>
          <li><a href="/about">About Us</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </div>
    </template>

    <template #secondNavSlot>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="/docs">Documentation</a></li>
          <li><a href="/help">Help Center</a></li>
        </ul>
      </div>
    </template>

    <template #thirdNavSlot>
      <div>
        <h4>Connect</h4>
        <!-- Custom social media links -->
      </div>
    </template>
  </AppFooter>
</template>

<script setup lang="ts">
import { AppFooter } from "@phila/phila-ui-app-footer";
</script>

Sub-Footer Only

Display only the legal links section:

<template>
  <AppFooter :subFooterOnly="true" />
</template>

<script setup lang="ts">
import { AppFooter } from "@phila/phila-ui-app-footer";
</script>

Props

| Prop | Type | Default | Description | | --------------- | ------- | ------- | -------------------------------------------------------- | | subFooterOnly | boolean | false | When true, only displays the sub-footer with legal links | | className | string | "" | Additional CSS classes to apply to the footer |

Slots

| Slot Name | Description | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | | firstNavSlot | First navigation section (default: City services links) | | secondNavSlot | Second navigation section (default: Government links) | | thirdNavSlot | Third navigation section (default: Social media icons) | | subFooterSlot | Sub-footer content (default: Terms of Use, Right to Know, Privacy Policy, Accessibility links) — rendered even when subFooterOnly is true. |

Default Content

The component includes default content for all three navigation sections:

• First Section: Links to SEPTA and Visit Philadelphia
• Second Section: Government and city service links
• Third Section: Social media icons (Facebook, Twitter, Instagram, GovTV, YouTube, Flickr, GitHub, LinkedIn)

The sub-footer always displays links to Terms of Use, Right to Know, Privacy Policy, and Accessibility.

Responsive Behavior

• Desktop (> 40rem / 640px): Three columns displayed horizontally with vertical dividers
• Mobile (≤ 40rem / 640px): Stacked layout with horizontal dividers between sections

Icons

The footer uses icons from @phila/phila-ui-core/icons for social media links. No additional icon dependencies are required.

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Run lint

pnpm lint

Create Production Build

pnpm build

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

Publishing to NPM

Follow the release instructions using changesets.

License

MIT