<?php

include "html.class.php";
include "root.class.php";
$html = new html();
$root = new root();
?>
<style>
    body {
        background-color: #f5f7fa;
    }
</style>

<iframe id="iframe_app" src="app/home.php" class="app_frame" frameborder="0"></iframe>
    <div class="menu" id="menu">
        <div class="row menu_row hidden_desktop" style="column-gap: 0.5em; padding-top: 0.35em; margin-bottom: 1em;">
            <button class="menu_button_menu hidden_desktop" onclick="open_close_menu()" id="menu_btn">MENU</button>
            </button class="menu_button_home hidden_desktop" onclick="home()" id="home_btn">HOME</button>
        </div>
        <button class="menu_button_home hidden_mobile" onclick="home()" id="">HOME</button>
        <button class="menu_button" onclick="go_to('app/settings_home.php')">SETTINGS</button>
        <button class="menu_button" onclick="go_to('logout.php')">LOG OUT</button>
    </div>
<script>

    function open_close_menu() {
        document.getElementById("menu").classList.toggle("open");
        if (document.getElementById("menu_btn").innerHTML == "MENU") {
            document.getElementById("menu_btn").innerHTML = "CLOSE";
            document.getElementById("menu_btn").width = "90%";
            document.getElementById("home_btn").style.display = "none";
        } else {
            document.getElementById("menu_btn").innerHTML = "MENU";
            document.getElementById("menu_btn").width = "65%";
            document.getElementById("home_btn").style.display = "block";
        }
    }

    function go_to(url) {
        document.getElementById("iframe_app").src = url;
    }


    function home() {
        document.getElementById("iframe_app").src = "app/home.php";
    }
</script>