{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a1",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a2",
   "metadata": {},
   "source": [
    "The `AppBar` component renders a Material UI App Bar (top navigation bar). It supports a title, icon, color theming, and can contain arbitrary child components (buttons, menus, search fields, etc.) via the `objects` parameter.\n",
    "\n",
    "The AppBar is commonly used as a top-level navigation header, either standalone or inside a `Page` component's `header` slot.\n",
    "\n",
    "## Parameters\n",
    "\n",
    "### Core\n",
    "\n",
    "- **`objects`** (`list`): Components rendered inside the app bar toolbar (buttons, menus, etc.).\n",
    "- **`title`** (`str`): Title text displayed in the app bar.\n",
    "- **`icon`** (`str`): Icon displayed at the start of the app bar (e.g. a menu or brand icon).\n",
    "\n",
    "### Display\n",
    "\n",
    "- **`color`** (`str`): The color theme. One of `'default'`, `'inherit'`, `'primary'`, `'secondary'`, `'transparent'`.\n",
    "- **`enable_color_on_dark`** (`bool`): If True, the `color` prop applies in dark mode too.\n",
    "- **`position`** (`str`): CSS position. One of `'fixed'`, `'absolute'`, `'sticky'`, `'static'`, `'relative'`.\n",
    "- **`variant`** (`str`): Toolbar density. `'dense'` for compact, `'regular'` for standard height.\n",
    "\n",
    "### Styling\n",
    "\n",
    "- **`sx`** (`dict`): Component-level styling API.\n",
    "- **`theme_config`** (`dict`): Theming API.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a3",
   "metadata": {},
   "source": [
    "## Basic Usage\n",
    "\n",
    "A simple app bar with a title and icon:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a4",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.AppBar(title='My Application', icon='menu')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a5",
   "metadata": {},
   "source": [
    "## With Buttons\n",
    "\n",
    "Add action buttons to the app bar by passing them as positional arguments or via `objects`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a6",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.AppBar(\n",
    "    pmui.Button(label='Login', variant='outlined', color='default'),\n",
    "    title='Dashboard',\n",
    "    icon='dashboard',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a7",
   "metadata": {},
   "source": [
    "## With MenuBar\n",
    "\n",
    "The `AppBar` pairs naturally with `MenuBar` to create a desktop-style application header:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a8",
   "metadata": {},
   "outputs": [],
   "source": [
    "menu = pmui.MenuBar(\n",
    "    items=[\n",
    "        {'label': 'File', 'items': [\n",
    "            {'label': 'New', 'icon': 'note_add', 'hint': 'Ctrl+N'},\n",
    "            {'label': 'Open', 'icon': 'folder_open', 'hint': 'Ctrl+O'},\n",
    "            None,\n",
    "            {'label': 'Save', 'icon': 'save', 'hint': 'Ctrl+S'},\n",
    "            {'label': 'Exit', 'icon': 'close'},\n",
    "        ]},\n",
    "        {'label': 'Edit', 'items': [\n",
    "            {'label': 'Undo', 'icon': 'undo', 'hint': 'Ctrl+Z'},\n",
    "            {'label': 'Redo', 'icon': 'redo', 'hint': 'Ctrl+Y'},\n",
    "            None,\n",
    "            {'label': 'Cut', 'icon': 'content_cut'},\n",
    "            {'label': 'Copy', 'icon': 'content_copy'},\n",
    "            {'label': 'Paste', 'icon': 'content_paste'},\n",
    "        ]},\n",
    "        {'label': 'Help', 'items': [\n",
    "            {'label': 'Documentation', 'icon': 'menu_book'},\n",
    "            {'label': 'About', 'icon': 'info'},\n",
    "        ]},\n",
    "    ],\n",
    "    variant='outlined',\n",
    "    sx={'border': 'none', 'boxShadow': 'none', 'background': 'transparent'},\n",
    ")\n",
    "\n",
    "pmui.AppBar(menu, title='Code Editor', icon='code')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a9",
   "metadata": {},
   "source": [
    "## Color Variants\n",
    "\n",
    "The `color` parameter controls the app bar's background color:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a10",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Column(\n",
    "    pmui.AppBar(title='Primary', color='primary'),\n",
    "    pmui.AppBar(title='Secondary', color='secondary'),\n",
    "    pmui.AppBar(title='Default', color='default'),\n",
    "    pmui.AppBar(title='Transparent', color='transparent'),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a11",
   "metadata": {},
   "source": [
    "## Dense vs Regular\n",
    "\n",
    "The `variant` parameter controls the toolbar height:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a12",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Column(\n",
    "    pmui.AppBar(title='Dense (compact)', variant='dense', icon='menu'),\n",
    "    pmui.AppBar(title='Regular', variant='regular', icon='menu'),\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a13",
   "metadata": {},
   "source": [
    "## Multiple Components\n",
    "\n",
    "You can place multiple components in the app bar. They are laid out horizontally with flex:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a14",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.AppBar(\n",
    "    pmui.MenuBar(\n",
    "        items=[\n",
    "            {'label': 'File', 'items': [{'label': 'New'}, {'label': 'Open'}]},\n",
    "            {'label': 'Edit', 'items': [{'label': 'Undo'}, {'label': 'Redo'}]},\n",
    "        ],\n",
    "        sx={'border': 'none', 'boxShadow': 'none', 'background': 'transparent'},\n",
    "    ),\n",
    "    pmui.Button(label='Sign In', variant='outlined', color='default'),\n",
    "    title='My App',\n",
    "    icon='apps',\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a15",
   "metadata": {},
   "source": [
    "## Custom Styling\n",
    "\n",
    "Use the `sx` parameter for custom styling, or `theme_config` for full theming:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a16",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.AppBar(\n",
    "    title='Custom Styled',\n",
    "    icon='rocket',\n",
    "    color='transparent',\n",
    "    sx={\n",
    "        'background': 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',\n",
    "        'color': 'white',\n",
    "    },\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a18",
   "metadata": {},
   "source": [
    "### References\n",
    "\n",
    "**Panel Documentation:**\n",
    "\n",
    "- [How-to guides on interactivity](https://panel.holoviz.org/how_to/interactivity/index.html) - Learn how to add interactivity to your applications using widgets\n",
    "- [Templates](https://panel.holoviz.org/how_to/templates/index.html) - Build full application layouts\n",
    "\n",
    "**Material UI:**\n",
    "\n",
    "- [Material UI App Bar](https://mui.com/material-ui/react-app-bar/) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI AppBar API](https://mui.com/material-ui/api/app-bar/) - Detailed API reference"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.14.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}