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

<div class="sidebar">
    <div class="sidebar-header">
        <img src="./logo.png">
        {APP.map(item => (<p>{item.name}</p>))}
    </div>
    <div class="sidebar-top">
        {SIDEBARTOP.map(item => (
            <li data-tab={item.text} class={item.option}>
                <i class={item.icon}></i>
                <p>{item.text}</p>
                <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>
            </li>
        ))}
    </div>
    <div class="sidebar-bottom">
        {SIDEBARBOTTOM.map(item => (
            <li data-tab={item.page} class={item.class}>
                <i class={item.text}></i>
                <p>{item.text}</p>
                <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>
            </li>
        ))}
    </div>
</div>