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

<div class="sidebar">
    <div class="drag-area"></div>
    <div class="sidebar-header">
        <img src="./logo.png">
        {APP.map(item => (<p>{item.name}</p>))}
    </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>