from idom import html, run, use_state, component, event, vdom, EventHandler
from pathlib import Path
from idom.server.sanic import PerClientStateServer
import json
import requests
from sanic import Sanic
from typing import List, Callable
def FlexContainer(*args: html):
 return html.div({"class": "flex w-full"}, args)
@component
def ListPages(current_page, set_current_page, pages: List[str], title: str = ""):
 @event(prevent_default=True)
 def handle_click(event):
 set_current_page(event["target"]["value"])
 anchors = []
 for page in pages:
 anchors.append(
 vdom(
 "button",
 {
 "href": f"#{page}",
 "value": page,
 "onClick": handle_click,
 },
 page,
 )
 )
 return html.div(anchors)
@component
def Sidebar(current_page, set_current_page, pages: List[str], title: str = ""):
 return html.div(
 html.div(
 html.a(
 {
 "href": "#",
 },
 title,
 ),
 ),
 html.nav(
 ListPages(current_page, set_current_page, pages=pages, title=title),
 ),
 )
@component
def Input(
 set_value: Callable,
 type: str = "text",
):
 return html.input(
 {
 "type": type,
 "onChange": lambda event: set_value(event["target"]["value"]),
 }
 )
@component
def users_page():
 a, set_a = use_state("")
 inp_a = Input(set_a)
 return html.div(inp_a, "SiteA")
@component
def timelogs_page():
 b, set_b = use_state("")
 inp_b = Input(set_b)
 return html.div(inp_b, "SiteB")
@component
def page():
 current_page, set_current_page = use_state("SiteA")
 pages = ["SiteA", "SiteB"]
 if current_page == "SiteA":
 current_page_component = users_page(key="site_a")
 elif current_page == "SiteB":
 current_page_component = timelogs_page(key="site_b")
 return html.div(
 {"class": "flex w-full"},
 Sidebar(current_page, set_current_page, pages=pages),
 FlexContainer(current_page_component),
 )
run(page)
```python
Partly solving change:
@component
def users_page():
 print("a")
 a, set_a = use_state("")
 inp_a = Input(set_a)
 return html.div(html.div(inp_a, "SiteA"))