drawer

Drawer is a grid layout that can show/hide a sidebar on the left or right side of the page.

Base Drawer

drawer = SingleValueFactory("drawer", "The wrapper for sidebar and content") # Base drawer component
drawer_toggle = SingleValueFactory("drawer-toggle", "The hidden checkbox that controls the state of drawer") # Drawer toggle part
drawer_content = SingleValueFactory("drawer-content", "Content part") # Drawer content part
drawer_side = SingleValueFactory("drawer-side", "Sidebar part") # Drawer sidbar part
drawer_overlay = SingleValueFactory("drawer-overlay", "Label that covers the page when drawer is open") # Drawer overlay part

Drawer Placement

---

source

DrawerPlacement

 DrawerPlacement (value, names=None, module=None, qualname=None,
                  type=None, start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

class DrawerPlacement(str, Enum):
    END = "end"

drawer_placement = enums_to_simple_factory(drawer, [DrawerPlacement], "drawer placement (end)") # drawer placement

Drawer Modifiers

---

source

DrawerModifier

 DrawerModifier (value, names=None, module=None, qualname=None, type=None,
                 start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

class DrawerModifier(str, Enum):
    OPEN = "open"

drawer_modifiers = enums_to_simple_factory(drawer, [DrawerModifier], "drawer modifiers (open)") # drawer modifiers

Drawer Test Examples

---

source

test_drawer_basic_examples

 test_drawer_basic_examples ()

Test basic drawer utilities.

def test_drawer_basic_examples():
    """Test basic drawer utilities."""
    # Basic drawer
    assert str(drawer) == "drawer"
    assert str(drawer_toggle) == "drawer-toggle"
    assert str(drawer_content) == "drawer-content"
    assert str(drawer_side) == "drawer-side"
    assert str(drawer_overlay) == "drawer-overlay"
    
    # Test with modifiers
    assert str(drawer.hover) == "hover:drawer"
    assert str(drawer.md) == "md:drawer"
    assert str(drawer.dark) == "dark:drawer"

# Run the tests
test_drawer_basic_examples()

---

source

test_drawer_placement_examples

 test_drawer_placement_examples ()

Test drawer placement variants.

def test_drawer_placement_examples():
    """Test drawer placement variants."""
    assert str(drawer_placement.end) == "drawer-end"

# Run the tests
test_drawer_placement_examples()

---

source

test_drawer_modifier_examples

 test_drawer_modifier_examples ()

Test drawer modifier variants.

def test_drawer_modifier_examples():
    """Test drawer modifier variants."""
    assert str(drawer_modifiers.open) == "drawer-open"

# Run the tests
test_drawer_modifier_examples()

---

source

test_drawer_basic_fasthtml_examples

 test_drawer_basic_fasthtml_examples ()

Test basic drawer example from daisyUI v5 documentation.

def test_drawer_basic_fasthtml_examples():
    """Test basic drawer example from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input, Label, Ul, Li, A
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_tailwind.utilities.sizing import w, min_h
    from cjm_fasthtml_tailwind.utilities.spacing import p
    
    # Basic drawer
    basic_drawer = Div(
        Input(id="my-drawer", type="checkbox", cls=str(drawer_toggle)),
        Div(
            # Page content here
            Label("Open drawer", _for="my-drawer", cls=combine_classes(btn, btn_colors.primary)),
            cls=str(drawer_content)
        ),
        Div(
            Label(_for="my-drawer", aria_label="close sidebar", cls=str(drawer_overlay)),
            Ul(
                # Sidebar content here
                Li(A("Sidebar Item 1", href="#")),
                Li(A("Sidebar Item 2", href="#")),
                cls=combine_classes(menu, bg_dui.base_200, text_dui.base_content, min_h.full, w._80, p._4)
            ),
            cls=str(drawer_side)
        ),
        cls=str(drawer)
    )
    
    # Verify structure
    assert basic_drawer.tag == "div"
    assert basic_drawer.attrs['class'] == "drawer"
    
    # Verify input checkbox
    input_element = basic_drawer.children[0]
    assert input_element.tag == "input"
    assert input_element.attrs['id'] == "my-drawer"
    assert input_element.attrs['type'] == "checkbox"
    assert input_element.attrs['class'] == "drawer-toggle"
    
    # Verify drawer content
    content_div = basic_drawer.children[1]
    assert content_div.tag == "div"
    assert content_div.attrs['class'] == "drawer-content"
    
    # Verify button label
    button_label = content_div.children[0]
    assert button_label.tag == "label"
    assert button_label.attrs['for'] == "my-drawer"  # FastHTML converts for_ to for-
    assert "btn" in button_label.attrs['class']
    assert "btn-primary" in button_label.attrs['class']
    assert button_label.children[0] == "Open drawer"
    
    # Verify drawer side
    side_div = basic_drawer.children[2]
    assert side_div.tag == "div"
    assert side_div.attrs['class'] == "drawer-side"
    
    # Verify overlay label
    overlay_label = side_div.children[0]
    assert overlay_label.tag == "label"
    assert overlay_label.attrs['for'] == "my-drawer"
    assert overlay_label.attrs['aria-label'] == "close sidebar"
    assert overlay_label.attrs['class'] == "drawer-overlay"
    
    # Verify menu
    menu_ul = side_div.children[1]
    assert menu_ul.tag == "ul"
    assert "menu" in menu_ul.attrs['class']
    assert "bg-base-200" in menu_ul.attrs['class']
    assert "text-base-content" in menu_ul.attrs['class']
    assert "min-h-full" in menu_ul.attrs['class']
    assert "w-80" in menu_ul.attrs['class']
    assert "p-4" in menu_ul.attrs['class']
    
    # Verify menu items
    assert len(menu_ul.children) == 2
    assert menu_ul.children[0].tag == "li"
    assert menu_ul.children[0].children[0].tag == "a"
    assert menu_ul.children[0].children[0].children[0] == "Sidebar Item 1"
    assert menu_ul.children[1].tag == "li"
    assert menu_ul.children[1].children[0].children[0] == "Sidebar Item 2"
    
    return basic_drawer

# Run the tests
test_drawer_basic_fasthtml_examples()

<div class="drawer">
  <input type="checkbox" id="my-drawer" class="drawer-toggle" name="my-drawer">
  <div class="drawer-content">
<label for="my-drawer" class="btn btn-primary">Open drawer</label>  </div>
  <div class="drawer-side">
<label for="my-drawer" aria-label="close sidebar" class="drawer-overlay"></label>    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li>
<a href="#">Sidebar Item 1</a>      </li>
      <li>
<a href="#">Sidebar Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_drawer_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_drawer_navbar_mobile_fasthtml_examples

 test_drawer_navbar_mobile_fasthtml_examples ()

Test navbar menu for desktop + sidebar drawer for mobile from daisyUI v5 documentation.

def test_drawer_navbar_mobile_fasthtml_examples():
    """Test navbar menu for desktop + sidebar drawer for mobile from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input, Label, Ul, Li, A
    from fasthtml.svg import Svg, Path
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_modifiers, btn_styles
    from cjm_fasthtml_daisyui.components.navigation.menu import menu, menu_directions
    from cjm_fasthtml_daisyui.components.navigation.navbar import navbar
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_tailwind.utilities.sizing import w, h, min_h
    from cjm_fasthtml_tailwind.utilities.spacing import p, m
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, flex_direction, flex_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.svg import stroke
    
    # Hamburger menu icon
    hamburger_icon = Svg(
        Path(
            stroke_linecap="round",
            stroke_linejoin="round",
            stroke_width="2",
            d="M4 6h16M4 12h16M4 18h16"
        ),
        xmlns="http://www.w3.org/2000/svg",
        fill="none",
        viewBox="0 0 24 24",
        cls=combine_classes(display_tw.inline_block, h._6, w._6, stroke.current)
    )
    
    # Navbar with drawer for mobile
    navbar_drawer = Div(
        Input(id="my-drawer-3", type="checkbox", cls=str(drawer_toggle)),
        Div(
            # Navbar
            Div(
                Div(
                    Label(
                        hamburger_icon,
                        _for="my-drawer-3", 
                        aria_label="open sidebar", 
                        cls=combine_classes(btn, btn_modifiers.square, btn_styles.ghost)
                    ),
                    cls=combine_classes(flex.none, display_tw.hidden.lg)
                ),
                Div("Navbar Title", cls=combine_classes(m.x._2, flex(1), p.x._2)),
                Div(
                    Ul(
                        # Navbar menu content here
                        Li(A("Navbar Item 1", href="#")),
                        Li(A("Navbar Item 2", href="#")),
                        cls=combine_classes(menu, menu_directions.horizontal)
                    ),
                    cls=combine_classes(display_tw.hidden, flex.none, display_tw.block.lg)
                ),
                cls=combine_classes(navbar, bg_dui.base_300, w.full)
            ),
            # Page content here
            "Content",
            cls=combine_classes(drawer_content, flex_display, flex.col)
        ),
        Div(
            Label(_for="my-drawer-3", aria_label="close sidebar", cls=str(drawer_overlay)),
            Ul(
                # Sidebar content here
                Li(A("Sidebar Item 1", href="#")),
                Li(A("Sidebar Item 2", href="#")),
                cls=combine_classes(menu, bg_dui.base_200, min_h.full, w._80, p._4)
            ),
            cls=str(drawer_side)
        ),
        cls=str(drawer)
    )
    
    # Verify structure
    assert navbar_drawer.tag == "div"
    assert navbar_drawer.attrs['class'] == "drawer"
    
    # Verify input checkbox
    input_element = navbar_drawer.children[0]
    assert input_element.tag == "input"
    assert input_element.attrs['id'] == "my-drawer-3"
    assert input_element.attrs['type'] == "checkbox"
    assert input_element.attrs['class'] == "drawer-toggle"
    
    # Verify drawer content
    content_div = navbar_drawer.children[1]
    assert content_div.tag == "div"
    assert "drawer-content" in content_div.attrs['class']
    assert "flex" in content_div.attrs['class']
    assert "flex-col" in content_div.attrs['class']
    
    # Verify navbar
    navbar_div = content_div.children[0]
    assert navbar_div.tag == "div"
    assert "navbar" in navbar_div.attrs['class']
    assert "bg-base-300" in navbar_div.attrs['class']
    assert "w-full" in navbar_div.attrs['class']
    
    # Verify mobile menu button
    mobile_button_div = navbar_div.children[0]
    assert "flex-none" in mobile_button_div.attrs['class']
    assert "lg:hidden" in mobile_button_div.attrs['class']
    mobile_label = mobile_button_div.children[0]
    assert mobile_label.tag == "label"
    assert mobile_label.attrs['for'] == "my-drawer-3"
    assert mobile_label.attrs['aria-label'] == "open sidebar"
    assert "btn" in mobile_label.attrs['class']
    assert "btn-square" in mobile_label.attrs['class']
    assert "btn-ghost" in mobile_label.attrs['class']
    assert mobile_label.children[0].tag == "svg"
    
    # Verify navbar title
    title_div = navbar_div.children[1]
    assert "mx-2" in title_div.attrs['class']
    assert "flex-1" in title_div.attrs['class']
    assert "px-2" in title_div.attrs['class']
    assert title_div.children[0] == "Navbar Title"
    
    # Verify desktop menu
    desktop_menu_div = navbar_div.children[2]
    assert "hidden" in desktop_menu_div.attrs['class']
    assert "flex-none" in desktop_menu_div.attrs['class']
    assert "lg:block" in desktop_menu_div.attrs['class']
    desktop_menu = desktop_menu_div.children[0]
    assert desktop_menu.tag == "ul"
    assert "menu" in desktop_menu.attrs['class']
    assert "menu-horizontal" in desktop_menu.attrs['class']
    
    # Verify page content
    assert content_div.children[1] == "Content"
    
    # Verify drawer side
    side_div = navbar_drawer.children[2]
    assert side_div.tag == "div"
    assert side_div.attrs['class'] == "drawer-side"
    
    return navbar_drawer

# Run the tests
test_drawer_navbar_mobile_fasthtml_examples()

<div class="drawer">
  <input type="checkbox" id="my-drawer-3" class="drawer-toggle" name="my-drawer-3">
  <div class="drawer-content flex flex-col">
    <div class="navbar bg-base-300 w-full">
      <div class="flex-none lg:hidden">
<label for="my-drawer-3" aria-label="open sidebar" class="btn btn-square btn-ghost"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" class="inline-block h-6 w-6 stroke-current"><path d="M4 6h16M4 12h16M4 18h16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg></label>      </div>
      <div class="mx-2 flex-1 px-2">Navbar Title</div>
      <div class="hidden flex-none lg:block">
        <ul class="menu menu-horizontal">
          <li>
<a href="#">Navbar Item 1</a>          </li>
          <li>
<a href="#">Navbar Item 2</a>          </li>
        </ul>
      </div>
    </div>
Content  </div>
  <div class="drawer-side">
<label for="my-drawer-3" aria-label="close sidebar" class="drawer-overlay"></label>    <ul class="menu bg-base-200 min-h-full w-80 p-4">
      <li>
<a href="#">Sidebar Item 1</a>      </li>
      <li>
<a href="#">Sidebar Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_drawer_navbar_mobile_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_drawer_responsive_fasthtml_examples

 test_drawer_responsive_fasthtml_examples ()

Test responsive drawer from daisyUI v5 documentation.

def test_drawer_responsive_fasthtml_examples():
    """Test responsive drawer from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input, Label, Ul, Li, A
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_tailwind.utilities.sizing import w, min_h
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex, items, justify, flex_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    
    # Responsive drawer (vertical on small screen, horizontal on large screen)
    responsive_drawer = Div(
        Input(id="my-drawer-2", type="checkbox", cls=str(drawer_toggle)),
        Div(
            # Page content here
            Label(
                "Open drawer", 
                _for="my-drawer-2", 
                cls=combine_classes(btn, btn_colors.primary, display_tw.hidden.lg)
            ),
            cls=combine_classes(drawer_content, flex_display, flex.col, items.center, justify.center)
        ),
        Div(
            Label(_for="my-drawer-2", aria_label="close sidebar", cls=str(drawer_overlay)),
            Ul(
                # Sidebar content here
                Li(A("Sidebar Item 1", href="#")),
                Li(A("Sidebar Item 2", href="#")),
                cls=combine_classes(menu, bg_dui.base_200, text_dui.base_content, min_h.full, w._80, p._4)
            ),
            cls=str(drawer_side)
        ),
        cls=combine_classes(drawer, drawer_modifiers.open.lg)
    )
    
    # Verify structure
    assert responsive_drawer.tag == "div"
    assert "drawer" in responsive_drawer.attrs['class']
    assert "lg:drawer-open" in responsive_drawer.attrs['class']
    
    # Verify input checkbox
    input_element = responsive_drawer.children[0]
    assert input_element.tag == "input"
    assert input_element.attrs['id'] == "my-drawer-2"
    assert input_element.attrs['type'] == "checkbox"
    assert input_element.attrs['class'] == "drawer-toggle"
    
    # Verify drawer content
    content_div = responsive_drawer.children[1]
    assert content_div.tag == "div"
    assert "drawer-content" in content_div.attrs['class']
    assert "flex" in content_div.attrs['class']
    assert "flex-col" in content_div.attrs['class']
    assert "items-center" in content_div.attrs['class']
    assert "justify-center" in content_div.attrs['class']
    
    # Verify button label (hidden on lg screens)
    button_label = content_div.children[0]
    assert button_label.tag == "label"
    assert button_label.attrs['for'] == "my-drawer-2"
    assert "btn" in button_label.attrs['class']
    assert "btn-primary" in button_label.attrs['class']
    assert "lg:hidden" in button_label.attrs['class']
    assert button_label.children[0] == "Open drawer"
    
    # Verify drawer side
    side_div = responsive_drawer.children[2]
    assert side_div.tag == "div"
    assert side_div.attrs['class'] == "drawer-side"
    
    # Verify overlay label
    overlay_label = side_div.children[0]
    assert overlay_label.tag == "label"
    assert overlay_label.attrs['for'] == "my-drawer-2"
    assert overlay_label.attrs['aria-label'] == "close sidebar"
    assert overlay_label.attrs['class'] == "drawer-overlay"
    
    # Verify menu
    menu_ul = side_div.children[1]
    assert menu_ul.tag == "ul"
    assert "menu" in menu_ul.attrs['class']
    assert "bg-base-200" in menu_ul.attrs['class']
    assert "text-base-content" in menu_ul.attrs['class']
    assert "min-h-full" in menu_ul.attrs['class']
    assert "w-80" in menu_ul.attrs['class']
    assert "p-4" in menu_ul.attrs['class']
    
    return responsive_drawer

# Run the tests
test_drawer_responsive_fasthtml_examples()

<div class="drawer lg:drawer-open">
  <input type="checkbox" id="my-drawer-2" class="drawer-toggle" name="my-drawer-2">
  <div class="drawer-content flex flex-col items-center justify-center">
<label for="my-drawer-2" class="btn btn-primary lg:hidden">Open drawer</label>  </div>
  <div class="drawer-side">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"></label>    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li>
<a href="#">Sidebar Item 1</a>      </li>
      <li>
<a href="#">Sidebar Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_drawer_responsive_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_drawer_end_fasthtml_examples

 test_drawer_end_fasthtml_examples ()

Test drawer that opens from right side of page from daisyUI v5 documentation.

def test_drawer_end_fasthtml_examples():
    """Test drawer that opens from right side of page from daisyUI v5 documentation."""
    from fasthtml.common import Div, Input, Label, Ul, Li, A
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_colors
    from cjm_fasthtml_daisyui.components.navigation.menu import menu
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui, text_dui
    from cjm_fasthtml_tailwind.utilities.sizing import w, min_h
    from cjm_fasthtml_tailwind.utilities.spacing import p
    
    # Drawer that opens from right side
    end_drawer = Div(
        Input(id="my-drawer-4", type="checkbox", cls=str(drawer_toggle)),
        Div(
            # Page content here
            Label("Open drawer", _for="my-drawer-4", cls=combine_classes(btn, btn_colors.primary)),
            cls=str(drawer_content)
        ),
        Div(
            Label(_for="my-drawer-4", aria_label="close sidebar", cls=str(drawer_overlay)),
            Ul(
                # Sidebar content here
                Li(A("Sidebar Item 1", href="#")),
                Li(A("Sidebar Item 2", href="#")),
                cls=combine_classes(menu, bg_dui.base_200, text_dui.base_content, min_h.full, w._80, p._4)
            ),
            cls=str(drawer_side)
        ),
        cls=combine_classes(drawer, drawer_placement.end)
    )
    
    # Verify structure
    assert end_drawer.tag == "div"
    assert "drawer" in end_drawer.attrs['class']
    assert "drawer-end" in end_drawer.attrs['class']
    
    # Verify input checkbox
    input_element = end_drawer.children[0]
    assert input_element.tag == "input"
    assert input_element.attrs['id'] == "my-drawer-4"
    assert input_element.attrs['type'] == "checkbox"
    assert input_element.attrs['class'] == "drawer-toggle"
    
    # Verify drawer content
    content_div = end_drawer.children[1]
    assert content_div.tag == "div"
    assert content_div.attrs['class'] == "drawer-content"
    
    # Verify button label
    button_label = content_div.children[0]
    assert button_label.tag == "label"
    assert button_label.attrs['for'] == "my-drawer-4"
    assert "btn" in button_label.attrs['class']
    assert "btn-primary" in button_label.attrs['class']
    assert button_label.children[0] == "Open drawer"
    
    # Verify drawer side
    side_div = end_drawer.children[2]
    assert side_div.tag == "div"
    assert side_div.attrs['class'] == "drawer-side"
    
    # Verify overlay label
    overlay_label = side_div.children[0]
    assert overlay_label.tag == "label"
    assert overlay_label.attrs['for'] == "my-drawer-4"
    assert overlay_label.attrs['aria-label'] == "close sidebar"
    assert overlay_label.attrs['class'] == "drawer-overlay"
    
    # Verify menu
    menu_ul = side_div.children[1]
    assert menu_ul.tag == "ul"
    assert "menu" in menu_ul.attrs['class']
    assert "bg-base-200" in menu_ul.attrs['class']
    assert "text-base-content" in menu_ul.attrs['class']
    assert "min-h-full" in menu_ul.attrs['class']
    assert "w-80" in menu_ul.attrs['class']
    assert "p-4" in menu_ul.attrs['class']
    
    # Verify menu items
    assert len(menu_ul.children) == 2
    assert menu_ul.children[0].tag == "li"
    assert menu_ul.children[0].children[0].tag == "a"
    assert menu_ul.children[0].children[0].children[0] == "Sidebar Item 1"
    assert menu_ul.children[1].tag == "li"
    assert menu_ul.children[1].children[0].children[0] == "Sidebar Item 2"
    
    return end_drawer

# Run the tests
test_drawer_end_fasthtml_examples()

<div class="drawer drawer-end">
  <input type="checkbox" id="my-drawer-4" class="drawer-toggle" name="my-drawer-4">
  <div class="drawer-content">
<label for="my-drawer-4" class="btn btn-primary">Open drawer</label>  </div>
  <div class="drawer-side">
<label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>    <ul class="menu bg-base-200 text-base-content min-h-full w-80 p-4">
      <li>
<a href="#">Sidebar Item 1</a>      </li>
      <li>
<a href="#">Sidebar Item 2</a>      </li>
    </ul>
  </div>
</div>

test_func = test_drawer_end_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()