<!--FUNCTIE VOOR MAKEN DROPDOWNS-->
<!--PARAMS:
        field = Rijtje dat hij selecteerd
        table = Tabel waar hij het uit selecteerd
        mode = Mode waarvoor hij genereert (spelcomputers/games/accessoires)-->

<?php
    function renderMenuItem($category, $result) {
        $html = "";
        while ($row = mysqli_fetch_row($result)) {
            $URL = "$category/" . $row[0] . ".php";
            $html .= "<li><a href='$URL'>" . $row[0] . "</a></li>";
        }
        return $html;
    }

    function maakDropdown($field, $table, $mode){
        $connection = "localhost";
        $username = "root";
        $password = "";

        $conn = new mysqli($connection, $username, $password, "websjop");

        if ($conn->connect_error) {
            die("Connection failed: " . $conn->connect_error);
        }

        //Query voor informatie
        $sql = "SELECT $field FROM $table";
        // $sql = "SELECT " . $field . " FROM " . $table;
        $result = $conn->query($sql);


        switch($mode) {
            case "spelcomputers":
                echo renderMenuItem("category", $result);
            case "games":
                echo renderMenuItem("games", $result);
            case "accessoires":
                echo renderMenuItem("accessoires", $result);
        }
    }
 ?>

<div class="topBar">
    <nav>
        <ul class="topBar-list">
            <li><a href="/Websjop/">Home</a></li>

            <li><a href="">Spelcomputers</a>
                <ul>
                    <?php
                        maakDropdown("Naam", "spelcomputers", "spelcomputers");
                    ?>
                </ul>
            </li>

            <li><a href="">Games</a>
                <ul>
                    <?php
                        maakDropdown("Naam", "spelcomputers", "games");
                    ?>
                </ul>
            </li>

            <li><a href="">Accessoires</a>
                <ul>
                    <?php
                        maakDropdown("Naam", "spelcomputers", "accessoires");
                    ?>
                </ul>
            </li>

            <li><form action="/Websjop/zoekpagina" method="GET">
                <input name="query" type="text">
                <input type="submit" value="Search Websjop">
            </form></li>
            <li><a href="/Websjop/winkelwagen">Mijn winkelwagen</a></li>
        </ul>
    </nav>
</div>