Component Gallery

AD
Profile
Settings
Logout

Layout

Sidebar

Sidebar Component

The sidebar extends full height with primary background. Navigation items are 64x64px squares with icons and labels.

Key features:

  • Full-height --primary background
  • 64x64px square navigation items
  • Active state: --blue, Hover: --blue-dark
  • Theme toggle at bottom
{% from "components/sidebar.html" import sidebar %} {{ sidebar( nav_items=[ {"name": "Home", "href": "/", "icon": "ti-home"}, {"name": "Orgs", "href": "/orgs", "icon": "ti-building"}, {"name": "Projects", "href": "/projects", "icon": "ti-folder"}, {"name": "Credentials", "href": "/credentials", "icon": "ti-key"}, ], active="Home" ) }}

Navigation Item Structure

Each nav item requires:

  • name - Short display label (max ~10 chars)
  • href - Link URL
  • icon - Tabler icon class (e.g., "ti-home")

Topbar

Topbar Component

Admin Service

JD
Profile
Settings
Logout
{% from "components/topbar.html" import topbar %} {{ topbar( service_name="Admin Service", user_initials="JD" ) }}

Topbar Parameters

  • service_name - Fixed service name (not page title)
  • user_initials - User initials for avatar (no email shown)

Toolbar

Toolbar Component

Vertical toolbar inside content-area. Use for page-specific actions.

{% block toolbar %}
{% endblock %}

Audit Log

Audit Log Panel

Right-side panel for activity log. No card wrapper - content flows directly.

Activity
2m ago John created project
15m ago Alice uploaded 3 files
1h ago Bob deleted credential
{% block audit_log %}
Activity
2m ago John created project
15m ago Alice uploaded 3 files
{% endblock %}

App Layout

Layout Structure

┌────────────────────────────────────────────────────────────────────┐
│  ┌──────────┐  ┌────────────────────────────────────────────────┐  │
│  │          │  │  .topbar                                       │  │
│  │          │  └────────────────────────────────────────────────┘  │
│  │          │  ┌─────────────────────────────────┐  ┌──────────┐  │
│  │.sidebar  │  │                                 │  │          │  │
│  │          │  │         .content-area           │  │#audit-log│  │
│  │          │  │     (scrollable, with shadow)   │  │          │  │
│  │          │  └─────────────────────────────────┘  └──────────┘  │
│  │          │                 .content-row                        │
│  └──────────┘                                                     │
└────────────────────────────────────────────────────────────────────┘

Component Classes & IDs

.sidebar Navigation sidebar (116px)
.topbar Service name + user menu (64px height)
.content-row Flex row for content + audit log
.content-area Main scrollable container with shadow
#audit-log Activity log panel (280px, outside content-area)

Using the App Layout

{% extends "layouts/app.html" %} {% set service_name = "Admin Service" %} {% set user_initials = user.initials if user else "??" %} {% block toolbar %}
{% endblock %} {% block content %}

Page content here

{% endblock %} {% block audit_log %}
{% endblock %}

Layout Dimensions

Sidebar width 116px
Toolbar width 64px
Audit log width 280px
Topbar height 64px
Gap between areas 16px
Shadow var(--shadow-lg)