Thanks.
I tried lots of ways of doing this, however only one of them worked: I use a script someone made to accomplish it.
Here's my issue: It loads the page, but it doesn't seem to be loading some scripts properly. It works with some scripts, then others it just doesn't. So some scripts I load in will work, some wont. Here's what I have:
HTML:
<html>
<body class="skin-blue">
<div data-include="includes/layout-main.html"></div>
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li class="active">Dashboard</li>
</ol>
</section>
</aside><!-- /.right-side -->
<script src="js/csi.min.js" type="text/javascript"></script>
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="js/AdminLTE/app.js" type="text/javascript"></script>
</body>
</html>
That is what I'm trying to load in to, it works, it looks as it should, except on the side bar there are buttons which should extend, similar to the way you can hide some boards on the forums, just click on it and it shows/hides it. Well, for me it doesn't work. I click on it and it does nothing - I'm sure of the file paths.
Then here's my layout-main:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Private Sector | Dashboard</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">
<a href="dashboard.html" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
Private Sector
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<?php echo $_SESSION['user'] ?>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
<img src="img/avatar3.png" class="img-circle" alt="User Image" />
<p>
<?php echo $_SESSION['user'] - $role ?>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">Profile</a>
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat">Sign out</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="img/avatar3.png" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello, <?php echo $_SESSION['user'] ?></p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<ul class="sidebar-menu">
<li class="active">
<a href="dashboard.html">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-laptop"></i>
<span>Private</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="treeview-menu">
<li><a href="pages/private/sender.html"><i class="fa fa-angle-double-right"></i> Mail Sender</a></li>
<li><a href="pages/private/booter.html"><i class="fa fa-angle-double-right"></i> Booter</a></li>
<li><a href="pages/private/phpMyAdmin.html"><i class="fa fa-angle-double-right"></i> phpMyAdmin</a></li>
<li><a href="pages/private/mailbox.html"><i class="fa fa-angle-double-right"></i> Mailbox</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-edit"></i> <span>Servers</span>
<i class="fa fa-angle-left pull-right"></i>
<small class="badge pull-right bg-blue">3</small>
</a>
<ul class="treeview-menu">
<li><a href="pages/servers/manage.html"><i class="fa fa-angle-double-right"></i> Manage servers</a></li>
<li><a href="pages/servers/servers.html"><i class="fa fa-angle-double-right"></i> (Servers)</a></li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-table"></i> <span>Users</span>
<i class="fa fa-angle-left pull-right"></i>
<small class="badge pull-right bg-red">3</small>
</a>
<ul class="treeview-menu">
<li><a href="pages/users/applications.html"><i class="fa fa-angle-double-right"></i> Applications</a></li>
<li><a href="pages/users/manage.html"><i class="fa fa-angle-double-right"></i> Manage Users</a></li>
</ul>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
</div><!-- ./wrapper -->
</body>
</html>
Thats the file I load in.
So, whilst the show/hide button on the sidebar doesn't work, another script does, which I find strange.
Any help on this is much appreciated.