@@ -27,7 +27,11 @@ const TEMPLATE = `
</div>
<div class="hue-app-switcher" data-bind="css: { 'open': open }">
- <h3>Cloudera Data Platform</h3>
+ <div class="app-switcher-header">
+ <svg class="show"><use xlink:href="#hi-cdp-logo"></use></svg>
+ <button class="close" data-bind="toggle: open">×</button>
+ </div>
+
<ul data-bind="foreach: links">
<li><a data-bind="attr: { href: url }"><i data-bind="html: svg"></i><span data-bind="text: label"></span></a></li>
</ul>
@@ -32,6 +32,26 @@
background: @cui-white;
opacity: 0;
+ .app-switcher-header {
+ height: 55px;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid @cui-default-border-color;
+ svg {
+ margin-top: 12px;
+ margin-left: 24px;
+ height: 32px;
+ width: 106px;
+ }
+ .close {
+ position: absolute;
+ top: 19px;
+ right: 19px;
&.open {
left: 0;
box-shadow: -2px 2px 4px 0 rgba(27, 35, 41, 0.2);
@@ -51,7 +71,7 @@
ul {
list-style: none;
- padding: 24px 0 24px 24px;
+ padding: 16px 0 24px 24px;
margin: 0;
li a {
@@ -212,8 +212,13 @@
svg {
transition-delay: @animation-duration-base;
+ fill: @cui-gray-500;
width: 24px;
height: 24px;
+ &:hover {
+ fill: @cui-white;
}