atlassian
diff --git a/‎src/views/layout.squirrelly
Lines changed: 4 additions & 2 deletions b/‎src/views/layout.squirrelly
Lines changed: 4 additions & 2 deletions
diff --git a/‎static/css/back-nav.css
Lines changed: 0 additions & 16 deletions b/‎static/css/back-nav.css
Lines changed: 0 additions & 16 deletions
diff --git a/‎static/css/main.css
Lines changed: 47 additions & 2 deletions b/‎static/css/main.css
Lines changed: 47 additions & 2 deletions
diff --git a/‎static/css/sidebar.css
Lines changed: 0 additions & 23 deletions b/‎static/css/sidebar.css
Lines changed: 0 additions & 23 deletions
@@ -7,15 +7,17 @@
         Please replace this if you want to add your own css frameworks -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aui/9.5.1/aui/aui-prototyping.min.css" />
     <link rel="stylesheet" href="/public/css/main.css" media="all">
-    <link rel="stylesheet" href="/public/css/sidebar.css" media="all">
-    <link rel="stylesheet" href="/public/css/back-nav.css" media="all">
 
     <!-- This script is needed for all the views in the Connect app -->
     <script src="https://connect-cdn.atl-paas.net/all.js" data-options="sizeToParent:true" async></script>
 </head>
 
 <body>
     <section class="ac-content">
+        <button class="aui-button aui-button-subtle" id="feedback-button" onclick="window.open('https://github.com/atlassian/atlassian-connect-example-app-node/issues/new/choose')">
+            <span class="aui-icon aui-icon-small aui-iconfont-feedback">Feedback</span>
+            Give Feedback
+        </button>
         {{* it.content }}
     </section>
     <script src="/public/js/index.js"></script>
 
@@ -3,14 +3,18 @@ body {
 }
 
 .ac-content {
+    position: relative;
     display: flex;
     font-size: 14px;
     line-height: 1.7;
     height: 100%;
+    margin: 1.6em 2.6em;
 }
 
-.ac-content > div {
-    padding: 1.6em 2.6em;
+#feedback-button {
+    position: absolute;
+    top: 0;
+    right: 0;
 }
 
 .link-span:first-of-type {
@@ -44,3 +48,44 @@ pre {
     background: #000;
 }
 
+
+/* SIDEBAR */
+.acn-sidebar {
+    list-style: none;
+    padding: 1.6em 1.5em;
+    width: 50%;
+    max-width: 220px;
+    border-right: 1px solid #efeff2;
+}
+
+.acn-sidebar-submenu {
+    margin-top: 0;
+    list-style: none;
+    padding-left: 1.2em;
+}
+
+.aui-button-link {
+    color: #172b4d;
+}
+
+.aui-button-link:hover, .aui-button-link.selected {
+    color: #0052cc;
+}
+
+/* BACK NAV */
+.acn-header {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #5E6C84;
+    font-size: 0.9rem;
+    margin-bottom: 1.5em;
+}
+
+.acn-header > .aui-icon {
+    margin-right: 0.12em;
+}
+
+.acn-header-text:hover {
+    text-decoration: underline;
+}