Add links to custom pages in the Bootstrap Admin Navbar

The sidebar structure

The sidebar is made up of categories, navs, and links. The categories are the main sections of the sidebar, the navs are the sub-sections of the categories, and the links are the actual links to the pages.

Here is the structure:

Link to custom page(s) in the Bootstrap Admin Panel sidebar

1. Create your target file(s) in admin/
   ie: admin/custom-page-one.php and admin/custom-page-two.php
2. Create new router rule(s) in admin/index.php to lead to your new page(s). ie:

   // add your custom page(s) to the router
   // the first parameter is the method (GET, POST, PUT, DELETE)
   // the second parameter is the path to the page
   // the third parameter is the name given to the route (any arbitrary name. It must be unique, without spaces, without special characters)
   $router->map('GET', '/custom-page-one', 'custom-page-one.php', 'custom-page-one');
   $router->map('GET', '/custom-page-two', 'custom-page-two.php', 'custom-page-two');

3. Add your page(s) to the sidebar

   The following code creates a new category named "My New Category", then adds a Nav object to the category and finally adds the links to the Nav object.

   The methods used in this code are the followings:

   • Sidebar::addCategory() - adds a new category to the sidebar - /class/bootstrap/sidebar/Sidebar.php
   • SidebarCategories::addNav() - adds a new Nav object to the category - /class/bootstrap/sidebar/SidebarCategories.php
   • Nav::addLink() - adds a new link to the Nav object - /class/bootstrap/sidebar/Nav.php
   1. open admin\inc\sidebar.php
   2. Add the following code at the end of the file & customize as desired:

      
      // create an array with the pages that we'll add to the "My New Category" category
      // using the route names we gave in index.php => $router->map()
      $category_pages = array('custom-page-one', 'custom-page-two');
      
      /* ===================================
      =              Category              =
      ==================================== */
      
      $is_category_collapsed = true;
      
      // test if the active (current) page is in the $category_pages array using $match from the router
      // and expand the category accordingly
      if (isset($match['name']) && in_array($match['name'], $category_pages)) {
          $is_category_collapsed = false;
      }
      
      // add the category
      $sidebar->addCategory('new-category', 'New Category', '', '', true, $is_category_collapsed);
      
      /* ===================================
      =                 Nav                =
      ==================================== */
      
      // create a nav object inside the category. The nav object will contain the links
      // add nav into category - the 'newCategory' object is the sidebar's newly created category.
      // its name ('newCategory') is the lower-camelcase version of 'new-category'
      $sidebar->newCategory->addNav('new-nav', 'navbar-nav flex-column py-0');
      
      /* ===================================
      =                Links               =
      ==================================== */
      
      // first link
      
      $active = false;
      
      // check if the page is active and set the active variable to true
      if (isset($match['name']) && $match['name'] == 'custom-page-one') {
          $active = true;
      }
      
      // add the first link to the nav object
      $sidebar->newCategory->newNav->addLink(ADMIN_URL . 'custom-page-one', 'Custom page one', 'fas fa-circle-info', $active, 'class=nav-item', 'class=nav-link d-flex align-items-center');
      
      // second link
      
      $active = false;
      
      // check if the page is active and set the active variable to true
      if (isset($match['name']) && $match['name'] == 'custom-page-two') {
          $active = true;
      }
      
      // add the second link to the nav object
      $sidebar->newCategory->newNav->addLink(ADMIN_URL . 'custom-page-two', 'Custom page two', 'fas fa-users', $active, 'class=nav-item', 'class=nav-link d-flex align-items-center');
      

4. Done.

PHP CRUD tutorial main page