# AppTopBar Component

A flexible application top bar component for displaying titles, navigation, and action elements.

## Features

- **Flexible Layout**: Three distinct areas - home/logo, main content, and right actions
- **Customizable Content**: Support for both props and slot-based content
- **Responsive Design**: Adapts to different screen sizes
- **Simple Integration**: Easy to integrate into any application layout
- **Custom Styling**: Supports custom CSS styles

## Basic Usage

```svelte
<script>
import AppTopBar from '@ticatec/uniface-element/AppTopBar';
</script>

<AppTopBar title="My Application" />
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | - | The title text to display in the main content area |
| `style` | `string` | `''` | Custom CSS styles for the top bar |

## Slots

| Slot | Description |
|------|-------------|
| `home` | Content for the left side (typically logo or home button) |
| `default` | Main content area (overrides title prop when used) |
| `right` | Content for the right side (typically user menu, actions) |

## Examples

### Basic Title Bar

```svelte
<AppTopBar title="Dashboard" />
```

### With Logo and User Menu

```svelte
<AppTopBar title="My App">
  <div slot="home">
    <img src="/logo.png" alt="Logo" class="logo" />
  </div>
  
  <div slot="right">
    <button class="user-menu">
      <i class="icon_google_account_circle"></i>
      John Doe
    </button>
  </div>
</AppTopBar>
```

### Custom Main Content

```svelte
<AppTopBar>
  <div slot="home">
    <button class="menu-toggle">
      <i class="icon_google_menu"></i>
    </button>
  </div>
  
  <!-- Custom main content instead of title -->
  <div class="breadcrumbs">
    <span>Home</span>
    <i class="icon_google_chevron_right"></i>
    <span>Dashboard</span>
    <i class="icon_google_chevron_right"></i>
    <span>Reports</span>
  </div>
  
  <div slot="right">
    <button class="notifications">
      <i class="icon_google_notifications"></i>
      <span class="badge">3</span>
    </button>
    <button class="settings">
      <i class="icon_google_settings"></i>
    </button>
  </div>
</AppTopBar>
```

### Search Bar Integration

```svelte
<AppTopBar>
  <div slot="home">
    <h1 class="app-title">MyApp</h1>
  </div>
  
  <div class="search-container">
    <input 
      type="search" 
      placeholder="Search..." 
      class="search-input"
    />
    <i class="icon_google_search search-icon"></i>
  </div>
  
  <div slot="right">
    <div class="user-profile">
      <img src="/avatar.jpg" alt="User" class="avatar" />
      <span>Welcome, User</span>
    </div>
  </div>
</AppTopBar>
```

### Navigation Tabs

```svelte
<AppTopBar>
  <div slot="home">
    <img src="/logo.svg" alt="Company" class="company-logo" />
  </div>
  
  <nav class="main-navigation">
    <a href="/dashboard" class="nav-link active">Dashboard</a>
    <a href="/projects" class="nav-link">Projects</a>
    <a href="/team" class="nav-link">Team</a>
    <a href="/reports" class="nav-link">Reports</a>
  </nav>
  
  <div slot="right">
    <button class="help-button">
      <i class="icon_google_help"></i>
    </button>
    <div class="user-dropdown">
      <button class="dropdown-trigger">
        <i class="icon_google_account_circle"></i>
        <i class="icon_google_arrow_drop_down"></i>
      </button>
    </div>
  </div>
</AppTopBar>
```

### With Custom Styling

```svelte
<AppTopBar 
  title="Styled App"
  style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"
>
  <div slot="home">
    <i class="icon_google_apps" style="font-size: 24px;"></i>
  </div>
  
  <div slot="right">
    <button style="background: rgba(255,255,255,0.2); border: none; color: white; padding: 8px 16px; border-radius: 4px;">
      Sign Out
    </button>
  </div>
</AppTopBar>
```

## Layout Structure

The AppTopBar uses a three-column layout:

1. **Home Section** (left): Optional logo, menu button, or home link
2. **Main Content** (center): Title or custom content with flex-grow
3. **Right Section** (right): Actions, user menu, or other controls

## Styling

The component uses the following CSS classes:

- `.uniface-top-bar` - Main container
- `.bar-home` - Home/logo section container
- `.main-content` - Main content area

### Example CSS

```css
.uniface-top-bar {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 48px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.bar-home {
  flex: 0 0 auto;
  margin-right: 16px;
}

.main-content {
  flex: 1 1 auto;
  font-weight: 500;
}

/* Custom styles for slots */
.logo {
  height: 32px;
  width: auto;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
```

## Common Patterns

### Application Header

```svelte
<AppTopBar title="Project Management">
  <div slot="home">
    <button class="sidebar-toggle" on:click={toggleSidebar}>
      <i class="icon_google_menu"></i>
    </button>
  </div>
  
  <div slot="right">
    <button class="new-project">
      <i class="icon_google_add"></i>
      New Project
    </button>
    <div class="user-profile">
      <img src={user.avatar} alt={user.name} />
      {user.name}
    </div>
  </div>
</AppTopBar>
```

### E-commerce Header

```svelte
<AppTopBar>
  <div slot="home">
    <img src="/store-logo.png" alt="Store" class="store-logo" />
  </div>
  
  <div class="search-bar">
    <input type="search" placeholder="Search products..." />
    <button type="submit">
      <i class="icon_google_search"></i>
    </button>
  </div>
  
  <div slot="right">
    <button class="cart">
      <i class="icon_google_shopping_cart"></i>
      <span class="cart-count">{cartItems}</span>
    </button>
    <button class="account">
      <i class="icon_google_person"></i>
      Account
    </button>
  </div>
</AppTopBar>
```

### Admin Dashboard

```svelte
<AppTopBar>
  <div slot="home">
    <h1>Admin Panel</h1>
  </div>
  
  <div class="admin-nav">
    <a href="/admin/users">Users</a>
    <a href="/admin/settings">Settings</a>
    <a href="/admin/reports">Reports</a>
  </div>
  
  <div slot="right">
    <div class="admin-actions">
      <button class="system-status">
        <i class="icon_google_check_circle" style="color: green;"></i>
        System OK
      </button>
      <button class="admin-logout">
        <i class="icon_google_exit_to_app"></i>
        Logout
      </button>
    </div>
  </div>
</AppTopBar>
```

## Responsive Considerations

For mobile responsiveness, consider:

```css
@media (max-width: 768px) {
  .uniface-top-bar {
    padding: 0 8px;
  }
  
  .main-content {
    font-size: 14px;
  }
  
  /* Hide less important items on mobile */
  .hide-mobile {
    display: none;
  }
}
```

## Accessibility

- Use semantic HTML elements within slots
- Ensure buttons have proper labels or aria-labels
- Maintain adequate color contrast
- Support keyboard navigation for interactive elements

## Best Practices

1. **Keep It Simple**: Don't overcrowd the top bar with too many elements
2. **Consistent Branding**: Use consistent logo placement and styling
3. **User Actions**: Place the most important user actions on the right side
4. **Mobile First**: Design with mobile devices in mind
5. **Visual Hierarchy**: Use appropriate font weights and sizes to establish hierarchy
6. **Icon Usage**: Use consistent icon styles and sizes throughout

## Integration with Layouts

The AppTopBar works well with layout components:

```svelte
<SidebarLayout headerHeight="56px">
  <AppTopBar slot="header" title="My Application">
    <!-- topbar content -->
  </AppTopBar>
  
  <div slot="sidebar">
    <!-- sidebar content -->
  </div>
  
  <!-- main content -->
</SidebarLayout>
```