zephyr/client/app/directive/navbar/navbar.html

   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>
   8         </button>
   9         <a class="navbar-brand" href="index.html">Zephyr</a>
  10     </div>
  11     <!-- /.navbar-header -->
  12
  13     <ul class="nav navbar-top-links navbar-right">
  14         <li class="dropdown">
  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>
  17             </a>
  18             <ul class="dropdown-menu dropdown-messages">
  19                 <li>
  20                     <a href="#">
  21                         <div>
  22                             <strong>John Smith</strong>
  23                             <span class="pull-right text-muted">
  24                                 <em>Yesterday</em>
  25                             </span>
  26                         </div>
  27                         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
  28                     </a>
  29                 </li>
  30                 <li class="divider"></li>
  31                 <li>
  32                     <a href="#">
  33                         <div>
  34                             <strong>John Smith</strong>
  35                             <span class="pull-right text-muted">
  36                                 <em>Yesterday</em>
  37                             </span>
  38                         </div>
  39                         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
  40                     </a>
  41                 </li>
  42                 <li class="divider"></li>
  43                 <li>
  44                     <a href="#">
  45                         <div>
  46                             <strong>John Smith</strong>
  47                             <span class="pull-right text-muted">
  48                                 <em>Yesterday</em>
  49                             </span>
  50                         </div>
  51                         <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend...</div>
  52                     </a>
  53                 </li>
  54                 <li class="divider"></li>
  55                 <li>
  56                     <a class="text-center" href="#">
  57                         <strong>Read All Messages</strong>
  58                         <i class="fa fa-angle-right"></i>
  59                     </a>
  60                 </li>
  61             </ul>
  62             <!-- /.dropdown-messages -->
  63         </li>
  64         <!-- /.dropdown -->
  65         <li class="dropdown">
  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>
  68             </a>
  69             <ul class="dropdown-menu dropdown-tasks">
  70                 <li>
  71                     <a href="#">
  72                         <div>
  73                             <p>
  74                                 <strong>Task 1</strong>
  75                                 <span class="pull-right text-muted">40% Complete</span>
  76                             </p>
  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>
  80                                 </div>
  81                             </div>
  82                         </div>
  83                     </a>
  84                 </li>
  85                 <li class="divider"></li>
  86                 <li>
  87                     <a href="#">
  88                         <div>
  89                             <p>
  90                                 <strong>Task 2</strong>
  91                                 <span class="pull-right text-muted">20% Complete</span>
  92                             </p>
  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>
  96                                 </div>
  97                             </div>
  98                         </div>
  99                     </a>
 100                 </li>
 101                 <li class="divider"></li>
 102                 <li>
 103                     <a href="#">
 104                         <div>
 105                             <p>
 106                                 <strong>Task 3</strong>
 107                                 <span class="pull-right text-muted">60% Complete</span>
 108                             </p>
 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>
 112                                 </div>
 113                             </div>
 114                         </div>
 115                     </a>
 116                 </li>
 117                 <li class="divider"></li>
 118                 <li>
 119                     <a href="#">
 120                         <div>
 121                             <p>
 122                                 <strong>Task 4</strong>
 123                                 <span class="pull-right text-muted">80% Complete</span>
 124                             </p>
 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>
 128                                 </div>
 129                             </div>
 130                         </div>
 131                     </a>
 132                 </li>
 133                 <li class="divider"></li>
 134                 <li>
 135                     <a class="text-center" href="#">
 136                         <strong>See All Tasks</strong>
 137                         <i class="fa fa-angle-right"></i>
 138                     </a>
 139                 </li>
 140             </ul>
 141             <!-- /.dropdown-tasks -->
 142         </li>
 143         <!-- /.dropdown -->
 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>
 147             </a>
 148             <ul class="dropdown-menu dropdown-alerts">
 149                 <li>
 150                     <a href="#">
 151                         <div>
 152                             <i class="fa fa-comment fa-fw"></i> New Comment
 153                             <span class="pull-right text-muted small">4 minutes ago</span>
 154                         </div>
 155                     </a>
 156                 </li>
 157                 <li class="divider"></li>
 158                 <li>
 159                     <a href="#">
 160                         <div>
 161                             <i class="fa fa-twitter fa-fw"></i> 3 New Followers
 162                             <span class="pull-right text-muted small">12 minutes ago</span>
 163                         </div>
 164                     </a>
 165                 </li>
 166                 <li class="divider"></li>
 167                 <li>
 168                     <a href="#">
 169                         <div>
 170                             <i class="fa fa-envelope fa-fw"></i> Message Sent
 171                             <span class="pull-right text-muted small">4 minutes ago</span>
 172                         </div>
 173                     </a>
 174                 </li>
 175                 <li class="divider"></li>
 176                 <li>
 177                     <a href="#">
 178                         <div>
 179                             <i class="fa fa-tasks fa-fw"></i> New Task
 180                             <span class="pull-right text-muted small">4 minutes ago</span>
 181                         </div>
 182                     </a>
 183                 </li>
 184                 <li class="divider"></li>
 185                 <li>
 186                     <a href="#">
 187                         <div>
 188                             <i class="fa fa-upload fa-fw"></i> Server Rebooted
 189                             <span class="pull-right text-muted small">4 minutes ago</span>
 190                         </div>
 191                     </a>
 192                 </li>
 193                 <li class="divider"></li>
 194                 <li>
 195                     <a class="text-center" href="#">
 196                         <strong>See All Alerts</strong>
 197                         <i class="fa fa-angle-right"></i>
 198                     </a>
 199                 </li>
 200             </ul>
 201             <!-- /.dropdown-alerts -->
 202         </li>
 203         <!-- /.dropdown -->
 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>
 207             </a>
 208             <ul class="dropdown-menu dropdown-user">
 209                 <li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a>
 210                 </li>
 211                 <li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
 212                 </li>
 213                 <li class="divider"></li>
 214                 <li><a href="login.html"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
 215                 </li>
 216             </ul>
 217             <!-- /.dropdown-user -->
 218         </li>
 219         <!-- /.dropdown -->
 220     </ul>
 221     <!-- /.navbar-top-links -->
 222
 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>
 232                             </button>
 233                         </span>
 234                     </div>
 235                     <!-- /input-group -->
 236                 </li>
 237                 <li>
 238                     <a href="#"><i class="fa fa-dashboard fa-fw" ng-class="active"></i> Dashboard</a>
 239                 </li>
 240                 <li>
 241                     <a href="commandPage"><i class="fa fa-bar-chart-o fa-fw"></i> Command</a>
 242                 </li>
 243                 <li>
 244                     <a href="workspacePage"><i class="fa fa-table fa-fw"></i> WorkSpace</a>
 245                 </li>
 246                 <li>
 247                     <a href="activityLogPage"><i class="fa fa-edit fa-fw"></i> Activity Log</a>
 248                 </li>
 249             </ul>
 250         </div>
 251         <!-- /.sidebar-collapse -->
 252     </div>
 253     <!-- /.navbar-static-side -->
 254 </nav>
 255