Merge pull request #295 from hashicorp/chore-sidebar

Chore sidebar

ui/core/.sasslintrc

@@ -0,0 +1,7 @@
+files:
+  include: 'app/styles/**/*.s+(a|c)ss'
+rules:
+  leading-zero: 0
+  mixins-before-declarations: 0
+  nesting-depth: 0
+  placeholder-in-extend: 0

ui/core/app/routes/scopes/scope.js

@@ -43,4 +43,20 @@ export default class ScopesScopeRoute extends Route {
     const scope = this.modelFor('scopes.scope');
     this.controllerFor('application').set('scope', scope);
   }
+
+  /**
+   * Renders the scope-specific sidebar template.
+   * @override
+   * @param {object} controller
+   * @param {object} model
+   */
+  renderTemplate(controller, model) {
+    super.renderTemplate(...arguments);
+
+    this.render('scopes/scope/-sidebar', {
+      into: 'scopes/scope',
+      outlet: 'sidebar',
+      model: model,
+    });
+  }
 }

ui/core/app/routes/scopes/scope/projects/project.js

@@ -22,7 +22,7 @@ export default class ScopesScopeProjectsProjectRoute extends Route {
   renderTemplate(controller, model) {
     super.renderTemplate(...arguments);
 
-    this.render('scopes/scope/projects/project/_sidebar', {
+    this.render('scopes/scope/projects/project/-sidebar', {
       into: 'scopes/scope',
       outlet: 'sidebar',
       model: model,

ui/core/app/styles/app.scss

@@ -95,7 +95,7 @@
 
 .copyable {
   white-space: nowrap;
-  
+
   .copyable-button {
     margin: 0;
     padding: 0 sizing.rems(xxs);
@@ -104,9 +104,10 @@
   }
 
   mark {
-    color: inherit;
-    background-color: transparent;
     animation: fadeBackground 0.75s linear;
+    background-color: transparent;
+    color: inherit;
+
     @keyframes fadeBackground {
       0%   { background-color: var(--action-subtler-1); }
       100% { background-color: transparent; }

ui/core/app/templates/scopes/scope.hbs

@@ -12,33 +12,6 @@
         </nav.link>
       </Rose::Nav::Sidebar>
 
-      <Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
-        <nav.link @route="scopes.scope.users">
-          <Rose::Icon
-            @name="boundary-icons/users"
-            @size="medium" />
-          {{t "resources.user.title_plural"}}
-        </nav.link>
-        <nav.link @route="scopes.scope.groups">
-          <Rose::Icon
-            @name="boundary-icons/group"
-            @size="medium" />
-          {{t "resources.group.title_plural"}}
-        </nav.link>
-        <nav.link @route="scopes.scope.roles">
-          <Rose::Icon
-            @name="boundary-icons/roles"
-            @size="medium" />
-          {{t "resources.role.title_plural"}}
-        </nav.link>
-        <nav.link @route="scopes.scope.auth-methods">
-          <Rose::Icon
-            @name="boundary-icons/auth-method"
-            @size="medium" />
-          {{t "resources.auth-method.title_plural"}}
-        </nav.link>
-      </Rose::Nav::Sidebar>
-
       {{outlet "sidebar"}}
 
     </sidebarLayout.sidebar>

ui/core/app/templates/scopes/scope/-sidebar.hbs

@@ -0,0 +1,26 @@
+<Rose::Nav::Sidebar @title={{t "titles.iam"}} as |nav|>
+  <nav.link @route="scopes.scope.users">
+    <Rose::Icon
+      @name="boundary-icons/users"
+      @size="medium" />
+    {{t "resources.user.title_plural"}}
+  </nav.link>
+  <nav.link @route="scopes.scope.groups">
+    <Rose::Icon
+      @name="boundary-icons/group"
+      @size="medium" />
+    {{t "resources.group.title_plural"}}
+  </nav.link>
+  <nav.link @route="scopes.scope.roles">
+    <Rose::Icon
+      @name="boundary-icons/roles"
+      @size="medium" />
+    {{t "resources.role.title_plural"}}
+  </nav.link>
+  <nav.link @route="scopes.scope.auth-methods">
+    <Rose::Icon
+      @name="boundary-icons/auth-method"
+      @size="medium" />
+    {{t "resources.auth-method.title_plural"}}
+  </nav.link>
+</Rose::Nav::Sidebar>