<?php include "../../root.class.php";
$html = new html();
$html->add_styles_page();
// $html->check_user_type("ADMIN");

$navbar_label = new label();
$navbar_label->for("add_label");
$navbar_label->value("NAVIGATING THE NAVBAR");
$navbar_label->addAttribute("style", "font-size: 3vw;");

$page_des_label = new label();
$page_des_label->for("page_description");
$page_des_label->value("PAGE DESCRIPTION");
$page_des_label->addAttribute("style", "font-size: 2.5vw;");

$sections_label = new label();
$sections_label->for("add_label");
$sections_label->value("NAVBAR SECTIONS");
$sections_label->addAttribute("style", "font-size: 3vw;");

?>

<div class="form_down">
    <div style="display: flex; flex-direction: column;border: 2px solid black; border-radius: 2vw; margin: 1vw;">
        <?php $navbar_label->add(); ?>
        <div style=" display: flex; flex-direction: row;">

            <div>
                <img src="../images/navbar_def.png" alt="Default Navbar"
                    style="width: 50%; margin: 1vw;border: 3px solid navy;border-radius: 2vw; padding: 1vw;">
            </div>

            <div
                style="display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: left;padding: 1vw;">
                <?php $page_des_label->add(); ?><br>
                <p style="font-size: 1.5vw; text-align: center;">The Navigation Bar appears at the left side of every screen,<br> providing users with quick access to navigation and context.
                </p>

                <ul style="list-style-type:none;line-height: 3vw;font-size: 1.5vw;">
                    <li><b>LOGO</b><br> - Used to redirect to the Homepage</li>
                    <li><b>BUTTONS</b><br> - Used to navigate between pages.</li>
                    <li><b>LOGOUT</b><br> - Exit to the login page</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<br>

<div class="form_down">
    <div style="display: flex; flex-direction: column;border: 2px solid navy; border-radius: 2vw; margin: 1vw;">
        <?php $sections_label->add(); ?>
        <div style=" display: flex; flex-direction: row;">

            <div>
                <img src="../images/navbar_sec.png" alt="Default Navbar"
                    style="width: 50%; margin: 1vw;border: 3px solid black; border-radius: 2vw; padding: 1vw;">
            </div>

            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: left;padding: 1vw;">
                <?php $page_des_label->add(); ?><br>
                <p style="font-size: 1.5vw; text-align: center;">The Navigation Bar appears at the top of every
                    screen,<br> providing users with quick access to navigation and context.
                </p>

                <ul style="list-style-type:none;line-height: 3vw;font-size: 1.5vw;">
                    <li><b>SUB-HEADING/TITLES:</b><br> - headings to help separate the different sections of the navbar</li>
                    <li><b>BUTTONS:</b><br> - Used to navigate between pages.</li>
                </ul>
            </div>
        </div>
    </div>
</div>