---
import { APP } from '../config'
import { SIDEBARTOP, SIDEBARBOTTOM } from '../sidebar'
---

<div class="sidebar">
    <div class="drag-area"></div>
    <div class="sidebar-header">
        <div class="sidebar-header-left">
            <img src="./logo.png">
            {APP.map(item => (<p>{item.name}</p>))}
        </div>
        <div class="sidebar-header-right">
            <button id="sidebar-toggle" onclick="ToggleSidebar()"><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zm224 0V416H448V96H224zM88 96c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88zM64 216c0 13.3 10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88c-13.3 0-24 10.7-24 24zm24 72c-13.3 0-24 10.7-24 24s10.7 24 24 24h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg></button>
        </div>
    </div>
    <div class="sidebar-top">
        {SIDEBARTOP.map(item => (
            <li onclick="ws()" data-tab={item.text} class={item.default ? "active" : null}>
                <i class={item.icon}></i>
                <p>{item.text}</p>
                {item.navigation ?
                <div class="loading-indicator"><i class="fa-solid fa-circle-notch fa-spin"></i></div>
                <div id="Tab" class="webview-navigation">
                    <button onclick='document.querySelector(".active webview").goBack()'><i class="fa-solid fa-arrow-left-long"></i></button>
                    <button onclick='document.querySelector(".active webview").goForward()'><i class="fa-solid fa-arrow-right-long"></i></button>
                    <button onclick='document.querySelector(".active webview").reload()'><i class="fa-solid fa-arrow-rotate-right"></i></button>
                </div> : null}
            </li>
        ))}
    </div>
    <div class="sidebar-bottom">
        <!-- Notifications are inserted in automatically when you push notifications with Pushy. See the Pushy section in the main process. -->
        {SIDEBARBOTTOM.map(item => (
            <li data-tab={item.page}>
                <i class={item.icon}></i>
                <p>{item.text}</p>
            </li>
        ))}
    </div>
</div>