[HTML & PHP] Sidebar funktioniert nicht

**CaptainKevin** · 14. Mai 2021

Sehr geehrte Damen & Herren,

ich bin derzeit dabei ein Control Panel zu schreiben.
Leider funktioniert die Sidebar und die Navbar nicht, wenn ich diese mit PHP einbinde.

Kann einer vielleicht mal mit einem geschulten Auge drüberschauen?

Index.php

PHP

<?php
    session_start();
?><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="Offizielles X-RP Control Panel" />
        <meta name="author" content="CaptainKevin" />
        <title>X-RP | Control Panel</title>
        <link href="css/styles.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet" crossorigin="anonymous" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    </head>
    <body class="sb-nav-fixed">
        <?php include_once ('includes/navbar.php');?>
        <div id="layoutSidenav">
            <?php include_once ('includes/sidebar.php');?>

            <div id="layoutSidenav_content">
                <main>
                    <div class="container-fluid">
                        <h1 class="mt-4">Startseite</h1>
                        <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item active">Sehr geehrte Damen & Herren,<br>
                            vielen Dank, dass Sie sich dazu entschieden haben, das UCP von X-RP zu nutzen.</li>
                        </ol>
                    </div>
                </main>

                <?php include_once ('includes/footer.php');?>
            </div>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="js/scripts.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js" crossorigin="anonymous"></script>
    </body>
</html>

Alles anzeigen

Include navbar.php

PHP

<?php
    echo '<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand" href="index.php">X-RP</a>
    <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
    <!-- Navbar Search-->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Suche..." aria-label="Search" aria-describedby="basic-addon2" />
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </form>
    <!-- Navbar-->
    <ul class="navbar-nav ml-auto ml-md-0">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" id="userDropdown" href="#!" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-user fa-fw"></i></a>
        </li>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
            <a class="dropdown-item" href="#!">Einstellungen</a>
            <a class="dropdown-item" href="#!">Aktivitäten</a>
            <div class="dropdown-divider"></div>
            '; 
            if(isset($_SESSION['session_mail']))
            {
                echo '<a class="dropdown-item" href="database/logout_db.php">Logout</a>';
            }
            else
            {
                echo '<a class="dropdown-item" href="login.php">Login</a>';
            }
            
        echo '</div>
    </ul>
</nav>';
?>

Alles anzeigen

Include sidebar.php

PHP

<?php
    echo '<div id="layoutSidenav_nav">
    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
        <div class="sb-sidenav-menu">
            <div class="nav">
                <div class="sb-sidenav-menu-heading">Core</div>
                <a class="nav-link" href="index.php">
                    <div class="sb-nav-link-icon"><i class="fas fa-tachometer-alt"></i></div>
                    Startseite
                </a>
                <div class="sb-sidenav-menu-heading">Charakter</div>
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseLayouts" aria-expanded="false" aria-controls="collapseLayouts">
                    <div class="sb-nav-link-icon"><i class="fas fa-columns"></i></div>
                    Eigentümer
                    <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                </a>
                <div class="collapse" id="collapseLayouts" aria-labelledby="headingOne" data-parent="#sidenavAccordion">
                    <nav class="sb-sidenav-menu-nested nav">
                        <a class="nav-link" href="houses.php">Häuser</a>
                        <a class="nav-link" href="cars.php">Fahrzeuge</a>
                        <a class="nav-link" href="businesses.php">Unternehmen</a>
                        <a class="nav-link" href="bank.php">Bankkonten</a>
                    </nav>
                </div>
                <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapsePages" aria-expanded="false" aria-controls="collapsePages">
                    <div class="sb-nav-link-icon"><i class="fas fa-book-open"></i></div>
                    Serverinformationen
                    <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                </a>
                <div class="collapse" id="collapsePages" aria-labelledby="headingTwo" data-parent="#sidenavAccordion">
                    <nav class="sb-sidenav-menu-nested nav accordion" id="sidenavAccordionPages">
                        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseAuth" aria-expanded="false" aria-controls="pagesCollapseAuth">
                            Gesetzesbücher
                            <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                        </a>
                        <div class="collapse" id="pagesCollapseAuth" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
                            <nav class="sb-sidenav-menu-nested nav">
                                <a class="nav-link" href="login.html">StVo</a>
                                <a class="nav-link" href="register.html">StGb</a>
                                <a class="nav-link" href="password.html">Regelwerk</a>
                            </nav>
                        </div>
                        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#pagesCollapseError" aria-expanded="false" aria-controls="pagesCollapseError">
                            Community
                            <div class="sb-sidenav-collapse-arrow"><i class="fas fa-angle-down"></i></div>
                        </a>
                        <div class="collapse" id="pagesCollapseError" aria-labelledby="headingOne" data-parent="#sidenavAccordionPages">
                            <nav class="sb-sidenav-menu-nested nav">
                                <a class="nav-link" href="https://x-rp.net/forum/index.php?board/4-informationen/">Informationen</a>
                                <a class="nav-link" href="https://x-rp.net/forum/index.php?board/7-spielausschl%C3%BCsse/">Spielausschlüsse</a>
                                <a class="nav-link" href="https://x-rp.net/forum/index.php?board/5-changelogs/">Changelogs</a>
                            </nav>
                        </div>
                    </nav>
                </div>
                <div class="sb-sidenav-menu-heading">Statistiken</div>
                <a class="nav-link" href="charts.html">
                    <div class="sb-nav-link-icon"><i class="fas fa-chart-area"></i></div>
                    Fahrzeuge
                </a>
                <a class="nav-link" href="tables.html">
                    <div class="sb-nav-link-icon"><i class="fas fa-table"></i></div>
                    Häuser
                </a>
            </div>
        </div>
        <div class="sb-sidenav-footer">
            <div class="small">Eingeloggt als:</div>';
            if(isset($_SESSION['session_mail']))
            {
                echo $_SESSION['session_vorname'] . ' ' . $_SESSION['session_nachname'];
            }
            else
            {
                echo 'Nicht eingeloggt';
            }
        echo '</div>
    </nav>
</div>';
?>

Alles anzeigen

Und das besagte Problem:

pasted-from-clipboard.png

Das "Burger-Menü" (links oben) lässt sich nicht ein und ausklappen.
Oben rechts sollte sich auch ein Menü ausklappen (geht auch nicht).
Und die Reiter links lassen sich nur in der Index.php öffnen und in den Seiten mit der Verlinkung nicht mehr.
Hat jemand vielleicht eine Idee?
Getestet wurde das ganze sowohl auf dem Localhost, als auch auf meinem Webserver (einsehbar unter http://x-rp.net/ucp/index.php )

roomfruit · 14. Mai 2021

Wieso sollte denn der include was mit der Funktion der Buttons zu tun haben

Liegt daran, dass du bootstrap falsch nutzt

hier die navbar.php

PHP

<nav class="sb-topnav navbar navbar-expand navbar-dark bg-dark">
    <a class="navbar-brand" href="index.php">X-RP</a>
    <button class="btn btn-link btn-sm order-1 order-lg-0" id="sidebarToggle" href="#!"><i class="fas fa-bars"></i></button>
    <!-- Navbar Search-->
    <form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
        <div class="input-group">
            <input class="form-control" type="text" placeholder="Suche..." aria-label="Search" aria-describedby="basic-addon2" />
            <div class="input-group-append">
                <button class="btn btn-primary" type="button"><i class="fas fa-search"></i></button>
            </div>
        </div>
    </form>
    <!-- Navbar-->
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="fas fa-user fa-fw"></i>
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#!">Einstellungen</a>
        <a class="dropdown-item" href="#!">Aktivitäten</a>
        <div class="dropdown-divider"></div>
        <?php
        if(isset($_SESSION['session_mail'])){
            echo '<a class="dropdown-item" href="database/logout_db.php">Logout</a>';
        }else{
            echo '<a class="dropdown-item" href="login.php">Login</a>';
        }
        ?>
      </div>
    </div>
</nav>

Alles anzeigen

[HTML & PHP] Sidebar funktioniert nicht

breadfish.de 12. März 2022

Ähnliche Themen

Woltlab Suite Themes by LoSti's World [Vorschau]