{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "55e7b392-14c0-4411-bfcf-a46e7e117368",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "import panel_material_ui as pmui\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a1183801-6081-4061-8795-d7fd8e5e8f38",
   "metadata": {},
   "source": [
    "The `MenuToggle` component is part of the `Menu` family of components. `Menu` components provide a structured way for users to navigate or choose between a series of defined items. In the case of `MenuToggle`, these items can be individually toggled on/off with different icons for active/inactive states (e.g., filled/unfilled heart for favorites).\n",
    "\n",
    "Each item in the `MenuToggle` list is defined by a dictionary with several supported keys:\n",
    "\n",
    "#### Item Structure\n",
    "\n",
    "Each item can include the following keys:\n",
    "\n",
    "- **`label`** (str, required): The text displayed for the menu item.\n",
    "- **`icon`** (str, optional): The icon when the item is not toggled.\n",
    "- **`active_icon`** (str, optional): The icon when the item is toggled.\n",
    "- **`toggled`** (list optional): Which indices is currently toggled (default: False).\n",
    "- **`color`** (str, optional): The color of the menu item.\n",
    "- **`active_color`** (str, optional): The color when toggled.\n",
    "\n",
    "These dictionaries are passed to the component via the items parameter as a list. When one of the `items` is selected it will be available on the `value` parameter, and toggled items are tracked in the `toggled` parameter.\n",
    "\n",
    "Since only the allowed keys are synced with the frontend, other information can be stored in the item dictionaries.\n",
    "\n",
    "#### Parameters:\n",
    "\n",
    "##### Core\n",
    "\n",
    "* **`active`** (`int`): The last clicked item in the menu.\n",
    "* **`disabled`** (boolean): Whether the button is clickable.\n",
    "* **`items`** (`list`): Menu items.\n",
    "* **`persistent`** (boolean): Whether the menu stays open after toggling an item (default: True).\n",
    "* **`toggled`** (`list`): List of indices of currently toggled items.\n",
    "* **`value`** (dict): The last selected item.\n",
    "\n",
    "##### Display\n",
    "\n",
    "* **`color`** (str): The color variant of the toggle, which must be one of `'default'` (white), `'primary'` (blue), `'success'` (green), `'info'` (yellow), `'light'` (light), or `'danger'` (red).\n",
    "* **`description`** (str | Bokeh Tooltip | pn.widgets.TooltipIcon): A description which is shown when the widget is hovered.\n",
    "* **`icon`** (str): An icon to render to the left of the button label. Either an SVG or an icon name which is loaded from [Material UI Icons](https://mui.com/material-ui/material-icons).\n",
    "* **`icon_size`** (str): Size of the icon as a string, e.g. 12px or 1em.\n",
    "* **`label`** (str): The title of the widget.\n",
    "* **`toggle_icon`** (str): Icon to display when menu is open (if different from base icon).\n",
    "* **`variant`** (str): The button style, either 'solid', 'outlined', 'text'.\n",
    "\n",
    "##### Styling\n",
    "\n",
    "- **`sx`** (dict): Component level styling API.\n",
    "- **`theme_config`** (dict): Theming API.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "083c0657-d3c2-4a41-8777-ffcaf5bf72a7",
   "metadata": {},
   "source": [
    "### Basic Usage"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6cccba94-b316-4d37-bbce-81b59d19c086",
   "metadata": {},
   "source": [
    "`MenuToggle` allows toggling individual items on/off with different icons for each state:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ddb562b1-17a4-4ecb-91b5-c52f351f9c8e",
   "metadata": {},
   "outputs": [],
   "source": [
    "menu_toggle = pmui.MenuToggle(items=[\n",
    "    {'label': 'Favorite', 'icon': 'favorite_border', 'active_icon': 'favorite', 'toggled': False},\n",
    "    {'label': 'Bookmark', 'icon': 'bookmark_border', 'active_icon': 'bookmark', 'toggled': True},\n",
    "    {'label': 'Star', 'icon': 'star_border', 'active_icon': 'star', 'toggled': False},\n",
    "], label='Actions', icon='more_vert')\n",
    "\n",
    "pmui.Column(menu_toggle, height=150)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eec49872-dd14-4686-81e0-d137293b70b4",
   "metadata": {},
   "source": [
    "The items require a label but may also include `icon`, `active_icon` to show different states, and `toggled` to set the initial state.\n",
    "\n",
    "Clicking on a particular item will toggle it and update the `toggled` parameter:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d88bd5a8-1905-4778-a33c-c6ef06aab81e",
   "metadata": {},
   "outputs": [],
   "source": [
    "print(f'Menu Open: {menu_toggle.active}')\n",
    "print(f'Value: {menu_toggle.value}')\n",
    "print(f'Toggled Items: {menu_toggle.toggled}')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "43c38aa2-79eb-4d2d-ba5d-38698743f10a",
   "metadata": {},
   "source": [
    "Alternatively you may also register `on_click` handlers:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "09773773-1c59-41d9-9824-beca8baf2f06",
   "metadata": {},
   "outputs": [],
   "source": [
    "row = pmui.Column('### Click Events')\n",
    "\n",
    "menu_toggle.on_click(row.append)\n",
    "\n",
    "pmui.Row(menu_toggle, row, height=150)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "0b3ebf93-5e38-4416-acd0-eb171dc824bb",
   "metadata": {},
   "source": [
    "Try clicking on the `MenuToggle` items and see them toggle between their inactive and active states."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6921fe28-b986-4889-85e5-9e08cfb3e975",
   "metadata": {},
   "source": [
    "### Persistent vs Non-Persistent Mode\n",
    "\n",
    "By default, `MenuToggle` is in persistent mode (`persistent=True`), meaning the menu stays open after toggling items. This is useful when you want to toggle multiple items:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "9f977839-ac4e-46f1-be9c-d14f48d79c2d",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Persistent mode (default) - menu stays open\n",
    "filters_toggle = pmui.MenuToggle(\n",
    "    label=\"Filters\",\n",
    "    icon=\"filter_list\",\n",
    "    persistent=True,\n",
    "    items=[\n",
    "        {'label': 'High Priority', 'icon': 'flag', 'color': '#ff9800', 'active_color': '#f44336', 'toggled': True},\n",
    "        {'label': 'In Progress', 'icon': 'pending', 'color': '#2196f3', 'active_color': '#1976d2'},\n",
    "        {'label': 'Completed', 'icon': 'check_circle_outline', 'active_icon': 'check_circle', 'color': '#757575', 'active_color': '#4caf50'},\n",
    "    ]\n",
    ")\n",
    "\n",
    "# Non-persistent mode - menu closes after selection\n",
    "quick_toggle = pmui.MenuToggle(\n",
    "    label=\"Quick Actions\",\n",
    "    icon=\"flash_on\",\n",
    "    persistent=False,\n",
    "    items=[\n",
    "        {'label': 'Enable Notifications', 'icon': 'notifications_off', 'active_icon': 'notifications_active'},\n",
    "        {'label': 'Dark Mode', 'icon': 'light_mode', 'active_icon': 'dark_mode'},\n",
    "    ]\n",
    ")\n",
    "\n",
    "pmui.Row(\n",
    "    pmui.Column('### Persistent Mode', filters_toggle, height=200),\n",
    "    pmui.Column('### Non-Persistent Mode', quick_toggle, height=200)\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "515291b6-7107-4015-b1da-d93d205ff411",
   "metadata": {},
   "source": [
    "In persistent mode, you can toggle multiple items without the menu closing. In non-persistent mode, the menu closes after each selection."
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5c39e9c3-627d-436d-858f-a44b06d27147",
   "metadata": {},
   "source": [
    "### Colored Items"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "279bc961-d727-47d8-a653-c4ab7d1c7427",
   "metadata": {},
   "source": [
    "MenuToggle items can have different colors in their normal and toggled states:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3be9d56d-6a05-43e8-b531-11abdf30b413",
   "metadata": {},
   "outputs": [],
   "source": [
    "colored_menu = pmui.MenuToggle(\n",
    "    label=\"Priority Levels\",\n",
    "    icon=\"flag\",\n",
    "    items=[\n",
    "        {'label': 'Critical', 'icon': 'error_outline', 'active_icon': 'error', 'color': '#ff5252', 'active_color': '#d32f2f'},\n",
    "        {'label': '---'},  # Divider\n",
    "        {'label': 'High', 'icon': 'priority_high', 'color': '#ff9800', 'active_color': '#f57c00'},\n",
    "        {'label': 'Medium', 'icon': 'remove', 'color': '#2196f3', 'active_color': '#1976d2'},\n",
    "        {'label': 'Low', 'icon': 'arrow_downward', 'color': '#4caf50', 'active_color': '#388e3c'},\n",
    "    ]\n",
    ")\n",
    "\n",
    "pmui.Column(colored_menu, height=250)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1ed3907d-9398-4448-b7b1-cd0102622adf",
   "metadata": {},
   "source": [
    "### Programmatic Control\n",
    "\n",
    "You can programmatically control which items are toggled:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "875e2649-05a1-4f11-b52d-2ccf115dae18",
   "metadata": {},
   "outputs": [],
   "source": [
    "programmatic_toggle = pmui.MenuToggle(\n",
    "    label=\"Select Items\",\n",
    "    items=[\n",
    "        {'label': 'Option A', 'icon': 'check_box_outline_blank', 'active_icon': 'check_box'},\n",
    "        {'label': 'Option B', 'icon': 'check_box_outline_blank', 'active_icon': 'check_box'},\n",
    "        {'label': 'Option C', 'icon': 'check_box_outline_blank', 'active_icon': 'check_box'},\n",
    "        {'label': 'Option D', 'icon': 'check_box_outline_blank', 'active_icon': 'check_box'},\n",
    "    ]\n",
    ")\n",
    "\n",
    "toggle_all = pmui.Button(\n",
    "    label=\"Toggle All\",\n",
    "    on_click=lambda e: setattr(\n",
    "        programmatic_toggle, \n",
    "        'toggled',\n",
    "        [] if len(programmatic_toggle.toggled) == 4 else [0, 1, 2, 3]\n",
    "    )\n",
    ")\n",
    "\n",
    "clear_all = pmui.Button(\n",
    "    label=\"Clear All\",\n",
    "    on_click=lambda e: setattr(programmatic_toggle, 'toggled', [])\n",
    ")\n",
    "\n",
    "pmui.Column(\n",
    "    programmatic_toggle,\n",
    "    pmui.Row(toggle_all, clear_all),\n",
    "    height=200\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "66273dbd-7658-434b-88c8-7364a0d716a7",
   "metadata": {},
   "source": [
    "### Real-World Example: Bookmark System"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "759c18d6-02eb-415f-8077-755a98d31083",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a bookmark toggle menu\n",
    "bookmarks = pmui.MenuToggle(\n",
    "    label=\"Bookmarks\",\n",
    "    icon=\"bookmarks\",\n",
    "    toggle_icon=\"bookmark\",\n",
    "    items=[\n",
    "        {'label': 'Dashboard', 'icon': 'bookmark_border', 'active_icon': 'bookmark', 'page': '# 📊 Dashboard\\n\\nKey metrics and analytics'},\n",
    "        {'label': 'Reports', 'icon': 'bookmark_border', 'active_icon': 'bookmark', 'page': '# 📈 Reports\\n\\nMonthly and quarterly reports'},\n",
    "        {'label': 'Settings', 'icon': 'bookmark_border', 'active_icon': 'bookmark', 'page': '# ⚙️ Settings\\n\\nConfigure your preferences'},\n",
    "        {'label': 'Profile', 'icon': 'bookmark_border', 'active_icon': 'bookmark', 'page': '# 👤 Profile\\n\\nManage your account'},\n",
    "    ]\n",
    ")\n",
    "\n",
    "# Display bookmarked items\n",
    "bookmarked_display = pn.pane.Markdown(\"### Bookmarked Pages\")\n",
    "\n",
    "def update_bookmarks(event=None):\n",
    "    bookmarked_items = [bookmarks.items[i] for i in bookmarks.toggled]\n",
    "    if bookmarked_items:\n",
    "        content = \"### Bookmarked Pages\\n\\n\"\n",
    "        for item in bookmarked_items:\n",
    "            content += f\"- **{item['label']}**\\n\"\n",
    "    else:\n",
    "        content = \"### Bookmarked Pages\\n\\n*No pages bookmarked yet*\"\n",
    "    bookmarked_display.object = content\n",
    "\n",
    "bookmarks.param.watch(update_bookmarks, 'toggled')\n",
    "update_bookmarks()\n",
    "\n",
    "pmui.Column(\n",
    "    bookmarks,\n",
    "    bookmarked_display,\n",
    "    height=300\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "1c459182-6d01-4edd-b592-e999bdb3499c",
   "metadata": {},
   "source": [
    "### Color Options"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7822cc36-13d1-4216-a983-a0504b1bae45",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.GridBox(*(\n",
    "    menu_toggle.clone(color=color, label=color.title())\n",
    "    for color in pmui.MenuToggle.param.color.objects\n",
    "), ncols=3)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "49d49e9b-4801-40fa-bdef-53a50d3bac3a",
   "metadata": {},
   "source": [
    "### Variants"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0cdc3b7a-6340-448f-84b7-2d90af3a9919",
   "metadata": {},
   "outputs": [],
   "source": [
    "pn.Row(*(\n",
    "    menu_toggle.clone(variant=variant, label=variant.title())\n",
    "    for variant in pmui.MenuToggle.param.variant.objects\n",
    "))"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "005ccc52-76db-46a7-b859-640218d945c1",
   "metadata": {},
   "source": [
    "### Use Cases"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5d00de31-3f51-49cc-9af6-fbb05f506667",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Different use cases for MenuToggle\n",
    "use_cases = pmui.Tabs(\n",
    "    ('Favorites', pmui.MenuToggle(\n",
    "        label=\"Favorite Items\",\n",
    "        icon=\"grade\",\n",
    "        items=[\n",
    "            {'label': 'Product A', 'icon': 'star_border', 'active_icon': 'star'},\n",
    "            {'label': 'Product B', 'icon': 'star_border', 'active_icon': 'star', 'toggled': True},\n",
    "            {'label': 'Product C', 'icon': 'star_border', 'active_icon': 'star'},\n",
    "        ]\n",
    "    )),\n",
    "    ('Feature Flags', pmui.MenuToggle(\n",
    "        label=\"Features\",\n",
    "        icon=\"tune\",\n",
    "        items=[\n",
    "            {'label': 'Beta Features', 'icon': 'toggle_off', 'active_icon': 'toggle_on', 'toggled': True},\n",
    "            {'label': 'Analytics', 'icon': 'toggle_off', 'active_icon': 'toggle_on'},\n",
    "            {'label': 'Debug Mode', 'icon': 'toggle_off', 'active_icon': 'toggle_on'},\n",
    "        ]\n",
    "    )),\n",
    "    ('Multi-Select', pmui.MenuToggle(\n",
    "        label=\"Select Tags\",\n",
    "        icon=\"label\",\n",
    "        items=[\n",
    "            {'label': 'Important', 'icon': 'label_outline', 'active_icon': 'label', 'color': '#f44336'},\n",
    "            {'label': 'Work', 'icon': 'label_outline', 'active_icon': 'label', 'color': '#2196f3'},\n",
    "            {'label': 'Personal', 'icon': 'label_outline', 'active_icon': 'label', 'color': '#4caf50'},\n",
    "            {'label': 'Urgent', 'icon': 'label_outline', 'active_icon': 'label', 'color': '#ff9800'},\n",
    "        ]\n",
    "    )),\n",
    ")\n",
    "\n",
    "use_cases"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2fcd52d5-a4ce-434b-864b-25e5a2ca63a5",
   "metadata": {},
   "source": [
    "### API Reference\n",
    "\n",
    "#### Parameters\n",
    "\n",
    "The `MenuToggle` menu exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "0793e79e-ed6f-4c9b-8741-b741ec4f9c04",
   "metadata": {},
   "outputs": [],
   "source": [
    "pmui.MenuToggle(items=[\n",
    "    {'label': 'Favorite', 'icon': 'favorite_border', 'active_icon': 'favorite'},\n",
    "    {'label': 'Bookmark', 'icon': 'bookmark_border', 'active_icon': 'bookmark'},\n",
    "    {'label': 'Star', 'icon': 'star_border', 'active_icon': 'star'},\n",
    "], label='Actions', icon='more_vert').api(jslink=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b1ffeb51-ddf3-4a92-8c4e-edb6c22ff3b3",
   "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",
    "- [Setting up callbacks and links](https://panel.holoviz.org/how_to/links/index.html) - Connect parameters between components and create reactive interfaces\n",
    "- [Declarative UIs with Param](https://panel.holoviz.org/how_to/param/index.html) - Build parameter-driven applications\n",
    "\n",
    "**Material UI Toggle Button:**\n",
    "\n",
    "- [Material UI Toggle Button Reference](https://mui.com/material-ui/react-toggle-button) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Toggle Button API](https://mui.com/material-ui/api/toggle-button/) - Detailed API reference and configuration options\n",
    "\n",
    "**Material UI Menu:**\n",
    "\n",
    "- [Material UI Menu Reference](https://mui.com/material-ui/react-menu) - Complete documentation for the underlying Material UI component\n",
    "- [Material UI Menu API](https://mui.com/material-ui/api/menu/) - Detailed API reference and configuration options"
   ]
  }
 ],
 "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.12.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}