aanpassen styling voor side menu

application/views/partials/_navbar-left.php

@@ -1,26 +1,30 @@
-<div class="site-menubar">
-    <ul class="site-menu">
-        <!-- Menu Category-->
-        <li class="site-menu-category">Menu</li>
-        <!-- End Menu Category-->
+<nav id="sidebar">
+    <div class="sidebar-header">
+        <img src="css/images/logo_dbo.png" width="200"/>
+    </div>
+
+    <ul class="list-unstyled components">
+        <p>MENU</p>
 
         <?php foreach ( $pages as $page ): ?>
             <?php if ( count( $page->subpages ) == 0 ): ?>
-                <li class="site-menu-item" data-bind="click:setPage.bind($data, '<?= $page->pageurl ?>')">
+                <li class="active" data-bind="click:setPage.bind($data, '<?= $page->pageurl ?>')">
                     <a href="#"><?= $page->pagename ?></a>
                 </li>
             <?php else: ?>
-                <li class="site-menu-item has-sub pointer">
-                    <a href="#"><?= $page->pagename ?></a>
-                    <ul class="site-menu-sub">
+                <li>
+                    <a href="#<?= $page->pageurl ?>" data-toggle="collapse" aria-expanded="false">
+                        <?= $page->pagename ?>
+                    </a>
+                    <ul class="collapse list-unstyled" id="<?= $page->pageurl ?>">
                         <?php foreach ( $page->subpages as $subpage ): ?>
-                            <li class="pointer" data-bind="click:setPage.bind($data, '<?= $subpage->pageurl ?>')">
-                                <a><?= $subpage->pagename ?></a>
-                            </li>
+                        <li data-bind="click:setPage.bind($data, '<?= $subpage->pageurl ?>')">
+                            <a href="#"><?= $subpage->pagename ?></a>
+                        </li>
                         <?php endforeach; ?>
                     </ul>
                 </li>
             <?php endif; ?>
         <?php endforeach; ?>
     </ul>
-</div>
+</nav>