1 <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
2 <div class="navbar-header">
3 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
4 <span class="sr-only">Toggle navigation</span>
5 <span class="icon-bar"></span>
6 <span class="icon-bar"></span>
7 <span class="icon-bar"></span>
9 <a class="navbar-brand" href="index.html">Zephyr</a>
11 <!-- /.navbar-header -->
13 <ul class="nav navbar-top-links navbar-right">
15 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
16 <i class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
18 <ul class="dropdown-menu dropdown-messages">
22 <strong>John Smith</strong>
23 <span class="pull-right text-muted">
27 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
30 <li class="divider"></li>
34 <strong>John Smith</strong>
35 <span class="pull-right text-muted">
39 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
42 <li class="divider"></li>
46 <strong>John Smith</strong>
47 <span class="pull-right text-muted">
51 <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
54 <li class="divider"></li>
56 <a class="text-center" href="#">
57 <strong>Read All Messages</strong>
58 <i class="fa fa-angle-right"></i>
62 <!-- /.dropdown-messages -->
66 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
67 <i class="fa fa-tasks fa-fw"></i> <i class="fa fa-caret-down"></i>
69 <ul class="dropdown-menu dropdown-tasks">
74 <strong>Task 1</strong>
75 <span class="pull-right text-muted">40% Complete</span>
77 <div class="progress progress-striped active">
78 <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
79 <span class="sr-only">40% Complete (success)</span>
85 <li class="divider"></li>
90 <strong>Task 2</strong>
91 <span class="pull-right text-muted">20% Complete</span>
93 <div class="progress progress-striped active">
94 <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
95 <span class="sr-only">20% Complete</span>
101 <li class="divider"></li>
106 <strong>Task 3</strong>
107 <span class="pull-right text-muted">60% Complete</span>
109 <div class="progress progress-striped active">
110 <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
111 <span class="sr-only">60% Complete (warning)</span>
117 <li class="divider"></li>
122 <strong>Task 4</strong>
123 <span class="pull-right text-muted">80% Complete</span>
125 <div class="progress progress-striped active">
126 <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
127 <span class="sr-only">80% Complete (danger)</span>
133 <li class="divider"></li>
135 <a class="text-center" href="#">
136 <strong>See All Tasks</strong>
137 <i class="fa fa-angle-right"></i>
141 <!-- /.dropdown-tasks -->
144 <li class="dropdown">
145 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
146 <i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
148 <ul class="dropdown-menu dropdown-alerts">
152 <i class="fa fa-comment fa-fw"></i> New Comment
153 <span class="pull-right text-muted small">4 minutes ago</span>
157 <li class="divider"></li>
161 <i class="fa fa-twitter fa-fw"></i> 3 New Followers
162 <span class="pull-right text-muted small">12 minutes ago</span>
166 <li class="divider"></li>
170 <i class="fa fa-envelope fa-fw"></i> Message Sent
171 <span class="pull-right text-muted small">4 minutes ago</span>
175 <li class="divider"></li>
179 <i class="fa fa-tasks fa-fw"></i> New Task
180 <span class="pull-right text-muted small">4 minutes ago</span>
184 <li class="divider"></li>
188 <i class="fa fa-upload fa-fw"></i> Server Rebooted
189 <span class="pull-right text-muted small">4 minutes ago</span>
193 <li class="divider"></li>
195 <a class="text-center" href="#">
196 <strong>See All Alerts</strong>
197 <i class="fa fa-angle-right"></i>
201 <!-- /.dropdown-alerts -->
204 <li class="dropdown">
205 <a class="dropdown-toggle" data-toggle="dropdown" href="#">
206 <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
208 <ul class="dropdown-menu dropdown-user">
209 <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
211 <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
213 <li class="divider"></li>
214 <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
217 <!-- /.dropdown-user -->
221 <!-- /.navbar-top-links -->
223 <div class="navbar-default sidebar" role="navigation">
224 <div class="sidebar-nav navbar-collapse">
225 <ul class="nav" id="side-menu">
226 <li class="sidebar-search">
227 <div class="input-group custom-search-form">
228 <input type="text" class="form-control" placeholder="Search...">
229 <span class="input-group-btn">
230 <button class="btn btn-default" type="button">
231 <i class="fa fa-search"></i>
235 <!-- /input-group -->
238 <a class="active" href="index.html"><i class="fa fa-dashboard fa-fw"></i> Dashboard</a>
241 <a href="commandPage"><i class="fa fa-bar-chart-o fa-fw"></i> Command</a>
244 <a href="workspacePage"><i class="fa fa-table fa-fw"></i> WorkSpace</a>
247 <a href="activityLogPage"><i class="fa fa-edit fa-fw"></i> Activity Log</a>
251 <!-- /.sidebar-collapse -->
253 <!-- /.navbar-static-side -->