Enhanced look and feel of the GUI navigation pane to be consistent with the mast-head look and feel. Also enabled the dynamic content generation in web.xml by default; accessible via onos/ui/main.html URL.

Change-Id: I9f3ad321ff3eadc4092bd131f30568ec7c7b6f9d
diff --git a/web/gui/src/main/webapp/WEB-INF/web.xml b/web/gui/src/main/webapp/WEB-INF/web.xml
index f087094..511ceac 100644
--- a/web/gui/src/main/webapp/WEB-INF/web.xml
+++ b/web/gui/src/main/webapp/WEB-INF/web.xml
@@ -50,6 +50,7 @@
     -->
 
     <!--
+    -->
     <servlet>
         <servlet-name>Index Page</servlet-name>
         <servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>
@@ -125,7 +126,6 @@
         <servlet-name>View Module</servlet-name>
         <url-pattern>/app/view/*</url-pattern>
     </servlet-mapping>
-    -->
 
     <servlet>
         <servlet-name>JAX-RS Service</servlet-name>
diff --git a/web/gui/src/main/webapp/app/fw/nav/nav.css b/web/gui/src/main/webapp/app/fw/nav/nav.css
index 4e9ff56..8bdb32e 100644
--- a/web/gui/src/main/webapp/app/fw/nav/nav.css
+++ b/web/gui/src/main/webapp/app/fw/nav/nav.css
@@ -20,50 +20,45 @@
 
 #nav {
     position: absolute;
-    top: 50px;
-    left: 8px;
-    width: 160px;
-    height: 100px;
-    padding: 4px;
+    top: 45px;
+    left: 1px;
+    Xwidth: 200px;
+    padding: 0px;
     z-index: 3000;
     visibility: hidden;
 }
 
 .light #nav {
-    background-color: #ccf;
+    background-color: #bbb;
     box-shadow: 0 2px 8px #777;
 }
 .dark #nav {
     background-color: #444;
-    box-shadow: 0 2px 8px #777;
+    box-shadow: 0 2px 8px #555;
 }
 
-#nav ul li {
-    font-size: 10pt;
+#nav a {
+    text-decoration: none;
+    font-size: 14pt;
+    display: block;
+    padding: 8px 16px 6px 16px;
 }
 
-
-#nav h2 {
-    font-size: 12pt;
-    margin: 0;
-}
-#nav h3 {
-    font-size: 8pt;
-    font-style: italic;
-    margin: 0;
-}
-
-.light #nav h2,
-.light #nav h3 {
-    color: black;
-}
-
-.dark #nav h2,
-.dark #nav h3 {
-    color: #ddd;
+.light #nav a {
+    color: #369;
+    border-bottom: solid #ccc 1px;
 }
 
 .dark #nav a {
-    color: #ddd;
+    color: #eee;
+    border-bottom: solid #333 1px;
+}
+
+.light #nav a:hover {
+    background-color: #ddd;
+}
+
+.dark #nav a:hover {
+    background-color: #999;
 }
 
diff --git a/web/gui/src/main/webapp/nav.html b/web/gui/src/main/webapp/nav.html
index f39ffee..0c54515 100644
--- a/web/gui/src/main/webapp/nav.html
+++ b/web/gui/src/main/webapp/nav.html
@@ -1,11 +1,5 @@
-<!-- Navigation partial HTML -->
-<h2>Navigation</h2>
-<h3>(Note - this is temporary)</h3>
-
-<ul>
-    <!-- {INJECTED-VIEW-NAV-START} -->
-    <li> <a ng-click="navCtrl.hideNav()" href="#/sample">Sample View</a></li>
-    <li> <a ng-click="navCtrl.hideNav()" href="#/topo">Topology View</a></li>
-    <li> <a ng-click="navCtrl.hideNav()" href="#/device">Device View</a></li>
-    <!-- {INJECTED-VIEW-NAV-END} -->
-</ul>
+<!-- {INJECTED-VIEW-NAV-START} -->
+<a ng-click="navCtrl.hideNav()" href="#/sample">Sample</a>
+<a ng-click="navCtrl.hideNav()" href="#/topo">Network Topology</a>
+<a ng-click="navCtrl.hideNav()" href="#/device">Device List</a>
+<!-- {INJECTED-VIEW-NAV-END} -->