Design showing opened service switcher

app/assets/stylesheets/components/navigation.scss

@@ -1,6 +1,6 @@
 .navigation {
 
-  padding: $gutter-half 0 0 0;
+  padding: 3px 0 0 0;
 
   li {
     @include core-16();

app/assets/stylesheets/components/switcher.scss

@@ -29,15 +29,39 @@
 }
 
 #user-name {
-
   margin: 0 20px 0 0;
 }
 
 #user-admin {
-
 }
 @media (min-width: 641px) {
   #user-admin {
   display: block;
   float: right;
-  } }
+  } }
+
+
+#service-nav {
+  // display: none;
+  @include core-19();
+  list-style: none;
+  ul li {
+   display: block;position: relative;float: left;
+  }
+
+}
+
+#service-arrow-right {
+  display:none;
+}
+
+
+
+
+
+
+
+
+
+
+

app/templates/admin_template.html

@@ -47,7 +47,22 @@
 
 {% block content %}
 {% if current_user.is_authenticated() %}
-    <nav id="user-bar"><span id="service-switcher">Service name</span> <div id="user-admin"><span id="user-name"><a href="{{ url_for('.userprofile') }}">User name</a></span> <span id="sign-out"><a href="{{ url_for('main.sign_out')}}">Sign out</a></span></div></nav>    
+    <nav id="user-bar">
+      <span id="service-switcher">
+        <a id="toggle-service-switcher" href="#"><span id="service-arrow-right">&blacktriangleright;</span><span id="service-arrow-down">&blacktriangledown;</span> Service name goes here</a>
+          
+        </ul>
+      </span> 
+      <div id="user-admin">
+        <span id="user-name"><a href="{{ url_for('.userprofile') }}">Ms. User Name</a></span>
+        <span id="sign-out"><a href="{{ url_for('main.sign_out')}}">Sign out</a></span>
+      </div>
+      <ul id="service-nav">
+            <li><a href="#">Switch to A N Other service</a></li>
+            <li><a href="#">Add a new service to Notify</a></li>
+          </ul>
+    </nav>    
+
 {% endif %}
 <main id="content" role="main" class="page-container">
     {% with messages = get_flashed_messages() %}