Add navbar-user for showing a logged in user

Author: stevenmirabito

dist/csh-material-bootstrap.min.css

@@ -324,7 +324,20 @@ <h1 id="navbar">Navbar</h1>
                                     <button type="submit" class="btn btn-default">Submit</button>
                                 </form>
                                 <ul class="nav navbar-nav navbar-right">
-                                    <li><a href="#">Link</a></li>
+                                    <li class="dropdown navbar-user">
+                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                                           aria-expanded="false">
+                                            <img src="https://profiles.csh.rit.edu/image/test">
+                                            Testing Tester
+                                            <span class="caret"></span>
+                                        </a>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <li><a href="#">Profile</a></li>
+                                            <li><a href="#">Settings</a></li>
+                                            <li class="divider"></li>
+                                            <li><a href="#">Logout</a></li>
+                                        </ul>
+                                    </li>
                                 </ul>
                             </div>
                         </div>
@@ -370,7 +383,20 @@ <h1 id="navbar">Navbar</h1>
                                     <button type="submit" class="btn btn-default">Submit</button>
                                 </form>
                                 <ul class="nav navbar-nav navbar-right">
-                                    <li><a href="#">Link</a></li>
+                                    <li class="dropdown navbar-user">
+                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
+                                           aria-expanded="false">
+                                            <img src="https://profiles.csh.rit.edu/image/test">
+                                            Testing Tester
+                                            <span class="caret"></span>
+                                        </a>
+                                        <ul class="dropdown-menu" role="menu">
+                                            <li><a href="#">Profile</a></li>
+                                            <li><a href="#">Settings</a></li>
+                                            <li class="divider"></li>
+                                            <li><a href="#">Logout</a></li>
+                                        </ul>
+                                    </li>
                                 </ul>
                             </div>
                         </div>

dist/csh-material-bootstrap.min.css.map

@@ -1,7 +1,6 @@
 // CSH Material Bootstrap 3.3.6
 // Main Theme
 // -----------------------------------------------------
-
 @import "variables";
 @import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
 
@@ -12,14 +11,30 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
 
 .navbar {
   border: none;
-  @include box-shadow(0 1px 2px rgba(0,0,0,.3));
+  @include box-shadow(0 1px 2px rgba(0, 0, 0, .3));
 
   &-brand {
     font-size: 24px;
     padding-left: 60px;
     background: $navbar-default-logo 11px 11px/40px 40px no-repeat;
   }
 
+  &-user {
+    @media (min-width: $grid-float-breakpoint) {
+      & > a {
+        padding-top: 16px !important;
+        padding-bottom: 16px !important;
+      }
+    }
+
+    & a > img {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      margin-right: 5px;
+    }
+  }
+
   &-inverse {
     .navbar-brand {
       background-image: $navbar-inverse-logo;
@@ -43,7 +58,7 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
 
 // Buttons ====================================================================
 
-@mixin btn($class,$bg){
+@mixin btn($class,$bg) {
   .btn-#{$class} {
     background-size: 200% 200%;
     background-position: 50%;
@@ -61,23 +76,23 @@ $web-font-path: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"
       background-color: darken($bg, 12%);
       @include gradient-radial(darken($bg, 12%) 10%, $bg 11%);
       background-size: 1000% 1000%;
-      @include box-shadow(2px 2px 4px rgba(0,0,0,.4));
+      @include box-shadow(2px 2px 4px rgba(0, 0, 0, .4));
     }
   }
 }
 
-@include btn(default,$btn-default-bg);
-@include btn(primary,$btn-primary-bg);
-@include btn(success,$btn-success-bg);
-@include btn(info,$btn-info-bg);
-@include btn(warning,$btn-warning-bg);
-@include btn(danger,$btn-danger-bg);
-@include btn(link,#fff);
+@include btn(default, $btn-default-bg);
+@include btn(primary, $btn-primary-bg);
+@include btn(success, $btn-success-bg);
+@include btn(info, $btn-info-bg);
+@include btn(warning, $btn-warning-bg);
+@include btn(danger, $btn-danger-bg);
+@include btn(link, #fff);
 
 .btn {
   text-transform: uppercase;
   border: none;
-  @include box-shadow(1px 1px 4px rgba(0,0,0,.4));
+  @include box-shadow(1px 1px 4px rgba(0, 0, 0, .4));
   @include transition(all 0.4s);
 
   &-link {
@@ -206,7 +221,8 @@ select.form-control {
   -moz-appearance: none;
   appearance: none;
   padding-left: 0;
-  padding-right: 0\9; // remove padding for < ie9 since default arrow can't be removed
+  padding-right: 0 \9
+; // remove padding for < ie9 since default arrow can't be removed
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
   background-size: 13px;
   background-repeat: no-repeat;
@@ -481,7 +497,7 @@ input[type="checkbox"],
 .dropdown-menu {
   margin-top: 0;
   border: none;
-  @include box-shadow(0 1px 4px rgba(0,0,0,.3));
+  @include box-shadow(0 1px 4px rgba(0, 0, 0, .3));
 }
 
 // Indicators =================================================================
@@ -602,7 +618,7 @@ input[type="checkbox"],
 .panel {
   border: none;
   border-radius: 2px;
-  @include box-shadow(0 1px 4px rgba(0,0,0,.3));
+  @include box-shadow(0 1px 4px rgba(0, 0, 0, .3));
 
   &-heading {
     border-bottom: none;
@@ -615,7 +631,7 @@ input[type="checkbox"],
 
 .popover {
   border: none;
-  @include box-shadow(0 1px 4px rgba(0,0,0,.3));
+  @include box-shadow(0 1px 4px rgba(0, 0, 0, .3));
 }
 
 .carousel {

index.html

@@ -415,9 +415,9 @@ $navbar-inverse-brand-color:                $navbar-inverse-link-color !default;
 $navbar-inverse-brand-hover-color:          #fff !default;
 $navbar-inverse-brand-hover-bg:             transparent !default;
 
-// Inverted navbar toggle\
+// Inverted navbar toggle
 $navbar-inverse-toggle-hover-bg:            transparent !default;
-$navbar-inverse-toggle-icon-bar-bg:         rgba(0,0,0,0.5) !default;
+$navbar-inverse-toggle-icon-bar-bg:         $navbar-inverse-link-hover-color !default;
 $navbar-inverse-toggle-border-color:        transparent !default;