-
-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathindex-slim.php
178 lines (162 loc) · 8.09 KB
/
index-slim.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<script>
document.getElementById("main").className += ' fadeout';
$(document).ready(function() {
$('#main').removeClass('fadeout');
$('#body-row .collapse').collapse('hide');
// Collapse/Expand icon
$('#collapse-icon').addClass('fa-angle-double-left');
// Collapse click
$('[data-toggle=sidebar-colapse]').click(function() {
SidebarCollapse();
});
function SidebarCollapse() {
$('.menu-collapsed').toggleClass('d-none');
$('.sidebar-submenu').toggleClass('d-none');
$('.submenu-icon').toggleClass('d-none');
$('#sidebar-container').toggleClass('sidebar-expanded sidebar-collapsed');
// Treating d-flex/d-none on separators with title
var SeparatorTitle = $('.sidebar-separator-title');
if (SeparatorTitle.hasClass('d-flex')) {
SeparatorTitle.removeClass('d-flex');
} else {
SeparatorTitle.addClass('d-flex');
}
// Collapse/Expand icon
$('#collapse-icon').toggleClass('fa-angle-double-left fa-angle-double-right');
}
})
</script>
<link rel="stylesheet" href="/assets/css/panel.css">
<nav class="navbar navbar-expand-md navbar-dark bg-primary">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">
<img src="/assets/images/icon-md.gif" width="30" height="30" class="d-inline-block align-top" alt="">
<span class="menu-collapsed">Web Hosting Panel</span>
</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<!-- This menu is hidden in bigger devices with d-sm-none.
The sidebar isn't proper for smaller screens imo, so this dropdown menu can keep all the useful sidebar itens exclusively for smaller screens -->
<li class="nav-item dropdown d-sm-block d-md-none">
<a class="nav-link dropdown-toggle" href="#" id="smallerscreenmenu" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Main Menu
</a>
<div class="dropdown-menu" aria-labelledby="smallerscreenmenu">
<a class="dropdown-item" href="#">Dashboard</a>
<a class="dropdown-item" href="#">Domains</a>
<a class="dropdown-item" href="#">Databases</a>
<a class="dropdown-item" href="#">FTP Accounts</a>
</div>
</li><!-- Smaller devices menu END -->
</ul>
</div>
</nav><!-- NavBar END -->
<!-- Bootstrap row -->
<div class="row" id="body-row">
<!-- Sidebar -->
<div id="sidebar-container" class="sidebar-expanded d-none d-md-block">
<!-- d-* hiddens the Sidebar in smaller devices. Its itens can be kept on the Navbar 'Menu' -->
<!-- Bootstrap List Group -->
<ul class="list-group">
<!-- Menu with submenu -->
<a href="#submenu1" data-toggle="collapse" aria-expanded="false"
class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-dashboard fa-fw mr-3"></span>
<span class="menu-collapsed">Dashboard</span>
<span class="submenu-icon ml-auto"></span>
</div>
</a>
<!-- Submenu content -->
<div id='submenu1' class="collapse sidebar-submenu">
<a href="#" class="list-group-item list-group-item-action bg-dark text-white">
<span class="menu-collapsed">Charts</span>
</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white">
<span class="menu-collapsed">Reports</span>
</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white">
<span class="menu-collapsed">Tables</span>
</a>
</div>
<a href="#submenu2" data-toggle="collapse" aria-expanded="false"
class="bg-dark list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-user fa-fw mr-3"></span>
<span class="menu-collapsed">Profile</span>
<span class="submenu-icon ml-auto"></span>
</div>
</a>
<!-- Submenu content -->
<div id='submenu2' class="collapse sidebar-submenu">
<a href="#" class="list-group-item list-group-item-action bg-dark text-white">
<span class="menu-collapsed">Settings</span>
</a>
<a href="#" class="list-group-item list-group-item-action bg-dark text-white">
<span class="menu-collapsed">Password</span>
</a>
</div>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span class="menu-collapsed">Tasks</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-calendar fa-fw mr-3"></span>
<span class="menu-collapsed">Calendar</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-envelope-o fa-fw mr-3"></span>
<span class="menu-collapsed">Messages <span
class="badge badge-pill badge-primary ml-2">5</span></span>
</div>
</a>
<!-- Separator without title -->
<li class="list-group-item sidebar-separator"></li>
<!-- /END Separator -->
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-question fa-fw mr-3"></span>
<span class="menu-collapsed">Help</span>
</div>
</a>
<a href="#" data-toggle="sidebar-colapse"
class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fa fa-2x mr-3"></span>
<span id="collapse-text" class="menu-collapsed">Collapse</span>
</div>
</a>
<!-- Logo -->
<li class="list-group-item logo-separator d-flex justify-content-center">
<img src='/assets/images/icon-md.gif' width="30" height="30" />
</li>
</ul><!-- List Group END-->
</div><!-- sidebar-container END -->
<!-- MAIN -->
<div class="col">
<h1>
Collapsing Menu
<small class="text-muted">Version 2.1</small>
</h1>
<div class="card">
<h4 class="card-header">Requirements</h4>
<div class="card-body">
<ul>
<li>JQuery</li>
<li>Bootstrap 4 beta-3</li>
</ul>
</div>
</div>
</div><!-- Main Col END -->
</div>
</div>