Some nice navbar styling

public/css/panel.css

@@ -40,13 +40,63 @@ body {
 }
 
 .button {
+    position: relative;
+    width: 120px;
+    height: 40px;
     cursor: pointer;
+    margin: 10px 0 40px 0;
+    padding: 15px;
+    transition-property: opacity, filter;
+    transition-duration: .15s;
+    text-transform: none;
 }
 
-.button:before {
+.button-inner {
-    content: '\f0c9';
+    left: 0;
-    font: 42px fontawesome;
+    top: 50%;
-    color: #eeeeee;
+    display: inline-block;
+    margin-top: -2px;
+}
+
+.button-inner,
+.button-inner::after,
+.button-inner::before {
+    background-color: #fff;
+    position: absolute;
+    width: 40px;
+    height: 4px;
+    transition: transform 0.15s ease;
+    border-radius: 4px;
+}
+
+.button-inner::before,
+.button-inner::after {
+    content: "";
+    display: block;
+}
+
+.button-inner::before {
+    top: -10px;
+}
+
+.button-inner::after {
+    bottom: -10px;
+}
+
+.button.isOpen .button-inner::before {
+    transform: translate3d(-8px, 0, 0) rotate(-45deg) scale(0.7, 1);
+}
+
+.button.isOpen .button-inner::after {
+    transform: translate3d(-8px, 0, 0) rotate(45deg) scale(0.7, 1);
+}
+
+.button-label {
+    position: absolute;
+    top: 6px;
+    left: 50px;
+    font-size: 24px;
+    color: #fff;
 }
 
 .sidebar-title {
@@ -107,6 +157,7 @@ body {
 .keys {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .key {
@@ -114,25 +165,27 @@ body {
     border: 3px solid #2a9fd6;
     border-radius: 5px;
     box-shadow: 5px 5px 10px #000;
-    margin: 10px;
+    margin: 20px;
     width: 300px;
     height: 100px;
-}
-
-.add-key {
     cursor: pointer;
     display: flex;
     justify-content: flex-start;
     flex-direction: row;
+    transition: box-shadow 0.2s;
 }
 
-.add-key i {
+.key:hover {
+    box-shadow: 0 0 10px #eee;
+}
+
+.key i {
     font-size: 48px;
     margin: auto 0 auto 20px;
 }
 
-.add-key span {
+.key span {
-    font-size: 36px;
+    font-size: 16px;
     vertical-align: center;
     margin: auto;
     -moz-user-select: none;

public/views/panel.html

@@ -30,8 +30,11 @@
                 <li><a ui-sref="" ng-click="logout()">Logout</a></li>
             </ul>
         </div>
-        <div class="content isOpen" ng-class="{isOpen: open}">
+        <div class="content" ng-class="{isOpen: open}">
-            <a class="button" ng-init="open = true" ng-click="open = !open"></a>
+            <div class="button" ng-class="{isOpen: open}" ng-init="open = false" ng-click="open = !open">
+                <div class="button-inner"></div>
+                <span class="button-label">Menu</span>
+            </div>
             <div class="view" ui-view></div>
         </div>
     </div>