File size: 1,140 Bytes
18f7b1e
 
 
 
 
 
 
 
 
 
 
 
 
 
2b894e4
 
 
 
f3141ae
18f7b1e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2b894e4
 
 
18f7b1e
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
from typing import Callable

import mesop as me


@me.content_component
def icon_sidebar():
  """Creates a sidebar that contains icon menu items.

  Technically, does not have to be relegated to just icons menu items, but leaving it
  more specific for now.
  """
  with me.box(
    style=me.Style(
      background=me.theme_var("surface-container"),
      border=me.Border.symmetric(
        horizontal=me.BorderSide(width=1, style="solid", color=me.theme_var("outline-variant"))
      ),
      height="100%",
    )
  ):
    me.slot()


@me.component
def icon_menu_item(*, icon: str, tooltip: str, on_click: Callable | None = None, key: str = ""):
  """Creates a menu item that displays as an icon.

  - Unfortunately, we can't add a hover style
  - TODO: Add a way to determine the active menu item selected
  """
  with me.box(
    key=key,
    on_click=on_click,
    style=me.Style(
      border=me.Border(
        bottom=me.BorderSide(width=1, color=me.theme_var("outline-variant"), style="solid")
      ),
      cursor="pointer",
      padding=me.Padding.all(15),
    ),
  ):
    with me.tooltip(message=tooltip):
      me.icon(icon)