func Components.Shell(title, html, page, $mypage)
{
  if(TypeOf(mypage) != "Path")
    mypage = /;

    var index = (/).MakeRelative(mypage).ToString();
    if(index == "") index = "./";

  var pages = [
        {
            text="Home",
            icon="home",
            href=index,
            classStr=""
        },
        {
            text = "Downloads",
            icon = "download",
            href=(/"downloads").MakeRelative(mypage).ToString(),
            classStr=""
        },
        {
            text = "Plugins",
            icon = "extension",
            href= (/"plugins").MakeRelative(mypage).ToString(),
            classStr=""
        },
        {
            text = "Settings",
            icon = "settings",
            href= (/"settings").MakeRelative(mypage).ToString(),
            classStr=""
        }
    ];
    pages[page].classStr = "active";
    return <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TYTD - {title}</title>
    <link rel="stylesheet" href={(/"beer.min.css").MakeRelative(mypage).ToString()}>
    <link rel="stylesheet" href={(/"theme.css").MakeRelative(mypage).ToString()}>
    <script src={(/"htmx.min.js").MakeRelative(mypage).ToString()} defer></script>
    <script type="module" src={(/"beer.min.js").MakeRelative(mypage).ToString()} defer></script>
</head>
<body hx-indicator="#loading-indicator">

<nav class="bottom">
  <each(var page : pages)>
    <a hx-get={page.href} hx-target="body" hx-push-url="true" class={page.classStr}>
        <i>{page.icon}</i>
        <div>{page.text}</div>
    </a>
  </each>
</nav>
  
<main class="responsive">
  <div class="htmx-indicator shape loading-indicator extra" id="loading-indicator">
  <img class="responsive" src="./tytd.svg">
  </div>
  <raw(html)>
</main>
    
    
</body>
</html>;
}