abc-header-parent

A comprehensive parent header component library providing navigation, app discovery, search functionality, and mobile navigation for parent/landing pages.

📦 Installation

# If using within the monorepo
pnpm add abc-header-parent

# For external usage
pnpm install abc-header-parent

🚀 Features

The abc-header-parent package provides specialized parent header components:

• HeaderParent - Main parent header with app discovery
• LeftLayoutHeader - Navigation with dropdown app categories
• RightLayoutHeader - Search functionality with app filtering
• MobileNav - Mobile navigation drawer
• App discovery - Categorized app browsing with hover interactions
• Search functionality - Real-time app search with filtering
• Responsive design - Mobile-first responsive layouts
• Animation support - Smooth transitions with Framer Motion

📖 Usage

Basic Import

// Import from main entry point
import {
  HeaderParent,
  LeftLayoutHeader,
  RightLayoutHeader,
  MobileNav,
} from "abc-header-parent";

// Import specific components
import { HeaderParent } from "abc-header-parent/ui";
import { LeftLayoutHeader } from "abc-header-parent/leftLayout";
import { RightLayoutHeader } from "abc-header-parent/rightLayout";
import { MobileNav } from "abc-header-parent/mobileNav";

Usage Examples

1. HeaderParent - Main Parent Header

import { HeaderParent } from "abc-header-parent/ui";
import type { IHeaderParentProps } from "abc-model/parent";

const ParentApp = () => {
  const listApp = [
    {
      appId: 1,
      appName: "DMV Practice Tests",
      appNameId: "dmv-practice",
      categoryId: "driving",
      icon: "/icons/dmv.png",
    },
    {
      appId: 2,
      appName: "ASVAB Practice Tests",
      appNameId: "asvab-practice",
      categoryId: "military",
      icon: "/icons/asvab.png",
    },
    // ... more apps
  ];

  return (
    <div className="app">
      <HeaderParent listApp={listApp} />
      <main>
        {/* Your parent app content */}
      </main>
    </div>
  );
};

Features:

• Sticky header with backdrop blur
• App logo with theme awareness
• Desktop and mobile navigation
• App discovery integration

2. LeftLayoutHeader - Navigation with App Categories

import { LeftLayoutHeader } from "abc-header-parent/leftLayout";

const NavigationSection = () => {
  const listApp = [
    // Your app list
  ];

  return (
    <div className="navigation">
      <LeftLayoutHeader listApp={listApp} />
    </div>
  );
};

Features:

• Navigation links (Home, About, Blog)
• Practice Tests dropdown with categories
• Hover interactions with smooth animations
• App grid display by category
• Responsive design

3. RightLayoutHeader - Search Functionality

import { RightLayoutHeader } from "abc-header-parent/rightLayout";

const SearchSection = () => {
  const listApp = [
    // Your app list
  ];

  return (
    <div className="search-section">
      <RightLayoutHeader listApp={listApp} />
    </div>
  );
};

Features:

• Real-time app search
• Filtered results dropdown
• Click outside to close
• Smooth animations
• Responsive search input

4. MobileNav - Mobile Navigation

import { MobileNav } from "abc-header-parent/mobileNav";

const MobileApp = () => {
  const listApp = [
    // Your app list
  ];

  return (
    <div className="mobile-app">
      <MobileNav listApp={listApp} />
      <main>
        {/* Your mobile content */}
      </main>
    </div>
  );
};

Features:

• Mobile-optimized navigation
• Drawer-based menu system
• App search functionality
• Touch-friendly interactions

5. Advanced Usage with Custom Configuration

import {
  HeaderParent,
  LeftLayoutHeader,
  RightLayoutHeader
} from "abc-header-parent";
import { useState } from "react";

const AdvancedParentApp = () => {
  const [apps, setApps] = useState([
    {
      appId: 1,
      appName: "DMV Practice Tests",
      appNameId: "dmv-practice",
      categoryId: "driving",
      icon: "/icons/dmv.png",
    },
    {
      appId: 2,
      appName: "ASVAB Practice Tests",
      appNameId: "asvab-practice",
      categoryId: "military",
      icon: "/icons/asvab.png",
    },
    {
      appId: 3,
      appName: "CDL Practice Tests",
      appNameId: "cdl-practice",
      categoryId: "driving",
      icon: "/icons/cdl.png",
    },
  ]);

  return (
    <div className="parent-app">
      {/* Main header with app discovery */}
      <HeaderParent listApp={apps} />

      {/* Custom navigation section */}
      <div className="custom-nav">
        <LeftLayoutHeader listApp={apps} />
      </div>

      {/* Custom search section */}
      <div className="custom-search">
        <RightLayoutHeader listApp={apps} />
      </div>

      <main className="content">
        {/* Your parent app content */}
      </main>
    </div>
  );
};

🏗️ Project Structure

packages/header-parent/
├── src/
│   ├── ui/                 # Main header component
│   │   └── index.tsx
│   ├── leftLayout/         # Left navigation layout
│   │   └── index.tsx
│   ├── rightLayout/        # Right search layout
│   │   └── index.tsx
│   ├── mobileNav/          # Mobile navigation
│   │   ├── index.tsx
│   │   ├── drawer.tsx
│   │   └── search.tsx
│   └── index.ts           # Main exports
├── dist/                  # Built files
├── package.json
└── README.md

🔧 Configuration

Dependencies

The package requires these dependencies:

• abc-redux - Redux state management
• abc-primitive-ui - Primitive UI components
• abc-web-icon - Web icon components
• abc-logo - Logo and branding components

Environment Setup

# Install dependencies
pnpm install

# Development mode
pnpm dev

# Build package
pnpm build

# Type checking
pnpm check-types

# Linting
pnpm lint

🎨 Styling

CSS Classes

The components use Tailwind CSS classes and can be customized:

// Custom header styling
<HeaderParent
  listApp={apps}
  className="custom-header bg-gradient-to-r from-blue-500 to-purple-600"
/>

// Custom search styling
<RightLayoutHeader
  listApp={apps}
  className="custom-search shadow-lg"
/>

Responsive Design

Components are built with mobile-first responsive design:

/* Mobile styles */
.header {
  @apply sticky top-0 z-50 w-full;
}

/* Desktop styles */
@media (min-width: 640px) {
  .header {
    @apply hidden justify-between items-center py-2;
  }
}

📦 Dependencies

Runtime Dependencies

• abc-redux - Redux state management
• abc-primitive-ui - Primitive UI components
• abc-web-icon - Web icon components
• abc-logo - Logo and branding components

Development Dependencies

• @repo/eslint-config - Shared ESLint configuration
• TypeScript type definitions

🚀 Development

Prerequisites

• Node.js 18+
• pnpm (recommended package manager)
• React 18+
• Next.js (for routing)

Setup

# Install dependencies
pnpm install

# Build package
pnpm build

# Development mode with watch
pnpm dev

# Clean build artifacts
pnpm clean

# Lint code
pnpm lint

# Type checking
pnpm check-types

📝 API Reference

HeaderParent

Main parent header component with app discovery.

Props:

• listApp (IHeaderParentProps["listApp"]) - Array of app objects

Features:

• Sticky header with backdrop blur
• App logo with theme awareness
• Desktop and mobile navigation
• App discovery integration

LeftLayoutHeader

Navigation component with app categories dropdown.

Props:

• listApp (IHeaderParentProps["listApp"]) - Array of app objects

Features:

• Navigation links (Home, About, Blog)
• Practice Tests dropdown with categories
• Hover interactions with smooth animations
• App grid display by category

RightLayoutHeader

Search functionality component.

Props:

• listApp (IHeaderParentProps["listApp"]) - Array of app objects

Features:

• Real-time app search
• Filtered results dropdown
• Click outside to close
• Smooth animations

MobileNav

Mobile navigation component.

Props:

• listApp (IHeaderParentProps["listApp"]) - Array of app objects

Features:

• Mobile-optimized navigation
• Drawer-based menu system
• App search functionality
• Touch-friendly interactions

🤝 Contributing

1. Fork repository
2. Create feature branch (git checkout -b feature/amazing-feature)
3. Commit changes (git commit -m 'Add some amazing feature')
4. Push to branch (git push origin feature/amazing-feature)
5. Open Pull Request

📄 License

This project is part of the monorepo and follows the same license terms.

🆘 Support

For support and questions:

• Create an issue in the repository
• Check existing documentation
• Contact the development team

Note: This is an internal header package designed for use within the monorepo ecosystem. Components are optimized for parent/landing pages and app discovery.

📊 Changelog

v0.0.1 (2025-01-11)

• ✅ Initial release with HeaderParent component
• ✅ LeftLayoutHeader with app categories dropdown
• ✅ RightLayoutHeader with search functionality
• ✅ MobileNav mobile navigation component
• ✅ App discovery with hover interactions
• ✅ Real-time search with filtering
• ✅ Responsive design for mobile and desktop
• ✅ Animation support with Framer Motion