Merge pull request #245 from joefiorini/navigation-refresh

Navigation refresh
2024-11-01 08:21:15 +03:00 · 2015-05-29 08:58:17 -04:00 · 2015-05-29 08:58:17 -04:00 · d9441a7696
commit d9441a7696
parent 10da862ab1 0a8be8243f
88 changed files with 1261 additions and 415 deletions
--- a/awx/ui/static/fonts/merriweather-bold-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-bold-webfont.woff
--- a/awx/ui/static/fonts/merriweather-bold-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-bold-webfont.woff2
--- a/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff
--- a/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-bolditalic-webfont.woff2
--- a/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff
--- a/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-heavyitalic-webfont.woff2
--- a/awx/ui/static/fonts/merriweather-italic-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-italic-webfont.woff
--- a/awx/ui/static/fonts/merriweather-italic-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-italic-webfont.woff2
--- a/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff
--- a/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-lightitalic-webfont.woff2
--- a/awx/ui/static/fonts/merriweather-regular-webfont.woff
+++ b/awx/ui/static/fonts/merriweather-regular-webfont.woff
--- a/awx/ui/static/fonts/merriweather-regular-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather-regular-webfont.woff2
--- a/awx/ui/static/fonts/merriweather_light-webfont.woff
+++ b/awx/ui/static/fonts/merriweather_light-webfont.woff
--- a/awx/ui/static/fonts/merriweather_light-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather_light-webfont.woff2
--- a/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff
+++ b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff
--- a/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff2
+++ b/awx/ui/static/fonts/merriweather_ultrabold-webfont.woff2
--- a/awx/ui/static/fonts/ubuntu-r-webfont.woff
+++ b/awx/ui/static/fonts/ubuntu-r-webfont.woff
--- a/awx/ui/static/fonts/ubuntu.woff2
+++ b/awx/ui/static/fonts/ubuntu.woff2
--- a/awx/ui/static/img/CloudSync.svg
+++ b/awx/ui/static/img/CloudSync.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>CloudSync</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="CloudSync" sketch:type="MSArtboardGroup">
+            <path d="M36.5409477,41.6578074 L12.4747864,41.6578074 C6.89348782,41.6461935 3.50985601,33.2876501 3.36842952,27.7211977 C3.26430016,23.6227358 6.26813909,15.5700299 10.0264222,15.5700299 C9.70161873,12.3219956 10.948769,10.0564324 12.3414111,8.65446838 C13.2507957,7.73899662 17.0285665,6.38049299 19.1816026,8.01701681 C21.2839677,1.96620547 25.6993475,5.24541679e-16 30.8987811,0 C35.2156363,0 43.5,7 43.7135366,15.5615059 C43.7181702,15.7472848 43.6975201,15.9215349 43.6941483,16.1073564 C48,14.5 51.7748589,24.4637093 51.9373048,28.8825819 C51.9508956,29.2522799 51.9403411,29.6492134 51.9066002,30.0662646 L35.1799171,30.0662646 C37.1702823,28.1641294 38.4094561,25.4893251 38.4094561,22.5269709 L36.0752456,22.5269709 C36.0752456,25.9348632 33.9567709,28.8595257 30.9621356,30.0662646 L29.3683589,30.0662646 L29.3683589,30.5260875 C28.8936038,30.6118601 28.4047036,30.6566599 27.905509,30.6566599 C23.4004827,30.6566599 19.7357723,27.0099137 19.7357723,22.5269709 C19.7357723,18.0440282 23.4004827,14.397282 27.905509,14.397282 L27.905509,18.6944033 L36.689143,13.6423823 L27.905509,8.59036132 L27.905509,12.0745137 C22.1038288,12.0745137 17.4015618,16.7548918 17.4015618,22.5269709 C17.4015618,28.2990501 22.1038288,32.9794281 27.905509,32.9794281 C28.4019007,32.9794281 28.890272,32.9451378 29.3683589,32.8788075 L29.3683589,41.6578074 L36.5409477,41.6578074 Z" id="CloudSync-cloud" fill="#242424" sketch:type="MSShapeGroup"></path>
+            <g id="CloudSync-server" sketch:type="MSLayerGroup" transform="translate(29.891633, 31.140060)">
+                <path d="M20.4481279,7.51656615 C21.0411686,7.51656615 21.5219231,7.03581168 21.5219231,6.44277099 C21.5219231,5.84973029 21.0411686,5.36897582 20.4481279,5.36897582 C19.8550872,5.36897582 19.3743328,5.84973029 19.3743328,6.44277099 C19.3743328,7.03581168 19.8550872,7.51656615 20.4481279,7.51656615 Z M0.0460197928,0.241603912 L23.6695134,0.241603912 L23.6695134,9.58362184 L0.0460197928,9.58362184 L0.0460197928,0.241603912 Z M1.07379516,1.07379516 L22.5496985,1.07379516 L22.5496985,8.59036132 L1.07379516,8.59036132 L1.07379516,1.07379516 Z" id="CloudSync-server-enclosure" fill="#242424" sketch:type="MSShapeGroup"></path>
+                <rect id="CloudSync-server-light3" fill="#27AB45" sketch:type="MSShapeGroup" x="2.14759033" y="2.14759033" width="2.14759033" height="2.14759033"></rect>
+                <rect id="CloudSync-server-light2" fill="#E54242" sketch:type="MSShapeGroup" x="5.36897582" y="2.14759033" width="2.14759033" height="2.14759033"></rect>
+                <rect id="CloudSync-server-light1" fill="#27AB45" sketch:type="MSShapeGroup" x="8.59036132" y="2.14759033" width="2.14759033" height="2.14759033"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Credentials.svg
+++ b/awx/ui/static/img/Credentials.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Credentials</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Credentials">
+        <path d="M18.425,10.5 C18.425,5.60538462 22.4972,1.61538462 27.50165,1.61538462 C32.505275,1.61538462 36.575,5.60538462 36.575,10.5 L36.575,20.1923077 L18.425,20.1923077 L18.425,10.5 L18.425,10.5 Z M38.225,20.1923077 L38.225,10.5 C38.225,4.70076923 33.4235,0 27.50165,0 C21.57815,0 16.775,4.70076923 16.775,10.5 L16.775,20.1923077 L11,20.1923077 L11,42 L44,42 L44,20.1923077 L38.225,20.1923077 L38.225,20.1923077 Z"></path>
+    </g>
+</svg>
--- a/awx/ui/static/img/InventoryScripts.svg
+++ b/awx/ui/static/img/InventoryScripts.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>InventoryScripts</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="InventoryScripts" sketch:type="MSArtboardGroup" fill="#FFFFFF">
+            <path d="M18.069332,19.643368 C15.4291803,19.643368 13.289335,17.5029916 13.289335,14.863371 C13.289335,12.2237504 15.4291803,10.0833739 18.069332,10.0833739 L18.069332,8.49004158 L22.0664718,10.8003735 L18.069332,13.1107054 L18.069332,11.1455955 C16.0192444,11.1455955 14.3515566,12.8132834 14.3515566,14.863371 C14.3515566,16.9134586 16.0192444,18.5811465 18.069332,18.5811465 C20.1188886,18.5811465 21.7871075,16.9134586 21.7871075,14.863371 L22.8493291,14.863371 C22.8493291,17.5029916 20.7084215,19.643368 18.069332,19.643368 L18.069332,19.643368 Z M23.1386641,23.3611435 L8.50668238,23.3611435 C4.99019788,23.3611435 2.13866408,20.5090786 2.13866408,16.9878141 C2.13866408,14.1941714 3.9423163,11.8254173 6.44650364,10.9650178 C6.78641455,8.95741907 8.52845792,7.42782001 10.6311255,7.42782001 C11.3162584,7.42782001 11.961558,7.59246435 12.5346266,7.88457528 C13.859748,5.11217699 16.6799462,3.19486706 19.9558375,3.19486706 C24.502677,3.19486706 28.1880547,6.8807759 28.1880547,11.4270842 C28.1880547,11.5120619 28.1779636,11.5970397 28.1758391,11.6767063 C29.6866205,11.6816924 31.0623568,12.2600933 32.0969473,13.2053689 L23.1386641,13.2053689 L23.1386641,23.3611435 Z" id="Fill-87" sketch:type="MSShapeGroup"></path>
+            <path d="M35.6964491,18.9938144 L33.022193,16 L34.2563702,16 L36.9528193,18.9938144 L34.2563702,22 L33,22 L35.6964491,18.9938144 Z" id="&gt;" sketch:type="MSShapeGroup"></path>
+            <path d="M26.6964491,18.9938144 L24.022193,16 L25.2563702,16 L27.9528193,18.9938144 L25.2563702,22 L24,22 L26.6964491,18.9938144 Z" id="&gt;-2" sketch:type="MSShapeGroup" transform="translate(25.976410, 19.000000) scale(-1, -1) translate(-25.976410, -19.000000) "></path>
+            <path d="M32.4528193,15 L29.9528193,23 L28.9528193,23 L31.4528193,15 L32.4528193,15 Z" id="⁄" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/JobTemplates.svg
+++ b/awx/ui/static/img/JobTemplates.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>JobTemplates</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="JobTemplates" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M40.2101242,8.2287313 C40.2101242,9.59161492 39.1043885,10.6973507 37.7415048,10.6973507 C36.3786212,10.6973507 35.2728854,9.59161492 35.2728854,8.2287313 C35.2728854,6.86584768 36.3786212,5.76011191 37.7415048,5.76011191 C39.1043885,5.76011191 40.2101242,6.86584768 40.2101242,8.2287313 L40.2101242,8.2287313 Z M30.4233577,36.7724078 L21.6954788,41.8636705 C21.5669049,41.9408148 21.438331,41.9665296 21.2840422,41.9665296 C21.078324,41.9665296 20.8726057,41.8893853 20.6926022,41.7350966 L19.0468559,40.0893503 C18.8411376,39.8579172 18.7639933,39.5493398 18.8411376,39.2664772 L21.0268944,32.1691964 L13.8010397,24.9433417 L6.70375897,27.1290985 C6.62661462,27.1548133 6.54947026,27.1548133 6.47232591,27.1548133 C6.26660762,27.1548133 6.03517456,27.0776689 5.88088584,26.9233802 L4.23513958,25.277634 C3.97799173,24.9947713 3.92656216,24.5833348 4.10656566,24.2747573 L9.86667757,14.4002798 C10.0209663,14.1688467 10.2781141,14.014558 10.535262,13.9888432 L20.2811656,13.4745475 C21.8240527,11.6487977 23.3412251,9.95162191 24.8069678,8.46016437 C31.2356642,2.05718282 36.1471881,0 45.0959334,0 C45.5587996,0 45.9702361,0.360006994 45.9702361,0.82287313 C45.9702361,9.36018185 43.6044759,15.0431494 37.5100718,21.1632683 C36.2836771,22.3685182 34.9181875,23.6085419 33.4564934,24.8690424 L30.4233577,24.8690425 L30.4233577,36.7724078 Z" id="Type-something-2" sketch:type="MSShapeGroup"></path>
+            <g id="Fill-78-+-Fill-79" sketch:type="MSLayerGroup" transform="translate(31.977673, 26.613090)">
+                <path d="M5.54883514,0 L5.54883514,4.66294547 L9.95555917,4.66294547 L5.54883514,0" id="Fill-78" sketch:type="MSShapeGroup"></path>
+                <path d="M5.000198,5.24901943 L5.000198,0 L0.591270607,0 L0.591270607,13.9888364 L10.2309794,13.9888364 L10.2309794,5.24901943 L5.000198,5.24901943" id="Fill-79" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Jobs.svg
+++ b/awx/ui/static/img/Jobs.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Jobs</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Jobs" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M41.8479074,8.1469495 C41.8479074,9.49629019 40.7531593,10.5910383 39.4038186,10.5910383 C38.054478,10.5910383 36.9597298,9.49629019 36.9597298,8.1469495 C36.9597298,6.79760882 38.054478,5.70286072 39.4038186,5.70286072 C40.7531593,5.70286072 41.8479074,6.79760882 41.8479074,8.1469495 L41.8479074,8.1469495 Z M30.6195217,37.3046624 L23.5172415,41.4476592 C23.3899452,41.524037 23.262649,41.5494962 23.1098934,41.5494962 C22.9062193,41.5494962 22.7025453,41.4731185 22.5243305,41.3203629 L20.8949379,39.6909704 C20.6912639,39.4618371 20.6148861,39.156326 20.6912639,38.8762741 L22.8553008,31.8495189 L15.7012493,24.6954673 L8.67449402,26.8595043 C8.59811624,26.8849635 8.52173847,26.8849635 8.44536069,26.8849635 C8.24168663,26.8849635 8.01255331,26.8085857 7.85979776,26.6558302 L6.23040523,25.0264377 C5.97581265,24.7463858 5.92489414,24.3390377 6.10310894,24.0335266 L11.8059828,14.2571715 C11.9587383,14.0280381 12.2133309,13.8752826 12.4679235,13.8498233 L22.1169823,13.3406382 C23.6445378,11.5330308 25.1466341,9.8527198 26.5978118,8.37608283 C32.9626263,2.03672754 37.8253446,-1.31130219e-05 46.6851665,-1.31130219e-05 C47.1434331,-1.31130219e-05 47.5507812,0.356416501 47.5507812,0.814683149 C47.5507812,8.82507352 45.4471323,14.2973656 40.0913338,20.0052965 L30.6195217,20.0052965 L30.6195217,37.3046624 Z" id="Type-something-2" sketch:type="MSShapeGroup"></path>
+            <path d="M46.9892814,25.2044452 L38.409143,37.8832324 L33.3601481,32.2246949 L35.634673,29.9711887 L38.262012,33.0399206 L44.6517004,23.1190887 L46.9892814,25.2044452 Z" id="✓" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/ManagementJobs.svg
+++ b/awx/ui/static/img/ManagementJobs.svg
@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>MaintenanceJobs</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="MaintenanceJobs" sketch:type="MSArtboardGroup" fill="#FFFFFF">
+            <path d="M22.7780898,23.3397977 L22.7780898,22.3006685 L22.0506329,22.1134422 C21.9919203,21.8918136 21.9063401,21.6817396 21.7977523,21.4867754 L22.1806538,20.8224647 L21.4668592,20.0876761 L20.8235604,20.4849764 C20.634065,20.3734563 20.4298915,20.2855681 20.2144936,20.2253379 L20.0290614,19.4772694 L19.0196215,19.4772694 L18.8377446,20.2261221 C18.6224482,20.2865615 18.4183763,20.3746588 18.2289825,20.486388 L17.5836521,20.0922247 L16.8698575,20.8270133 L17.2558063,21.4892327 C17.1474725,21.6843015 17.0620955,21.8944801 17.0035861,22.1162132 L16.276891,22.3070993 L16.276891,23.3462286 L17.0043479,23.5334548 C17.0630605,23.7550835 17.1486407,23.9651575 17.2572285,24.1601217 L16.874327,24.8244324 L17.5881216,25.559221 L18.2314204,25.1619207 C18.4209158,25.2734408 18.6250893,25.3613289 18.8404872,25.4215592 L19.0259194,26.1696277 L20.0353593,26.1696277 L20.2172362,25.420775 C20.4325326,25.3603355 20.6366045,25.2722383 20.8259983,25.1604567 L21.4712779,25.55462 L22.1850725,24.8198315 L21.7991237,24.1576121 C21.9074575,23.9625433 21.9928345,23.7523647 22.0513439,23.5306315 L22.7780391,23.3397455 L22.7780898,23.3397977 Z M19.5275666,24.6011307 C18.5738427,24.6011307 17.8007261,23.8052754 17.8007261,22.8235008 C17.8007261,21.8417263 18.5738427,21.0458709 19.5275666,21.0458709 C20.4812904,21.0458709 21.2544071,21.8417263 21.2544071,22.8235008 C21.2544071,23.8052754 20.4812904,24.6011307 19.5275666,24.6011307 L19.5275666,24.6011307 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(19.527490, 22.823449) rotate(-16.000000) translate(-19.527490, -22.823449) "></path>
+            <path d="M26.2603822,19.2223114 L26.2603822,18.4196181 L25.6984455,18.2749919 C25.653092,18.1037911 25.5869841,17.9415157 25.5031036,17.7909123 L25.7988824,17.277754 L25.2474995,16.7101539 L24.7505722,17.0170554 C24.6041932,16.9309097 24.4464759,16.863019 24.280088,16.8164931 L24.1368477,16.2386347 L23.3570885,16.2386347 L23.2165945,16.8170989 C23.0502851,16.8637864 22.8926462,16.9318386 22.7463458,17.0181458 L22.2478491,16.7136676 L21.6964662,17.2812677 L21.994599,17.7928105 C21.9109147,17.9434947 21.8449637,18.1058508 21.7997671,18.2771324 L21.2384189,18.4245857 L21.2384189,19.227279 L21.8003556,19.3719051 C21.8457091,19.543106 21.911817,19.7053813 21.9956975,19.8559848 L21.6999187,20.3691431 L22.2513016,20.9367432 L22.7482289,20.6298417 C22.8946079,20.7159873 23.0523252,20.783878 23.2187131,20.830404 L23.3619534,21.4082624 L24.1417126,21.4082624 L24.2822066,20.8297982 C24.448516,20.7831107 24.6061549,20.7150584 24.7524554,20.6287109 L25.2509128,20.9331891 L25.8022957,20.365589 L25.5041629,19.8540462 C25.5878472,19.703362 25.6537982,19.5410059 25.6989948,19.3697242 L26.260343,19.222271 L26.2603822,19.2223114 Z M23.7494594,20.1966498 C23.012739,20.1966498 22.4155317,19.5818776 22.4155317,18.8234889 C22.4155317,18.0651002 23.012739,17.450328 23.7494594,17.450328 C24.4861798,17.450328 25.0833871,18.0651002 25.0833871,18.8234889 C25.0833871,19.5818776 24.4861798,20.1966498 23.7494594,20.1966498 L23.7494594,20.1966498 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(23.749401, 18.823449) rotate(-3.000000) translate(-23.749401, -18.823449) "></path>
+            <path d="M24.2941158,6.29410711 C24.2941158,7.17094577 23.5827184,7.88234317 22.7058798,7.88234317 C21.8290411,7.88234317 21.1176437,7.17094577 21.1176437,6.29410711 C21.1176437,5.41726844 21.8290411,4.70587104 22.7058798,4.70587104 C23.5827184,4.70587104 24.2941158,5.41726844 24.2941158,6.29410711 L24.2941158,6.29410711 Z M14.4988011,26.6992243 L12.3823454,27.9338235 C12.2996247,27.9834559 12.2169041,28 12.1176393,28 C11.9852863,28 11.8529333,27.9503676 11.7371245,27.8511029 L10.6783004,26.7922788 C10.5459474,26.6433817 10.496315,26.4448522 10.5459474,26.2628668 L11.9521981,21.6966881 L7.30329877,17.0477888 L2.73712008,18.4540395 C2.68748771,18.4705836 2.63785533,18.4705836 2.58822295,18.4705836 C2.45586995,18.4705836 2.30697282,18.4209512 2.20770806,18.3216865 L1.14888402,17.2628624 C0.983442761,17.080877 0.95035451,16.816171 1.06616339,16.6176415 L4.77204754,10.2646973 C4.8713123,10.1158001 5.03675355,10.0165354 5.20219481,9.99999126 L11.4724184,9.66910874 C12.465066,8.49447582 13.4411694,7.40256353 14.3841846,6.44300424 C18.520216,2.32351694 21.680144,0.999986887 27.4374997,0.999986887 C27.735294,0.999986887 28,1.23160465 28,1.52939891 C28,7.02204864 26.4779404,10.6783004 22.5569827,14.6158023 C22.4272714,14.7432772 22.2951416,14.8713567 22.160716,14.9999999 L14.4988011,15 L14.4988011,26.6992243 Z" id="Type-something-2" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Organizations.svg
+++ b/awx/ui/static/img/Organizations.svg
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Organizations</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Organizations" sketch:type="MSArtboardGroup" fill="#FFFFFF">
+            <g id="Organizations-back" sketch:type="MSLayerGroup" transform="translate(10.006000, 0.000000)">
+                <path d="M7.38461538,4.10869565 L9.22707692,4.10869565 L9.22707692,6.45652174 L7.38461538,6.45652174 L7.38461538,4.10869565 Z M11.0732308,4.10869565 L13.5347692,4.10869565 L13.5347692,6.45652174 L11.0732308,6.45652174 L11.0732308,4.10869565 Z M11.0732308,8.80434783 L13.5347692,8.80434783 L13.5347692,11.1521739 L11.0732308,11.1521739 L11.0732308,8.80434783 Z M7.38461538,13.5 L9.22707692,13.5 L9.22707692,15.8478261 L7.38461538,15.8478261 L7.38461538,13.5 Z M11.0732308,13.5 L13.5347692,13.5 L13.5347692,15.8478261 L11.0732308,15.8478261 L11.0732308,13.5 Z M7.38461538,8.80434783 L9.22707692,8.80434783 L9.22707692,11.1521739 L7.38461538,11.1521739 L7.38461538,8.80434783 Z M8.61169231,22.3494391 L11.0769231,22.3494391 L11.0769231,27 L8.61169231,27 L8.61169231,22.3494391 Z M7.38092308,1.76086957 L0,1.76086957 L0,0 L16,0 L16,27 L7.38092308,27 L7.38092308,1.76086957 Z" sketch:type="MSShapeGroup"></path>
+            </g>
+            <g id="Organizations-front" sketch:type="MSLayerGroup" transform="translate(0.006000, 3.000000)">
+                <path d="M2.45784615,4.10869565 L4.91938462,4.10869565 L4.91938462,6.45652174 L2.45784615,6.45652174 L2.45784615,4.10869565 Z M6.76553846,4.10869565 L9.22707692,4.10869565 L9.22707692,6.45652174 L6.76553846,6.45652174 L6.76553846,4.10869565 Z M11.0732308,4.10869565 L13.5347692,4.10869565 L13.5347692,6.45652174 L11.0732308,6.45652174 L11.0732308,4.10869565 Z M11.0732308,8.80434783 L13.5347692,8.80434783 L13.5347692,11.1521739 L11.0732308,11.1521739 L11.0732308,8.80434783 Z M2.45784615,13.5 L4.91938462,13.5 L4.91938462,15.8478261 L2.45784615,15.8478261 L2.45784615,13.5 Z M6.76553846,13.5 L9.22707692,13.5 L9.22707692,15.8478261 L6.76553846,15.8478261 L6.76553846,13.5 Z M11.0732308,13.5 L13.5347692,13.5 L13.5347692,15.8478261 L11.0732308,15.8478261 L11.0732308,13.5 Z M2.45784615,8.80434783 L4.91938462,8.80434783 L4.91938462,11.1521739 L2.45784615,11.1521739 L2.45784615,8.80434783 Z M6.76553846,8.80434783 L9.22707692,8.80434783 L9.22707692,11.1521739 L6.76553846,11.1521739 L6.76553846,8.80434783 Z M8.61169231,22.3494391 L11.0769231,22.3494391 L11.0769231,27 L8.61169231,27 L8.61169231,22.3494391 Z M4.91938462,22.3494391 L7.38461538,22.3494391 L7.38461538,27 L4.91938462,27 L4.91938462,22.3494391 Z M0,0 L16,0 L16,27 L0,27 L0,0 Z" sketch:type="MSShapeGroup"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/PortalMode--exit.svg
+++ b/awx/ui/static/img/PortalMode--exit.svg
@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>PortalMode</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="PortalMode--exit" sketch:type="MSArtboardGroup" fill="#000000">
+            <g id="PortalMode--exit-arrow" sketch:type="MSLayerGroup" transform="translate(2.000000, 8.000000)">
+                <path d="M11,8.25000041 L32.5589445,8.25 L32.5589445,13.451166 L11,13.4511664 L11,8.25000041 Z" id="Signout-arrow-line" sketch:type="MSShapeGroup"></path>
+                <path d="M0.66,10.56 L11.22,0.66 L11.22,20.46 L0.66,10.56 L0.66,10.56 Z" id="Signout-arrowhead" sketch:type="MSShapeGroup"></path>
+            </g>
+            <path d="M7,8 L38,8 L38,31 L7,31 L7,8 Z M59,36 L59,0 L7,0 L7,36 L32,36 L32,44 L25,44 L25,46 L41,46 L41,44 L34,44 L34,36 L59,36" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/PortalMode.svg
+++ b/awx/ui/static/img/PortalMode.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>PortalMode</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="PortalMode" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M51,32.8695652 L51,0 L3,0 L3,32.8695652 L26.0769231,32.8695652 L26.0769231,40.173913 L19.6153846,40.173913 L19.6153846,42 L34.3846154,42 L34.3846154,40.173913 L27.9230769,40.173913 L27.9230769,32.8695652 L51,32.8695652" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Projects.svg
+++ b/awx/ui/static/img/Projects.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="48px" viewBox="0 0 50 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Projects</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Projects" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M11,5 L37.0087557,5 C38.1084896,5 39,5.89811611 39,7.00199958 L39,45.9980004 C39,47.1036743 38.1001025,48 37.0087557,48 L11,48 L11,5 Z M29.5,25.5 C31.1568542,25.5 32.5,24.1568542 32.5,22.5 C32.5,20.8431458 31.1568542,19.5 29.5,19.5 C27.8431458,19.5 26.5,20.8431458 26.5,22.5 C26.5,24.1568542 27.8431458,25.5 29.5,25.5 Z M20,21.5 C21.6568542,21.5 23,20.1568542 23,18.5 C23,16.8431458 21.6568542,15.5 20,15.5 C18.3431458,15.5 17,16.8431458 17,18.5 C17,20.1568542 18.3431458,21.5 20,21.5 Z M20,39.5 C21.6568542,39.5 23,38.1568542 23,36.5 C23,34.8431458 21.6568542,33.5 20,33.5 C18.3431458,33.5 17,34.8431458 17,36.5 C17,38.1568542 18.3431458,39.5 20,39.5 Z M21,32.1115082 C21.6818613,32.2662308 22.3049134,32.5757914 22.830236,33.00127 L22.8276367,32.9968262 L25.5143157,32.7615076 C27.1632636,32.6170809 28.5065958,31.1651021 28.5148124,29.5021793 L28.5276962,26.894684 C26.5098107,26.4502486 25,24.6514419 25,22.5 C25,20.0147186 27.0147186,18 29.5,18 C31.9852814,18 34,20.0147186 34,22.5 C34,24.6376647 32.5094641,26.427196 30.5110069,26.8859796 L30.5110069,26.8859796 L30.5064583,28.9993706 C30.5028915,30.6565724 29.3608955,32.707252 27.9492244,33.5837365 L24.4439087,35.7601318 L24.4377001,35.7495172 C24.4786728,35.9935757 24.5,36.2442972 24.5,36.5 C24.5,38.9852814 22.4852814,41 20,41 C17.5147186,41 15.5,38.9852814 15.5,36.5 C15.5,34.3584126 16.9960113,32.5662374 19,32.1115082 L19,22.8884918 C16.9960113,22.4337626 15.5,20.6415874 15.5,18.5 C15.5,16.0147186 17.5147186,14 20,14 C22.4852814,14 24.5,16.0147186 24.5,18.5 C24.5,20.6415874 23.0039887,22.4337626 21,22.8884918 L21,32.1115082 Z" id="Rectangle-26" sketch:type="MSShapeGroup"></path>
+            <path d="M41,5.00526988 C41,3.89778991 40.1050211,3 39.0029953,3 L15,3 L15,1 L41.0087557,1 C42.1084896,1 43,1.89811611 43,3.00199958 L43,41.9980004 C43,43.1036743 42.1052949,44 41,44 L41,44 L41,5.00526988 Z" id="Rectangle-27" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Setup.svg
+++ b/awx/ui/static/img/Setup.svg
@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="28px" height="26px" viewBox="0 0 28 26" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Setup</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Setup" sketch:type="MSArtboardGroup" fill="#000000">
+            <path d="M27.2374467,21.8644068 L21.7059693,16.7312349 L22.4438821,16.0435835 L21.7064908,15.3607748 L19.4948386,17.4140436 L15.8063178,13.9903148 L20.2379662,9.87409201 C20.8282964,10.0677966 21.4452228,10.1646489 22.0783154,10.1646489 C23.5390176,10.1646489 24.9126304,9.63680387 25.9457082,8.6779661 C27.5399127,7.19612591 27.9920472,4.99757869 27.0976865,3.07021792 L26.793656,2.41646489 L24.4166905,4.62469734 L22.5028108,4.64891041 L22.5283639,2.95399516 L24.9517424,0.702179177 L24.2472052,0.421307506 C23.5562268,0.140435835 22.822486,0 22.0668425,0 C20.6056189,0 19.2325275,0.527845036 18.2004927,1.48668281 C16.6881627,2.89104116 16.2021311,4.94430993 16.9176196,6.79418886 L12.4875357,10.905569 L6.21814565,5.08474576 L6.95605839,4.40193705 L2.90144951,0.634382567 L0.686668304,2.68765133 L4.74388465,6.45520581 L5.4807544,5.77239709 L11.7501445,11.5932203 L7.31953908,15.7046005 C6.72764441,15.5108959 6.1081106,15.409201 5.472932,15.409201 C4.01222982,15.409201 2.63913848,15.937046 1.60658214,16.8958838 C0.00924876288,18.377724 -0.442364264,20.5859564 0.456689845,22.5133172 L0.761763311,23.1670702 L3.18462027,20.9152542 L5.00932464,20.8910412 L4.98324998,22.6682809 L2.60628442,24.8765133 L3.31238608,25.157385 C4.00127847,25.433414 4.7318903,25.5738499 5.48492635,25.5738499 C6.94562853,25.5738499 8.31819837,25.0460048 9.35075472,24.0871671 C10.8604773,22.6876513 11.3470303,20.6392252 10.6362352,18.7893462 L15.0689266,14.6731235 L18.7574473,18.0968523 L16.5442306,20.1549637 L17.2816218,20.8377724 L18.0190131,20.1549637 L23.5494474,25.2881356 C24.0422584,25.748184 24.6972538,26 25.393447,26 C26.0896403,26 26.7446357,25.748184 27.2379682,25.2881356 C28.2543582,24.3438257 28.2538367,22.8087167 27.2374467,21.8644068" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Signout.svg
+++ b/awx/ui/static/img/Signout.svg
@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="55px" height="42px" viewBox="0 0 55 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Signout</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Signout" sketch:type="MSArtboardGroup" fill="#242424">
+            <g sketch:type="MSLayerGroup">
+                <path d="M18.3359999,0.00518356419 L18.3359999,4.43876768 L45.0851985,4.43876768 L45.0851985,37.6671922 L18.3281255,37.6671922 L18.3281255,42.1211922 L49.419,42.1211922 L49.419,0 L18.3359999,0.00518356419 Z" id="Signout-entrance" sketch:type="MSShapeGroup"></path>
+                <g id="Signout-arrow" transform="translate(0.000000, 7.962963)" sketch:type="MSShapeGroup">
+                    <path d="M11.75,9.55555603 L36.7387766,9.55555556 L36.7387766,15.5798016 L11.75,15.5798021 L11.75,9.55555603 Z" id="Signout-arrow-line"></path>
+                    <path d="M0.728571429,12.7407407 L12.3857143,0.796296296 L12.3857143,24.6851852 L0.728571429,12.7407407 L0.728571429,12.7407407 Z" id="Signout-arrowhead"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/img/Teams.svg
+++ b/awx/ui/static/img/Teams.svg
--- a/awx/ui/static/img/TowerLogo.svg
+++ b/awx/ui/static/img/TowerLogo.svg
--- a/awx/ui/static/img/User.svg
+++ b/awx/ui/static/img/User.svg
--- a/awx/ui/static/img/Users.svg
+++ b/awx/ui/static/img/Users.svg
@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="54px" height="43px" viewBox="0 0 54 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.1 (9971) - http://www.bohemiancoding.com/sketch -->
+    <title>Users</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Random" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Users" sketch:type="MSArtboardGroup" transform="translate(0.000000, 0.940000)" fill="#000000">
+            <path d="M35.696,32.1 C33.502,31.18 28.291,29.38 25.086,28.44 C24.813,28.35 24.77,28.34 24.77,27.2 C24.77,26.26 25.157,25.31 25.534,24.51 C25.942,23.64 26.426,22.18 26.6,20.87 C27.086,20.3 27.748,19.19 28.174,17.07 C28.547,15.2 28.373,14.52 28.125,13.88 C28.1,13.81 28.073,13.75 28.053,13.68 C27.959,13.24 28.088,10.96 28.409,9.19 C28.629,7.98 28.352,5.4 26.682,3.27 C25.627,1.92 23.61,0.26 19.924,0.03 L17.903,0.04 C14.28,0.26 12.26,1.92 11.205,3.27 C9.536,5.4 9.258,7.98 9.479,9.19 C9.801,10.96 9.928,13.24 9.836,13.67 C9.817,13.75 9.789,13.81 9.762,13.88 C9.516,14.52 9.34,15.2 9.715,17.07 C10.139,19.19 10.801,20.3 11.289,20.87 C11.461,22.18 11.946,23.64 12.356,24.51 C12.655,25.15 12.795,26.02 12.795,27.24 C12.795,28.38 12.752,28.39 12.496,28.47 C9.182,29.45 3.907,31.36 1.94,32.22 C0.381,32.89 0,34.09 0,35.17 L0,40.17 C0,40.88 0.42,42.09 1.94,42.09 L16.707,42.09 L18.801,42.09 L19.166,42.09 L21.291,42.09 L36.061,42.09 C37.578,42.09 38,40.88 38,40.17 L38,35.17 C38,34.09 37.252,32.76 35.696,32.1" id="Users-silhouette" sketch:type="MSShapeGroup"></path>
+            <path d="M49.979,20.03 L44,20.03 L44,26.01 L42,26.01 L42,20.03 L36.021,20.03 L36.021,18.03 L42,18.03 L42,12.05 L44,12.05 L44,18.03 L49.979,18.03 L49.979,20.03 L49.979,20.03 Z M43,8.03 C36.924,8.03 32,12.95 32,19.03 C32,25.11 36.924,30.03 43,30.03 C49.075,30.03 54,25.11 54,19.03 C54,12.95 49.075,8.03 43,8.03 L43,8.03 Z" id="Users-plus" sketch:type="MSShapeGroup"></path>
+        </g>
+    </g>
+</svg>
--- a/awx/ui/static/js/app.js
+++ b/awx/ui/static/js/app.js
@ -38,6 +38,8 @@ import routeExtensions from 'tower/shared/route-extensions/main';
 import breadcrumbs from 'tower/shared/breadcrumbs/main';

 // modules
+import setupMenu from 'tower/setup-menu/main';
+import mainMenu from 'tower/main-menu/main';
 import browserData from 'tower/browser-data/main';

 import {JobDetailController} from 'tower/controllers/JobDetail';
@ -83,6 +85,8 @@ var tower = angular.module('Tower', [
    browserData.name,
    breadcrumbs.name,
    systemTracking.name,
+    setupMenu.name,
+    mainMenu.name,
    'AuthService',
    'Utilities',
    'LicenseHelper',
@ -933,7 +937,7 @@ var tower = angular.module('Tower', [
        LoadConfig, Store, ShowSocketHelp, AboutAnsibleHelp, ConfigureTower, CreateCustomInventory) {


-            var e, html, sock;
+            var sock;

            function activateTab() {
                // Make the correct tab active
@ -981,16 +985,6 @@ var tower = angular.module('Tower', [
                    $rootScope.removeOpenSocket();
                }
                $rootScope.removeOpenSocket = $rootScope.$on('OpenSocket', function() {
-                    html = "<a href=\"\" ng-hide=\"socketStatus === 'ok'\" ng-click=\"socketHelp()\" aw-pop-over=\"{{ socketTip }}\" aw-pop-over-watch=\"socketTip\" data-placement=\"bottom\" data-trigger=\"hover\" " +
-                    "data-popover-title=\"Live Events\" data-container=\"body\" style=\"font-size: 10px;\"><i class=\"fa icon-socket-{{ socketStatus }}\"></i></a>";
-                    e = angular.element(document.getElementById('socket-beacon-div'));
-                    e.empty().append(html);
-                    $compile(e)($rootScope);
-
-                    e = angular.element(document.getElementById('socket-beacon-li'));
-                    e.empty().append(html);
-                    $compile(e)($rootScope);
-
                    // Listen for job changes and issue callbacks to initiate
                    // DOM updates
                    function openSocket() {
--- a/awx/ui/static/js/main-menu/default-menu.directive.js
+++ b/awx/ui/static/js/main-menu/default-menu.directive.js
@ -0,0 +1,14 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/menu-default.partial.html',
+        link: function(scope, element) {
+            var contents = element.contents();
+            contents.unwrap();
+
+            scope.$on('$destroy', function() {
+                contents.remove();
+            });
+        }
+    };
+}
--- a/awx/ui/static/js/main-menu/main-menu.block.less
+++ b/awx/ui/static/js/main-menu/main-menu.block.less
@ -0,0 +1,56 @@
+/** @define MainMenu */
+
+.MainMenu {
+  @menu-breakpoint: 871px;
+
+  display: flex;
+
+  background-color: white;
+  margin: 0;
+
+  @media screen and (max-width: @menu-breakpoint) {
+    position: relative;
+    transition: height 0.5s ease-out;
+    justify-content: flex-start;
+    flex-direction: column;
+    height: 58px;
+    overflow: hidden;
+
+    &.Menu--open {
+        height: 523px !important;
+        // border-bottom: solid thin black;
+    }
+
+    &--portal.Menu--open {
+        height: 290px !important;
+    }
+
+  }
+
+  @media screen and (min-width: (@menu-breakpoint + 1px)) {
+      padding: 0 1rem;
+  }
+
+  &-menuContainer {
+      display: flex;
+  }
+
+  &-toggle {
+    display: flex;
+    @media screen and (min-width: (@menu-breakpoint + 1px)) {
+      display: none;
+    }
+    margin-left: auto;
+  }
+
+  &--fixedTop {
+      width: 100%;
+      z-index: 1040;
+      position: fixed;
+      right: 0;
+      left: 0;
+      top: 0;
+  }
+
+}
+
--- a/awx/ui/static/js/main-menu/main-menu.directive.js
+++ b/awx/ui/static/js/main-menu/main-menu.directive.js
@ -0,0 +1,45 @@
+/* jshint unused: vars */
+
+export default function() {
+    return {
+        restrict: 'E',
+        controllerAs: 'mainMenu',
+        templateUrl: '/static/js/main-menu/main-menu.partial.html',
+        controller: ['$scope', function($scope) {
+            this.open = function() {
+                $scope.isOpen = true;
+            };
+
+            this.close = function() {
+                $scope.isOpen = false;
+            };
+
+            this.toggle = function() {
+                $scope.isOpen = !$scope.isOpen;
+            };
+
+            $scope.isOpen = false;
+        }],
+        scope: {
+            menuStyle: '&menuStyle',
+            currentUser: '='
+        },
+        link: function(scope, element, attrs) {
+            scope.menuStyleClassName = 'blah';
+            scope.$watch(function() {
+                return scope.$eval(scope.menuStyle);
+            }, function(newValue) {
+                scope.menuStyleClassName = 'MainMenu--' + newValue;
+            });
+            scope.$watch('isOpen', function(isOpen) {
+                if (isOpen) {
+                    element.find('.MainMenu').addClass("Menu--open");
+                    element.find('menu-toggle-button').addClass("MenuToggle--open");
+                } else {
+                    element.find('.MainMenu').removeClass("Menu--open");
+                    element.find('menu-toggle-button').removeClass("MenuToggle--open");
+                }
+            });
+        }
+    };
+}
--- a/awx/ui/static/js/main-menu/main-menu.partial.html
+++ b/awx/ui/static/js/main-menu/main-menu.partial.html
@ -0,0 +1,8 @@
+<nav class="MainMenu MainMenu--fixedTop" ng-class="menuStyleClassName" ng-switch="$eval(menuStyle)">
+    <a link-to="dashboard" menu-item class="MenuItem MenuItem--logo">
+        <img id="ansible-brand-logo" alt="Ansible Tower" class="MenuItem-logo" src="/static/img/TowerLogo.svg">
+        <menu-toggle-button width="15" height="15" bar-height="2" class="MainMenu-toggle"></menu-toggle-button>
+    </a>
+    <default-menu ng-switch-when="default" class="MainMenu-menuContainer"></default-menu>
+    <portal-menu ng-switch-when="portal" class="MainMenu-menuContainer"></portal-menu>
+</nav>
--- a/awx/ui/static/js/main-menu/main.js
+++ b/awx/ui/static/js/main-menu/main.js
@ -0,0 +1,19 @@
+import mainMenu from './main-menu.directive';
+import menuItem from './menu-item.directive';
+import menuToggle from './menu-toggle.directive';
+import webSocketStatus from './web-socket-status.directive';
+import defaultMenu from './default-menu.directive';
+import portalMenu from './portal-menu.directive';
+
+import shared from 'tower/shared/main';
+
+export default
+    angular.module('mainMenu',
+                   [    shared.name
+                   ])
+        .directive('menuItem', menuItem)
+        .directive('defaultMenu', defaultMenu)
+        .directive('portalMenu', portalMenu)
+        .directive('menuToggleButton', menuToggle)
+        .directive('webSocketStatus', webSocketStatus)
+        .directive('mainMenu', mainMenu);
--- a/awx/ui/static/js/main-menu/menu-default.partial.html
+++ b/awx/ui/static/js/main-menu/menu-default.partial.html
@ -0,0 +1,40 @@
+<a menu-item link-to="projects" title="Projects" class="MenuItem">
+    Projects
+</a>
+<a menu-item link-to="inventories" title="Inventories" class="MenuItem">
+    Inventories
+</a>
+<a menu-item link-to="jobTemplates" title="Job Templates" class="MenuItem">
+    Job Templates
+</a>
+<a menu-item link-to="jobs" title="Jobs" class="MenuItem">
+    Jobs
+</a>
+<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--right MenuItem--fixed MenuItem-username">
+  <i class="MenuItem-icon MenuItem-icon--labelled">
+    <aw-icon name="User"></aw-icon>
+  </i>
+  <span class="u-truncatedText">
+    {{currentUser.username}}
+  </span>
+</a>
+<a link-to="setup" class="MenuItem MenuItem--fixed">
+  <i class="MenuItem-icon" title="Setup" data-placement="bottom">
+    <aw-icon name="Setup"></aw-icon>
+  </i>
+  <span class="MenuItem-helpTitle">Setup</span>
+</a>
+<a link-to="portal" menu-item class="MenuItem MenuItem--fixed">
+  <i class="MenuItem-icon" title="Portal Mode" data-placement="bottom">
+    <aw-icon name="PortalMode"></aw-icon>
+    <!-- <img src="/static/img/PortalMode.svg" title="Portal Mode" data-placement="bottom" class="MenuItem-icon"> -->
+  </i>
+    <span class="MenuItem-helpTitle">Portal Mode</span>
+</a>
+<a link-to="signOut" class="MenuItem MenuItem--fixed">
+  <i class="MenuItem-icon" title="Sign Out" data-placement="bottom">
+    <aw-icon name="Signout"></aw-icon>
+    <!-- <img src="/static/img/Signout.svg"  title="Sign out" data-placement="bottom" class="MenuItem-icon"> -->
+  </i>
+  <span class="MenuItem-helpTitle" data-placement="bottom">Sign Out</span>
+</a>
--- a/awx/ui/static/js/main-menu/menu-item.block.less
+++ b/awx/ui/static/js/main-menu/menu-item.block.less
@ -0,0 +1,131 @@
+/** @define MenuItem */
+
+@import (reference) "shared/utilities/icons.less";
+@import "shared/branding/colors.less";
+
+.MenuItem {
+  @menu-breakpoint: 870px;
+
+  display: flex;
+  flex: none;
+
+  transition: color 60ms;
+
+  padding: 0 1rem;
+  min-height: 5.8rem;
+  min-width: 9.2rem;
+  margin-right: 2rem;
+  align-items: center;
+
+  &, &:active, &:focus {
+      color: black;
+  }
+
+  &:hover {
+      color: @blue;
+  }
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  @media screen and (max-width: @menu-breakpoint) {
+    flex: 1 1 0;
+    padding: 0 1rem;
+    margin-right: 0;
+    border-bottom: solid thin rgb(202, 202, 202);
+
+    .tooltip, &+.tooltip {
+        display: none !important;
+    }
+
+    &--logo {
+        border: none;
+        display: flex;
+        align-items: stretch;
+    }
+  }
+
+  &--fixed {
+      flex: none;
+      min-width: 0;
+      margin-right: 0;
+      @media screen and (min-width: (@menu-breakpoint + 1px)) {
+          padding: 0 0.75rem;
+      }
+  }
+
+  &-helpTitle {
+    @media screen and (min-width: (@menu-breakpoint + 1px)) {
+      display: none;
+    }
+  }
+
+  &-hoverIcon {
+    width: 28px;
+  }
+
+  &--active {
+      font-weight: bold;
+  }
+
+  &--right {
+    // Push this and all following elements to the right
+    margin-left: auto;
+    @media screen and (max-width: @menu-breakpoint) {
+      margin-left: 0;
+    }
+  }
+
+  &--setup {
+    &:before {
+      .icon(@fa-var-cogs);
+      padding-right: 0.25rem;
+    }
+  }
+
+  &--popup {
+    // Make pseudo button
+    background: transparent;
+    border: 0;
+    padding: 8px 0;
+
+    outline: none;
+
+    &:after {
+        .icon(@fa-var-angle-down);
+    }
+  }
+
+  &-logo {
+    height: 34px;
+    width: auto;
+    align-self: center;
+  }
+
+  &-icon {
+      height: 17px;
+      width: auto;
+      max-width: 18px;
+      flex: none;
+      box-sizing: initial;
+      &--labelled {
+          margin-right: 0.25rem;
+      }
+      @media screen and (max-width: @menu-breakpoint) {
+          display: none;
+        margin-right: 1.4rem;
+      }
+  }
+
+  &-username {
+      padding-right: 0.25rem;
+      @media screen and (max-width: @menu-breakpoint) {
+          order: 1; // moves this to the bottom
+      }
+      @media screen and (min-width: (@menu-breakpoint + 1px)) {
+          max-width: 110px;
+      }
+  }
+
+}
--- a/awx/ui/static/js/main-menu/menu-item.directive.js
+++ b/awx/ui/static/js/main-menu/menu-item.directive.js
@ -0,0 +1,35 @@
+/* jshint unused: vars */
+
+export default ['$route', '$rootScope', function($route, $rootScope) {
+    return {
+        require: '^^mainMenu',
+        link: function(scope, element, attrs, mainMenuController) {
+            var routeName = attrs.linkTo;
+
+            scope.$on('$routeChangeStart', function() {
+                // any time we start a route change,
+                // assume it was from the menu, and
+                // close it in case it's open
+                mainMenuController.close();
+            });
+
+            scope.$on('$routeChangeSuccess', function(e, nextRoute) {
+                if (nextRoute.$$route.name === routeName) {
+                    element.addClass('MenuItem--active');
+                } else {
+                    element.removeClass('MenuItem--active');
+                }
+                return nextRoute.$$route.name;
+            });
+
+            scope.$on('$destroy', function() {
+                element.off('click.menu-item');
+            });
+
+            element.on('click', function(e) {
+                mainMenuController.close();
+            }, true);
+
+        }
+    };
+}];
--- a/awx/ui/static/js/main-menu/menu-portal.partial.html
+++ b/awx/ui/static/js/main-menu/menu-portal.partial.html
@ -0,0 +1,24 @@
+<a href="#portal" title="Portal" class="MenuItem MenuItem--hoverable">
+    Portal
+</a>
+<a link-to="userEdit" model="{ user_id: currentUser }" class="MenuItem MenuItem--right MenuItem--fixed MenuItem-username">
+  <i class="MenuItem-icon MenuItem-icon--labelled">
+    <aw-icon name="User"></aw-icon>
+  </i>
+  <span class="u-truncatedText">
+    {{currentUser.username}}
+  </span>
+</a>
+<a link-to="dashboard" class="MenuItem MenuItem--fixed" title="Portal Mode">
+  <i class="MenuItem-icon" title="Exit Portal Mode" data-placement="bottom">
+    <aw-icon name="PortalMode--exit"></aw-icon>
+  </i>
+  <span class="MenuItem-helpTitle">Exit Portal Mode</span>
+</a>
+<a link-to="signOut" class="MenuItem MenuItem--fixed">
+  <i class="MenuItem-icon" title="Sign Out" data-placement="bottom">
+    <aw-icon name="Signout"></aw-icon>
+    <!-- <img src="/static/img/Signout.svg"  title="Sign out" data-placement="bottom" class="MenuItem-icon"> -->
+  </i>
+  <span class="MenuItem-helpTitle" data-placement="bottom">Sign Out</span>
+</a>
--- a/awx/ui/static/js/main-menu/menu-toggle.block.less
+++ b/awx/ui/static/js/main-menu/menu-toggle.block.less
@ -0,0 +1,34 @@
+/** @define MenuToggle */
+
+.MenuToggle {
+
+    align-self: center;
+    &-icon {
+        // Override settings (on svg tag) from nv.d3.css that really
+        // shouldn't be there, but are, so meh.
+        display: inherit;
+        width: inherit;
+        height: inherit;
+        // border: solid thin white;
+    }
+
+    &-bar {
+        fill: #000;
+        transition: transform 0.25s cubic-bezier(.96,-0.6,.27,1.68), opacity 0.25s;
+        transform: rotate(0deg);
+        transform-origin: center center;
+    }
+
+
+    &--open {
+        .MenuToggle-crossBar1 {
+            transform: rotate(45deg);
+        }
+        .MenuToggle-topBar, .MenuToggle-bottomBar {
+            opacity: 0;
+        }
+        .MenuToggle-crossBar2 {
+            transform: rotate(-45deg);
+        }
+    }
+}
--- a/awx/ui/static/js/main-menu/menu-toggle.directive.js
+++ b/awx/ui/static/js/main-menu/menu-toggle.directive.js
@ -0,0 +1,27 @@
+/* jshint unused: vars */
+
+export default function() {
+    return {
+        templateUrl: '/static/js/main-menu/menu-toggle.partial.html',
+        restrict: 'E',
+        require: '^^mainMenu',
+        scope: {
+            width: '@',
+            height: '@',
+            barHeight: '@'
+        },
+        link: function(scope, element, attrs, mainMenuController) {
+            scope.$on('$destroy', function() {
+                element.off('click');
+            });
+
+            element.on("click", function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                scope.$apply(function() {
+                    mainMenuController.toggle();
+                });
+            });
+        }
+    };
+}
--- a/awx/ui/static/js/main-menu/menu-toggle.partial.html
+++ b/awx/ui/static/js/main-menu/menu-toggle.partial.html
@ -0,0 +1,9 @@
+<button menu-toggle class="MenuToggle Button--pseudo">
+    <svg class="MenuToggle-icon" width="12" height="10">
+        <rect class="MenuToggle-bar MenuToggle-topBar" x="0" y="0" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-crossBar1" x="0" y="4" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-crossBar2" x="0" y="4" width="100%" height="2" />
+        <rect class="MenuToggle-bar MenuToggle-bottomBar" x="0" y="8" width="100%" height="2" />
+    </svg>
+</button>
+
--- a/awx/ui/static/js/main-menu/portal-menu.directive.js
+++ b/awx/ui/static/js/main-menu/portal-menu.directive.js
@ -0,0 +1,15 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/menu-portal.partial.html',
+        link: function(scope, element) {
+            var contents = element.contents();
+            contents.unwrap();
+
+            scope.$on('$destroy', function() {
+                contents.remove();
+            });
+        }
+    };
+}
+
--- a/awx/ui/static/js/main-menu/web-socket-status.directive.js
+++ b/awx/ui/static/js/main-menu/web-socket-status.directive.js
@ -0,0 +1,18 @@
+/* jshint unused: vars */
+
+export default ['$rootScope', function($rootScope) {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/main-menu/web-socket-status.partial.html',
+        link: function(scope, element, attrs) {
+            scope.socketHelp = $rootScope.socketHelp;
+            scope.socketTip = $rootScope.socketTip;
+            $rootScope.$watch('socketStatus', function(newStatus) {
+                scope.socketStatus = newStatus;
+            });
+            $rootScope.$watch('socketTip', function(newTip) {
+                scope.socketTip = newTip;
+            });
+        }
+    };
+}];
--- a/awx/ui/static/js/main-menu/web-socket-status.partial.html
+++ b/awx/ui/static/js/main-menu/web-socket-status.partial.html
@ -0,0 +1,13 @@
+<button
+    ng-click="socketHelp()"
+    aw-pop-over="{{socketTip}}"
+    aw-pop-over-watch="socketTip"
+    data-popover-title="Live Events"
+    data-placement="left"
+    data-trigger="hover"
+    data-container="body"
+    class="Button--pseudo"
+    ng-if="socketStatus !== 'ok'">
+    <i class="fa icon-socket-{{socketStatus}}"></i>
+</button>
+
--- a/awx/ui/static/js/setup-menu/hover-icon.block.less
+++ b/awx/ui/static/js/setup-menu/hover-icon.block.less
@ -0,0 +1,47 @@
+/** @define HoverIcon */
+
+@import 'shared/branding/colors.less';
+
+.HoverIcon {
+  @media screen and (max-width: 571px) {
+    &--onlyLarge {
+        .HoverIcon-icon--opacity {
+          opacity: 1;
+        }
+        .HoverIcon-icon--height {
+          height: 22px;
+        }
+    }
+  }
+  &-icon {
+    width: auto;
+    &--color {
+      g, path {
+          transition: fill 0.15s ease-out;
+      }
+    }
+    &--opacity {
+      transition: opacity 0.3s ease-out;
+      opacity: 0;
+    }
+    &--height {
+      transition: height 0.2s ease-out;
+      height: 0;
+    }
+  }
+  &:hover {
+    .HoverIcon-icon {
+      &--opacity {
+        opacity: 1;
+      }
+      &--height {
+        height: 22px;
+      }
+      &--color {
+        path, g {
+            fill: @blue;
+        }
+      }
+    }
+  }
+}
--- a/awx/ui/static/js/setup-menu/main.js
+++ b/awx/ui/static/js/setup-menu/main.js
@ -0,0 +1,16 @@
+import route from './setup.route';
+import icon from 'tower/shared/icon/main';
+
+export default
+    angular.module('setupMenu',
+                   [    'AboutAnsibleHelpModal',
+                        'ConfigureTowerHelper',
+                        'CreateCustomInventoryHelper',
+                        icon.name
+                   ])
+        .config(['$routeProvider', function($routeProvider) {
+            var url = route.route;
+            delete route.route;
+            $routeProvider.when(url, route);
+        }]);
+
--- a/awx/ui/static/js/setup-menu/setup-extra.block.less
+++ b/awx/ui/static/js/setup-menu/setup-extra.block.less
@ -0,0 +1,14 @@
+/** @define SetupExtra */
+
+.SetupExtra {
+  &-itemTitle {
+    font-size: 1.4rem;
+    font-weight: bold;
+  }
+  &-itemDescription {
+    font-family: merriweather;
+    font-size: 1rem;
+    font-weight: lighter;
+    font-style: italic;
+  }
+}
--- a/awx/ui/static/js/setup-menu/setup-item.block.less
+++ b/awx/ui/static/js/setup-menu/setup-item.block.less
@ -0,0 +1,88 @@
+/** @define SetupItem */
+
+@import 'shared/branding/colors.less';
+
+.SetupItem {
+
+    @icon-small-size: 2.4rem;
+    @icon-large-size: 3.4rem;
+
+    &--aside {
+      padding-bottom: @vertical-basis / 2;
+    }
+
+    @vertical-basis: 1.4rem;
+
+    padding: @vertical-basis 0;
+
+    color: black;
+    flex: 1 0 100%;
+    transition: background-color 0.15s ease-in-out;
+    background-color: white;
+
+    &:hover, &:focus, &:active {
+        color: black;
+    }
+
+    &--hoverable {
+      &:hover {
+        background-color: lighten(@ansible-red, 28%);
+      }
+    }
+
+    &-icon {
+      // height: 28px;
+      &--aside {
+        align-self: flex-start;
+      }
+
+      // For some reason, credentials
+      // icon is taking up more space
+      // than it should; need to adjust
+      // it manually to line it up with
+      // others
+      &--credentials {
+        width: 4.3rem;
+        margin-left: -0.8rem;
+      }
+
+      flex: none; // do not let the flex container adjust this width!
+      width: @icon-large-size;
+      align-self: center;
+    }
+
+    &--noIcon {
+      margin-left: @icon-large-size + 1.4rem; // 1.4rem comes from Media-figure margin
+    }
+
+    &--button {
+      border: 0;
+      text-align: left;
+      outline: none;
+        .SetupItem-icon {
+            // width: 100%;
+        }
+    }
+
+    &-title {
+        &--aside {
+          font-size: 1.4rem;
+          font-weight: bold;
+        }
+        font-size: 2.8rem;
+        padding-bottom: 0.4rem;
+        margin: 0;
+    }
+
+    &-description {
+      &--aside {
+        font-size: 1rem;
+        font-style: italic;
+      }
+      font-family: merriweather;
+      font-weight: lighter;
+      color: black;
+      font-size: 1.4rem;
+      margin: 0;
+    }
+}
--- a/awx/ui/static/js/setup-menu/setup-menu.block.less
+++ b/awx/ui/static/js/setup-menu/setup-menu.block.less
@ -0,0 +1,12 @@
+/** @define SetupMenu */
+
+@import "shared/branding/colors.less";
+
+.SetupMenu {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    margin-left: -1rem;
+}
--- a/awx/ui/static/js/setup-menu/setup-menu.partial.html
+++ b/awx/ui/static/js/setup-menu/setup-menu.partial.html
@ -0,0 +1,80 @@
+<section id="htmlTemplate" class="Container">
+  <nav class="SetupMenu Container-main">
+      <a link-to="credentials" class="SetupItem HoverIcon Media">
+        <i class="SetupItem-icon SetupItem-icon--credentials HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Credentials"></aw-icon>
+        </i>
+        <div class="Media-body">
+          <h4 class="SetupItem-title">Credentials</h4>
+          <p class="SetupItem-description">
+            Add passwords, SSH keys, etc. for Tower to use when launching jobs against machines, or when syncing inventories or projects.
+          </p>
+        </div>
+      </a>
+      <a link-to="users" class="SetupItem HoverIcon Media">
+        <i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Users"></aw-icon>
+        </i>
+        <div class="Media-body">
+          <h4 class="SetupItem-title">Users</h4>
+          <p class="SetupItem-description">
+            Allow others to sign into Tower and own the content they create.
+          </p>
+        </div>
+      </a>
+      <a link-to="teams" class="SetupItem HoverIcon Media">
+        <i class="SetupItem-icon HoverIcon-icon HoverIcon-icon--color Media-figure">
+          <aw-icon name="Teams"></aw-icon>
+        </i>
+        <div class="Media-block">
+          <h4 class="SetupItem-title">Teams</h4>
+          <p class="SetupItem-description">
+            Split up your organization to associate content and control permissions for groups.
+          </p>
+        </div>
+      </a>
+  </nav>
+  <aside class="Container-aside">
+      <nav class="SetupMenu Menu Menu--vertical">
+        <a link-to="organizations" class="SetupItem SetupItem--aside HoverIcon Media">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
+            <aw-icon name="Organizations"></aw-icon>
+          </i>
+          <div class="Media-block">
+            <h4 class="SetupItem-title SetupItem-title--aside">Organizations</h4>
+            <p class="SetupItem-description SetupItem-description--aside">
+            Group all of your content to manage permissions across departments in your company.
+            </p>
+          </div>
+        </a>
+        <button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showManagementJobsModal()" ng-if="user_is_superuser">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
+            <aw-icon name="ManagementJobs"></aw-icon>
+          </i>
+          <div class="Media-block">
+            <h4 class="SetupItem-title SetupItem-title--aside">Management Jobs</h4>
+            <p class="SetupItem-description SetupItem-description--aside">
+              Schedule jobs to periodically cleanup job history.
+            </p>
+          </div>
+        </button>
+        <button class="SetupItem SetupItem--button SetupItem--aside HoverIcon Media" ng-click="showInventoryScriptsModal()" ng-if="user_is_superuser">
+          <i class="SetupItem-icon SetupItem-icon--aside HoverIcon-icon HoverIcon-icon--opacity Media-figure">
+            <aw-icon name="InventoryScripts"></aw-icon>
+          </i>
+          <div class="Media-block">
+            <h4 class="SetupItem-title SetupItem-title--aside">Inventory Scripts</h4>
+            <p class="SetupItem-description SetupItem-description--aside">
+              Create and edit scripts to dynamically load hosts from any source.
+            </p>
+            </div>
+        </button>
+        <a link-to="license" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon">
+          <h4 class="SetupItem-title SetupItem-title--aside">View Your License</h4>
+        </a>
+        <button ng-click="showAboutModal()" class="SetupItem SetupItem--button SetupItem--aside SetupItem--noIcon">
+          <h4 class="SetupItem-title SetupItem-title--aside">About Tower</h4>
+        </button>
+      </nav>
+  </aside>
+</section>
--- a/awx/ui/static/js/setup-menu/setup.controller.js
+++ b/awx/ui/static/js/setup-menu/setup.controller.js
@ -0,0 +1,27 @@
+export default
+    [   '$scope',
+        '$rootScope',
+        'AboutAnsibleHelp',
+        'ConfigureTower',
+        'CreateCustomInventory',
+        function(
+            $scope,
+            $rootScope,
+            showAboutModal,
+            configureTower,
+            showInventoryScriptsModal
+        ) {
+            $scope.showAboutModal = showAboutModal;
+
+            $scope.showManagementJobsModal =
+                configureTower.bind(null,
+                                    {   scope: $rootScope,
+                                        parent_scope: $rootScope
+                                    });
+
+            $scope.showInventoryScriptsModal = showInventoryScriptsModal.bind(null,
+                                                                              { parent_scope: $rootScope
+                                                                              });
+
+        }
+    ];
--- a/awx/ui/static/js/setup-menu/setup.route.js
+++ b/awx/ui/static/js/setup-menu/setup.route.js
@ -0,0 +1,8 @@
+import controller from './setup.controller';
+
+export default {
+    name: 'setup',
+    route: '/setup',
+    controller: controller,
+    templateUrl: '/static/js/setup-menu/setup-menu.partial.html'
+};
--- a/awx/ui/static/js/shared/branding/colors.less
+++ b/awx/ui/static/js/shared/branding/colors.less
@ -22,3 +22,4 @@
@red: #ff5850;
@red-hover: #FA8C87;
@red-focus: #FF1105;
+@ansible-red: #FF5850;
--- a/awx/ui/static/js/shared/button.block.less
+++ b/awx/ui/static/js/shared/button.block.less
@ -0,0 +1,16 @@
+/** @define Button */
+
+@import 'shared/branding/colors.less';
+
+.Button {
+    &--pseudo {
+        // Make pseudo button
+        background: transparent;
+        border: 0;
+        padding: 0;
+        color: @blue-link;
+        text-align: left;
+
+        outline: none;
+    }
+}
--- a/awx/ui/static/js/shared/container/container.block.less
+++ b/awx/ui/static/js/shared/container/container.block.less
@ -0,0 +1,19 @@
+/** @define Container */
+
+.Container {
+    display: flex;
+    flex-wrap: wrap;
+    &-main {
+        flex: 6;
+        margin-right: 2.28rem;
+    }
+    &-aside {
+        flex: 3;
+    }
+}
+
+@media screen and (max-width: 710px) {
+    .Container {
+        flex-direction: column;
+    }
+}
--- a/awx/ui/static/js/shared/detail-nav/detail-nav.block.less
+++ b/awx/ui/static/js/shared/detail-nav/detail-nav.block.less
@ -0,0 +1,12 @@
+/** @define DetailNav */
+
+.DetailNav {
+
+    &-title {
+        font-size: 1.4rem;
+        margin-bottom: 0.4rem;
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+}
--- a/awx/ui/static/js/shared/icon/icon.block.less
+++ b/awx/ui/static/js/shared/icon/icon.block.less
@ -0,0 +1,7 @@
+/** @define Icon */
+
+.Icon {
+    path, g {
+      fill: #242424;
+    }
+}
--- a/awx/ui/static/js/shared/icon/icon.directive.js
+++ b/awx/ui/static/js/shared/icon/icon.directive.js
@ -0,0 +1,29 @@
+export default function() {
+    return {
+        restrict: 'E',
+        templateUrl: '/static/js/shared/icon/icon.partial.html',
+        scope: {
+        },
+        link: function(scope, element, attrs) {
+            var svg = $('svg', element);
+            var iconPath = '#' + attrs.name;
+
+            // Make a copy of the <symbol> tag to insert its contents into this
+            // element's svg tag
+            var content = $(iconPath).clone();
+
+            // Copy classes & viewBox off the <symbol> so that we preserve any styling
+            // when we copy the item inline
+            var classes = $(iconPath).attr('class');
+
+            // viewBox needs to be access via native
+            // javascript's setAttribute function
+            var viewBox = $(iconPath)[0].getAttribute('viewBox');
+
+            svg[0].setAttribute('viewBox', viewBox);
+            svg.attr('class', classes)
+                .html(content.contents());
+
+        }
+    };
+}
--- a/awx/ui/static/js/shared/icon/icon.partial.html
+++ b/awx/ui/static/js/shared/icon/icon.partial.html
@ -0,0 +1,2 @@
+<svg preserveAspectRatio="xMidYMid meet" class="Icon" width="100%" height="100%">
+</svg>
--- a/awx/ui/static/js/shared/icon/include-svg.directive.js
+++ b/awx/ui/static/js/shared/icon/include-svg.directive.js
@ -0,0 +1,12 @@
+export default ['$http', function($http) {
+    return {
+        restrict: 'E',
+        link: function(scope, element, attrs) {
+            var path = attrs.href;
+
+            $http.get(path).then(function(response) {
+                element.append(response.data);
+            });
+        }
+    };
+}];
--- a/awx/ui/static/js/shared/icon/main.js
+++ b/awx/ui/static/js/shared/icon/main.js
@ -0,0 +1,7 @@
+import icon from './icon.directive';
+import includeSvg from './include-svg.directive';
+
+export default
+    angular.module('awIcon', [])
+        .directive('awIcon', icon)
+        .directive('includeSvg', includeSvg);
--- a/awx/ui/static/js/shared/media-object.block.less
+++ b/awx/ui/static/js/shared/media-object.block.less
@ -0,0 +1,14 @@
+/** @define Media */
+
+.Media {
+  display: flex;
+  align-items: flex-start;
+
+  &-figure {
+    margin-right: 1.4rem;
+  }
+
+  &-body {
+    flex: 1;
+  }
+}
--- a/awx/ui/static/js/shared/route-extensions/link-to.directive.js
+++ b/awx/ui/static/js/shared/route-extensions/link-to.directive.js
@ -53,6 +53,11 @@ export default
        'transitionTo',
        function($routeProvider, $location, transitionTo) {

+            function transitionListener(routeName, model, e) {
+                e.stopPropagation();
+                e.preventDefault();
+                transitionTo(routeName, model);
+            }
            return {
                restrict: 'A',
                scope: {
@ -60,16 +65,25 @@ export default
                    model: '&'
                },
                link: function (scope, element, attrs) {
-                    var model = scope.$eval(scope.model);
-                    scope.url = lookupRouteUrl(scope.routeName, $routeProvider.routes, model, $location.$$html5);

-                    element.find('[data-transition-to]').on('click', function(e) {
-                        e.stopPropagation();
-                        e.preventDefault();
-                        transitionTo(scope.routeName, model);
-                    });
+                    var listener;
+
+                    scope.$watch(function() {
+                        var model = scope.$eval(scope.model);
+                        return model;
+                    }, function(newValue) {
+
+                        var model = scope.$eval(scope.model);
+                        scope.url = lookupRouteUrl(scope.routeName, $routeProvider.routes, model, $location.$$html5);
+                        element.off('click', listener);
+
+                        listener = _.partial(transitionListener, scope.routeName, model);
+
+                        element.on('click', listener);
+
+                        element.attr('href', scope.url);
+                    }, true);

-                    element.attr('href', scope.url);
                }
            };
        }
--- a/awx/ui/static/js/shared/title.directive.js
+++ b/awx/ui/static/js/shared/title.directive.js
@ -2,6 +2,10 @@

 export default function() {
    return function(scope, element, attrs) {
+        if (attrs.awToolTip) {
+            return;
+        }
+
        element.tooltip();
    };
 }
--- a/awx/ui/static/js/shared/utilities/icons.less
+++ b/awx/ui/static/js/shared/utilities/icons.less
@ -0,0 +1,16 @@
+@import "components-font-awesome/less/variables.less";
+
+/* not bem */
+
+.icon(@icon-var) {
+  display: flex;
+  align-self: center;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  content: @icon-var;
+}
--- a/awx/ui/static/js/shared/utilities/layer.less
+++ b/awx/ui/static/js/shared/utilities/layer.less
@ -0,0 +1,4 @@
+.u-layer {
+  position: relative;
+  z-index: 10000;
+}
--- a/awx/ui/static/js/shared/utilities/truncated-text.less
+++ b/awx/ui/static/js/shared/utilities/truncated-text.less
@ -0,0 +1,4 @@
+.u-truncatedText {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
--- a/awx/ui/static/js/tmp.less
+++ b/awx/ui/static/js/tmp.less
@ -1,11 +0,0 @@
-/** @define Component */
-
-.Component {
-    &-title {
-        diddy: doo;
-    }
-    .diddy {
-        dah: doody;
-    }
-    doo: dah;
-}
--- a/awx/ui/static/less/ansible-ui.less
+++ b/awx/ui/static/less/ansible-ui.less
@ -22,6 +22,7 @@
 }

@import "../js/shared/branding/colors.less";
+@import "fonts.less";
@import "main-layout.less";
@import "animations.less";
@import "jquery-ui-overrides.less";
@ -1901,8 +1902,6 @@ tr td button i {

 }

-
-
 /* Landscape phone to portrait tablet */

@media (max-width: 767px) {
--- a/awx/ui/static/less/breadcrumbs.less
+++ b/awx/ui/static/less/breadcrumbs.less
@ -25,7 +25,7 @@
    color: @black;
    font-weight: normal;
    text-decoration: none;
-    padding: 3px 8px 3px 20px;
+    padding: 3px 8px 3px 16px;
    background: @white;                   /* fallback color */
    position: relative;
    left: 0;
@ -39,6 +39,7 @@
 .ansible-breadcrumb li:first-child a{
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
+    padding-left: 11px;
 }

 .ansible-breadcrumb li.active a {
--- a/awx/ui/static/less/fonts.less
+++ b/awx/ui/static/less/fonts.less
@ -0,0 +1,19 @@
+.include-font(@family-name; @filename; @weight: normal; @style: normal) {
+  @font-face {
+    font-family: @family-name;
+    src: url("/static/fonts/@{filename}.woff2") format('woff2'),
+         url("/static/fonts/@{filename}.woff") format('woff');
+    font-weight: @weight;
+    font-style: @style;
+  }
+}
+
+.include-font('merriweather'; 'merriweather_light-webfont'; 200);
+.include-font('merriweather'; 'merriweather-regular-webfont');
+.include-font('merriweather'; 'merriweather-bold-webfont'; bold);
+.include-font('merriweather'; 'merriweather_ultrabold-webfont'; 800);
+.include-font('merriweather'; 'merriweather-lightitalic-webfont'; 200; italic);
+.include-font('merriweather'; 'merriweather-bolditalic-webfont'; bold; italic);
+.include-font('merriweather'; 'merriweather-heavyitalic-webfont'; 800; italic);
+.include-font('merriweather'; 'merriweather-italic-webfont'; normal; italic);
+
--- a/awx/ui/static/less/main-layout.less
+++ b/awx/ui/static/less/main-layout.less
@ -9,15 +9,11 @@

 html, body { height: 100%; }

-html {
-  background-color: @white;
-}
-
 body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
-    padding-top: 75px;
    color: @black;
+    padding-top: 75px;
 }

 #main-menu-container {
--- a/awx/ui/static/lib/angular/index.js
+++ b/awx/ui/static/lib/angular/index.js
@ -0,0 +1,2 @@
+require('./angular');
+module.exports = angular;
--- a/awx/ui/static/lib/angular/package.json
+++ b/awx/ui/static/lib/angular/package.json
@ -0,0 +1,25 @@
+{
+  "name": "angular",
+  "version": "1.3.15",
+  "description": "HTML enhanced for web apps",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/angular.js.git"
+  },
+  "keywords": [
+    "angular",
+    "framework",
+    "browser",
+    "client-side"
+  ],
+  "author": "Angular Core Team <angular-core+npm@google.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/angular.js/issues"
+  },
+  "homepage": "http://angularjs.org"
+}
--- a/awx/ui/static/lib/jPushMenu/jPushMenu.css
+++ b/awx/ui/static/lib/jPushMenu/jPushMenu.css
@ -1,167 +0,0 @@
-/* General styles for all menus */
-
-.cbp-spmenu {
-    background: #47a3da;
-    position: fixed;
-}
-
-.cbp-spmenu h3 {
-    color: #afdefa;
-    font-size: 1.9em;
-    padding: 20px;
-    margin: 0;
-    font-weight: 300;
-    background: #0d77b6;
-}
-
-.cbp-spmenu a {
-    display: block;
-    color: #fff;
-    font-size: 1.1em;
-    font-weight: 300;
-}
-
-.cbp-spmenu a:hover {
-    background: #258ecd;
-}
-
-.cbp-spmenu a:active {
-    background: #afdefa;
-    color: #47a3da;
-}
-
-/* Orientation-dependent styles for the content of the menu */
-
-.cbp-spmenu-vertical {
-    width: 240px;
-    height: 100%;
-    top: 0;
-    z-index: 1100;
-}
-
-.cbp-spmenu-vertical a {
-    border-bottom: 1px solid #258ecd;
-    padding: 1em;
-}
-
-.cbp-spmenu-horizontal {
-    width: 100%;
-    height: 150px;
-    left: 0;
-    z-index: 1000;
-    overflow: hidden;
-}
-
-.cbp-spmenu-horizontal h3 {
-    height: 100%;
-    width: 20%;
-    float: left;
-}
-
-.cbp-spmenu-horizontal a {
-    float: left;
-    width: 20%;
-    padding: 0.8em;
-    border-left: 1px solid #258ecd;
-}
-
-/* Vertical menu that slides from the left or right */
-
-.cbp-spmenu-left {
-    left: -240px;
-}
-
-.cbp-spmenu-right {
-    right: -240px;
-}
-
-.cbp-spmenu-left.cbp-spmenu-open {
-    left: 0px;
-}
-
-.cbp-spmenu-right.cbp-spmenu-open {
-    right: 0px;
-}
-
-/* Horizontal menu that slides from the top or bottom */
-
-.cbp-spmenu-top {
-    top: -150px;
-}
-
-.cbp-spmenu-bottom {
-    bottom: -150px;
-}
-
-.cbp-spmenu-top.cbp-spmenu-open {
-    top: 0px;
-}
-
-.cbp-spmenu-bottom.cbp-spmenu-open {
-    bottom: 0px;
-}
-
-/* Push classes applied to the body */
-
-.cbp-spmenu-push {
-    overflow-x: hidden;
-    position: relative;
-    left: 0;
-}
-
-.cbp-spmenu-push-toright {
-    left: 240px;
-}
-
-.cbp-spmenu-push-toleft {
-    left: -240px;
-}
-
-/* Transitions */
-
-.cbp-spmenu,
-.cbp-spmenu-push {
-    -webkit-transition: all 0.3s ease;
-    -moz-transition: all 0.3s ease;
-    transition: all 0.3s ease;
-}
-
-/* Example media queries */
-
-@media screen and (max-width: 55.1875em){
-
-    .cbp-spmenu-horizontal {
-        font-size: 75%;
-        height: 110px;
-    }
-
-    .cbp-spmenu-top {
-        top: -110px;
-    }
-
-    .cbp-spmenu-bottom {
-        bottom: -110px;
-    }
-
-}
-
-@media screen and (max-height: 26.375em){
-
-    .cbp-spmenu-vertical {
-        font-size: 90%;
-        width: 190px;
-    }
-
-    .cbp-spmenu-left,
-    .cbp-spmenu-push-toleft {
-        left: -190px;
-    }
-
-    .cbp-spmenu-right {
-        right: -190px;
-    }
-
-    .cbp-spmenu-push-toright {
-        left: 190px;
-    }
-}
--- a/awx/ui/static/lib/jPushMenu/jPushMenu.js
+++ b/awx/ui/static/lib/jPushMenu/jPushMenu.js
@ -1,99 +0,0 @@
-/*!
- * jPushMenu.js
- * 1.1.1
- * @author: takien
- * http://takien.com
- * Original version (pure JS) is created by Mary Lou http://tympanus.net/
- */
-
-(function($) {
-    $.fn.jPushMenu = function(customOptions) {
-        var jPushMenu,
-            o = $.extend({}, $.fn.jPushMenu.defaultOptions, customOptions);
-
-        /* add class to the body.*/
-
-        $('body').addClass(o.bodyClass);
-        $(this).addClass('jPushMenuBtn');
-        $(this).click(function() {
-            var target         = '',
-            push_direction     = '';
-
-            if($(this).is('.'+o.showLeftClass)) {
-                target         = '.cbp-spmenu-left';
-                push_direction = 'toright';
-            }
-            else if($(this).is('.'+o.showRightClass)) {
-                target         = '.cbp-spmenu-right';
-                push_direction = 'toleft';
-            }
-            else if($(this).is('.'+o.showTopClass)) {
-                target         = '.cbp-spmenu-top';
-            }
-            else if($(this).is('.'+o.showBottomClass)) {
-                target         = '.cbp-spmenu-bottom';
-            }
-
-
-            $(this).toggleClass(o.activeClass);
-            $(target).toggleClass(o.menuOpenClass);
-
-            if ($(this).is('.'+o.pushBodyClass)) {
-                $('body').toggleClass( 'cbp-spmenu-push-'+push_direction );
-            }
-
-            /* disable all other button*/
-            $('.jPushMenuBtn').not($(this)).toggleClass('disabled');
-
-            return false;
-        });
-        jPushMenu = {
-            close: function () {
-                $('.jPushMenuBtn,body,.cbp-spmenu').removeClass('disabled active cbp-spmenu-open cbp-spmenu-push-toleft cbp-spmenu-push-toright');
-            }
-        };
-
-        if (o.closeOnClickInside) {
-            $(document).click(function() {
-                jPushMenu.close();
-            });
-
-            $('.cbp-spmenu,.toggle-menu').click(function(e){
-                e.stopPropagation();
-            });
-        }
-
-        if (o.closeOnClickOutside) {
-            $(document).click(function() {
-                jPushMenu.close();
-            });
-
-            $('.cbp-spmenu,.toggle-menu').click(function(e){
-                e.stopPropagation();
-            });
-         }
-
-        // On Click Link
-        if (o.closeOnClickLink) {
-            $('.cbp-spmenu a').on('click',function(){
-                jPushMenu.close();
-            });
-        }
-    };
-   /*  in case you want to customize class name,
-    *  do not directly edit here, use function parameter when call jPushMenu.
-    */
-    $.fn.jPushMenu.defaultOptions = {
-        bodyClass       : 'cbp-spmenu-push',
-        activeClass     : 'menu-active',
-        showLeftClass   : 'menu-left',
-        showRightClass  : 'menu-right',
-        showTopClass    : 'menu-top',
-        showBottomClass : 'menu-bottom',
-        menuOpenClass   : 'cbp-spmenu-open',
-        pushBodyClass   : 'push-body',
-        closeOnClickOutside: true,
-        closeOnClickInside: true,
-        closeOnClickLink: true
-    };
-})(jQuery);
--- a/awx/ui/static/lib/nvd3/build/nv.d3.css
+++ b/awx/ui/static/lib/nvd3/build/nv.d3.css
@ -3,19 +3,6 @@
 */


-svg {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  /* Trying to get SVG to act like a greedy block in all browsers */
-  display: block;
-  width:100%;
-  height:100%;
-}
-
 /********************
  Default CSS for an svg element nvd3 used
 */
@ -642,4 +629,4 @@ Interactive Layer
 }
 .nvd3 line.nv-guideline {
  stroke: #ccc;
-}
+}
--- a/awx/ui/static/partials/credentials.html
+++ b/awx/ui/static/partials/credentials.html
@ -1,4 +1,5 @@
 <breadcrumbs>
+    <breadcrumb path="/setup" title="Setup"></breadcrumb>
    <breadcrumb path="/credentials" title="Credentials"></breadcrumb>
    <breadcrumb
        path="/credentials/add"
--- a/awx/ui/static/partials/organizations.html
+++ b/awx/ui/static/partials/organizations.html
@ -1,4 +1,5 @@
 <breadcrumbs>
+    <breadcrumb path="/setup" title="Setup"></breadcrumb>
    <breadcrumb path="/organizations" title="Organizations"></breadcrumb>
    <breadcrumb
        path="/organizations/add"
--- a/awx/ui/static/partials/teams.html
+++ b/awx/ui/static/partials/teams.html
@ -1,4 +1,5 @@
 <breadcrumbs>
+    <breadcrumb path="/setup" title="Setup"></breadcrumb>
    <breadcrumb path="/teams" title="Teams"></breadcrumb>
    <breadcrumb
        path="/teams/add"
--- a/awx/ui/static/partials/users.html
+++ b/awx/ui/static/partials/users.html
@ -1,4 +1,5 @@
 <breadcrumbs>
+    <breadcrumb path="/setup" title="Setup"></breadcrumb>
    <breadcrumb path="/users" title="Users"></breadcrumb>
    <breadcrumb
        path="/users/add"
--- a/awx/ui/templates/ui/index.html
+++ b/awx/ui/templates/ui/index.html
@ -26,101 +26,21 @@
  <script src="{{ STATIC_URL }}tower.concat.js?v={{version}}"></script>

 </head>
-<body>
+<body data-user-agent="{{userAgent}}">

-    <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="ansible-mobile-menu">
-        <h3>Hello, <span ng-bind="current_user.username"></span></h3>
-        <a href="#home" id="mobile_home_link" ng-hide="portalMode===true">Home</a></li>
-        <a href="#organizations" id="mobile_organizations_link" ng-hide="portalMode===true">Organizations</a></li>
-        <a href="#users" id="mobile_users_link"  ng-hide="portalMode===true">Users</a></li>
-        <a href="#teams" id="mobile_teams_link" ng-hide="portalMode===true">Teams</a></li>
-        <a href="#credentials" id="mobile_credentials_link" ng-hide="portalMode===true">Credentials</a></li>
-        <a href="#projects" id="mobile_projects_link" ng-hide="portalMode===true">Projects</a></li>
-        <a href="#inventories" id="mobile_inventories_link" ng-hide="portalMode===true">Inventories</a></li>
-        <a href="#job_templates" id="mobile_job_templates_link"  ng-hide="portalMode===true">Job Templates</a></li>
-        <a href="#jobs" id="mobile_jobs_link" ng-hide="portalMode===true">Jobs</a></li>
+    <include-svg href="{{ STATIC_URL }}img/icons.svg"></include-svg>

-        <a href="" id="mobile_about" ng-click ="viewAboutTower()" >About Tower</a> </li>
-        <a href="" id="mobile_view_user" ng-click="viewCurrentUser()" ng-hide="portalMode===true">Account Settings</a></li>
-        <a href="https://ansibleworks.zendesk.com/anonymous_requests/new" id="mobile_contact_support" target="_blank" ng-hide="portalMode===true">Contact Support</a></li>
-        <a id="mobile_custom_inv"  ng-click="createCustomInv()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Inventory Scripts</a></li>
-        <a id="mobile_configure_tower"  ng-click="configureTower()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Management Jobs</a></li>
-        <a id="mobile_munin" target="_blank"  ng-show="user_is_superuser" href="/munin" ng-hide="portalMode===true">Monitor Tower</a></li>
-        <a href="#portal" id="mobile_portal_link" ng-hide="portalMode===true">Portal Mode</a></li>
-        <a href="" id="mobile_view_license" ng-click="viewLicense()" ng-hide="portalMode===true">View License</a></li>
-        <a href="" id="mobile_view_leave_portal" ng-click="leavePortal()" ng-show="portalMode===true">Exit Portal</a></li>
-        <a href="#/logout" id="mobile_logout">Logout</a>
-    </nav>
+  <main-menu
+          menu-style="portalMode ? 'portal' : 'default'"
+          current-user="current_user">
+  </main-menu>

-    <div id="main-menu-container">
-        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
-            <div class="container-fluid">
-                <div class="navbar-header">
-                    <div id="socket-beacon-div"></div>
-                    <button type="button" class="navbar-toggle toggle-menu menu-right" id="main-menu-toggle-button">
-                      <span class="sr-only">Toggle navigation</span>
-                      <span class="icon-bar"></span>
-                      <span class="icon-bar"></span>
-                      <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" href="#home"><img id="ansible-brand-logo" src="{{ STATIC_URL }}img/ansible_tower_logo_minimalc.png" /></a>
-                    <div id="ansible-list-title"></div> <!-- title to show on list pages when menu collapses. value set in app.js -->
-                </div>
-                <div class="navbar-collapse collapse" id="main-navbar-collapse">
-                    <ul class="nav navbar-nav" id="ansible-main-menu">
-                        <!-- <li id="home" class="active"><a href="#home" id="main_home_link" >Home</a></li> -->
-                        <li id="organizations"><a href="#organizations" id="main_organizations_link" ng-hide="portalMode===true">Organizations</a></li>
-                        <li id="users"><a href="#users" id="main_users_link" ng-hide="portalMode===true">Users</a></li>
-                        <li id="teams"><a href="#teams" id="main_teams_link" ng-hide="portalMode===true">Teams</a></li>
-                        <li id="credentials"><a href="#credentials" id="main_credentials_link" ng-hide="portalMode===true">Credentials</a></li>
-                        <li id="projects"><a href="#projects" id="main_projects_link" ng-hide="portalMode===true">Projects</a></li>
-                        <li id="inventories"><a href="#inventories" id="main_inventories_link" ng-hide="portalMode===true">Inventories</a></li>
-                        <li id="job_templates"><a href="#job_templates" id="main_job_templates_link" ng-hide="portalMode===true">Job Templates</a></li>
-                        <li id="jobs"><a href="#jobs" id="main_jobs_link" ng-hide="portalMode===true">Jobs</a></li>
-                        <li id="portal"><a href="#portal" id="main_portal_link" ng-show="portalMode===true">Portal</a></li>
-                        <li class="collapsed-option"><a href="#/login" id="main_login_link" ng-show="!current_user.username">Login</a></li>
-                        <li ng-show="current_user.username" class="collapsed-option">
-                            <a href="" id="account-menu-link">Hello, <span ng-bind="current_user.username"></span> <span class="caret"></span></a>
-                            <ul class="nav navbar-nav" id="account-submenu">
-                               <li><a href="" id="main_about" ng-click ="viewAboutTower()" ng-hide="portalMode===true">About Tower</a> </li>
-                               <li><a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-hide="portalMode===true">Account Settings</a></li>
-                               <li><a id="main_contact_support" target="_blank" href="https://ansibleworks.zendesk.com/anonymous_requests/new" ng-hide="portalMode===true">Contact Support</a></li>
-                               <li> <a id="main_custom_inv"  ng-click="createCustomInv()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Inventory Scripts</a></li>
-                                <li><a id="main_configure_tower"  ng-click="configureTower()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Management Jobs</a></li>
-                               <li><a id="main_munin" target="_blank"  ng-show="user_is_superuser" href="/munin" ng-hide="portalMode===true">Monitor Tower</a></li>
-                               <li><a href="#portal" id="main_view_portal_link" >Portal Mode</a></li>
-                               <li><a id="main_view_license" href="" ng-click="viewLicense()" ng-hide="portalMode===true">View License</a></li>
-                               <li><a id="main_view_leave_portal" href="" ng-click="leavePortal()" ng-show="portalMode===true">Exit Portal</a></li>
-                               <li class="divider"></li>
-                               <li><a id="main_logout" href="#/logout">Logout</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                    <ul class="nav navbar-nav navbar-right" id="account-menu">
-                        <li id="socket-beacon-li"></li>
-                        <li><a href="#/login" id="main_login_link" ng-show="!current_user.username">Login</a></li>
-                        <li class="dropdown" ng-show="current_user.username">
-                            <a href="" id="account-menu-link" class="dropdown-toggle" data-toggle="dropdown">Hello, <span ng-bind="current_user.username"></span> <span class="caret"></span></a>
-                            <ul class="dropdown-menu" id="account-submenu">
-                               <li><a href="" id="main_about" ng-click ="viewAboutTower()" >About Tower</a> </li>
-                               <li><a id="main_view_user" href="" ng-click="viewCurrentUser()" ng-hide="portalMode===true">Account Settings</a></li>
-                               <li><a id="main_contact_support" target="_blank" href="https://ansibleworks.zendesk.com/anonymous_requests/new" ng-hide="portalMode===true">Contact Support</a></li>
-                               <li> <a id="main_custom_inv"  ng-click="createCustomInv()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Inventory Scripts</a></li>
-                               <li><a id="configure_tower"  ng-click="configureTower()" ng-show="user_is_superuser" href="" ng-hide="portalMode===true">Management Jobs</a></li>
-                               <li><a id="main_munin" target="_blank"  ng-show="user_is_superuser" href="/munin" ng-hide="portalMode===true">Monitor Tower</a></li>
-                               <li><a href="#portal" id="main_view_portal_link" ng-hide="portalMode===true">Portal Mode</a></li>
-                               <li><a id="main_view_license" href="" ng-click="viewLicense()" ng-hide="portalMode===true">View License</a></li>
-                               <li><a id="main_view_leave_portal" href="" ng-click="leavePortal()" ng-show="portalMode===true">Exit Portal</a></li>
-
-
-                               <li class="divider"></li>
-                               <li><a id="main_logout" href="#/logout">Logout</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div><!--/.nav-collapse -->
-            </div>
-        </div>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-lg-11"></div>
+      <div class="col-lg-1" style="display: flex;">
+        <web-socket-status style="margin-left: auto;"></web-socket-status>
+      </div>
    </div>
    <div class="container-fluid" id="#content-container">
      <div class="row">
@ -273,7 +193,7 @@
            <div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.number || prompt_for_days_form.days_to_keep.$error.integer" >Please enter a valid number.</div>
            <div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.awMin">Please enter a non-negative number.</div>
            <div class="error survey_error" ng-show="prompt_for_days_form.days_to_keep.$error.awMax">Please enter a number smaller than 9999.</div>
-            </form>
+      </form>
    </div>
    <div id="prompt-for-days-facts" style="display:none">
      <form name="prompt_for_days_facts_form" id="prompt_for_days_facts_form">
@ -323,11 +243,8 @@



-  </div><!-- container -->
-
  <div class="overlay"></div>
  <div class="spinny"><i class="fa fa-cog fa-spin fa-2x"></i> <p>working...</p></div>
-</div>

 <!--
 <div class="navbar navbar-inverse site-footer fade-in">
@ -358,7 +275,6 @@
        var $AnsibleConfig;

        require('tower/app');
-      $('#main-menu-toggle-button').jPushMenu();
  </script>

 </body>