{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5ccb1a30-351b-47dd-8dca-caf18dd097ed",
   "metadata": {},
   "outputs": [],
   "source": [
    "import panel as pn\n",
    "from panel_material_ui import Button, Container, Drawer, Row\n",
    "\n",
    "pn.extension()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a6c6a705-0ea1-4a19-a264-eacac2b2544e",
   "metadata": {},
   "source": [
    "The `Drawer` component (akin to a sidebar) provides ergonomic access to destinations in a site or app functionality.\n",
    "\n",
    "## Parameters:\n",
    "For details on other options for customizing the component see the layout and styling how-to guides.\n",
    "\n",
    "### Core\n",
    "\n",
    "* **`open`** (`boolean`): Whether the `Drawer` is open.\n",
    "\n",
    "### Display\n",
    "\n",
    "* **`anchor`** (`Literal[\"left\", \"right\", \"bottom\", \"right\"]`): Where to position the `Drawer`.\n",
    "* **`size`** (`int`): The width or height depending on whether the `Drawer` is rendered on the left/right or top/bottom respectively.\n",
    "* **`variant`** (`Literal[\"temporary\", \"persistent\", \"permanent\"]`): Whether the Drawer is temporary, persistent or permanent.\n",
    "\n",
    "---"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "70597098-996d-44cd-b511-ad6dc1702c61",
   "metadata": {},
   "source": [
    "Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected.\n",
    "\n",
    "The `Drawer` can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the `open` parameter."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a9e7a8a4-3cb9-4c7a-8f2a-1068cee48cf2",
   "metadata": {},
   "outputs": [],
   "source": [
    "drawer = Drawer(\"I'm in a Drawer\", size=300)\n",
    "\n",
    "button = Button(label='Open Drawer')\n",
    "\n",
    "button.js_on_click(args={'drawer': drawer}, code='drawer.data.open = true')\n",
    "\n",
    "Container(button, drawer).preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "28540ba2-3a18-4f3a-8086-616162140e0c",
   "metadata": {},
   "source": [
    "`Drawer` also provides the `create_toggle` helper method to create a toggle that controls the `open` state of the drawer:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "436eacab-e250-428d-9c1a-5806ce7c4483",
   "metadata": {},
   "outputs": [],
   "source": [
    "drawer = Drawer(\"# My Drawer\")\n",
    "\n",
    "toggle = drawer.create_toggle(align='end')\n",
    "\n",
    "Container(drawer, toggle, width_option='sm').preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "424988c8-1da9-495a-8c98-7a1c3e9ef5c4",
   "metadata": {},
   "source": [
    "### Anchor\n",
    "\n",
    "Use the `anchor` parameter to specify which side of the screen the `Drawer` should originate from (the default value is `left`)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ada8993e-14c3-4f3d-b663-38edee773d07",
   "metadata": {},
   "outputs": [],
   "source": [
    "container = Row()\n",
    "for anchor in Drawer.param.anchor.objects:\n",
    "    drawer = Drawer(f\"I'm in a Drawer on the {anchor}\", size=300, anchor=anchor)\n",
    "    button = Button(label=anchor.upper(), width=100)\n",
    "    button.js_on_click(args={'drawer': drawer}, code='drawer.data.open = true')\n",
    "    container.extend([button, drawer])\n",
    "\n",
    "container.preview()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9c7bdd10-0deb-43f4-8de9-a0a945199e8a",
   "metadata": {},
   "source": [
    "### Persistent drawer\n",
    "\n",
    "Persistent navigation drawers can toggle open or closed, but unlike a `temporary` they sit at the same elevation at the content and participate in the document flow.\n",
    "\n",
    "This means that the `Drawer` should be placed in the correct place in the display hierarchy:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ed9114f8-6f77-436f-bc00-7b562364bbc0",
   "metadata": {},
   "outputs": [],
   "source": [
    "drawer = Drawer(\"## I'm in a Drawer\", size=300, variant=\"persistent\")\n",
    "\n",
    "button = drawer.create_toggle(styles={'margin-left': 'auto'})\n",
    "content = Row('# Title', button, sizing_mode='stretch_width')\n",
    "\n",
    "Row(\n",
    "    drawer, Container(content, width_option='sm'),\n",
    ").preview()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e12ad35f-057e-4b4f-84c7-f6e957b5d3e4",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "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
}