refactor: 💡 Add static width for sidebar column in rose layout

- Update project creation button from link to rose/button

addons/rose/addon/components/rose/layout/page.stories.mdx

@@ -22,40 +22,9 @@ Sidebar's content width determines it's column width.
   <Story name="Basic">{{
     template: hbs`
     <Rose::Layout::Page as |page|>
-      <page.header style="border: 1px solid var(--success);">Header</page.header>
-      <page.main style="border: 1px solid var(--action);">Main</page.main>
-      <page.sidebar style="border: 1px solid var(--alert);">Sidebar</page.sidebar>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-Header, main, and sidebar components are optional.
-<Preview>
-  <Story name="Header">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.header style="border: 1px solid var(--success);">Header</page.header>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-<Preview>
-  <Story name="Main">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.main style="border: 1px solid var(--action);">Main</page.main>
-    </Rose::Layout::Page>
-    `,
-  }}</Story>
-</Preview>
-
-<Preview>
-  <Story name="Sidebar">{{
-    template: hbs`
-    <Rose::Layout::Page as |page|>
-      <page.sidebar style="border: 1px solid var(--alert);">Sidebar</page.sidebar>
+      <page.header style="background: var(--brand-gray-5);">Header</page.header>
+      <page.main style="background: var(--brand-gray-7);">Main</page.main>
+      <page.sidebar style="background: var(--brand-gray-6);">Sidebar</page.sidebar>
     </Rose::Layout::Page>
     `,
   }}</Story>

addons/rose/addon/styles/rose/components/layout/_index.scss

@@ -5,7 +5,8 @@
   grid-template-areas:
     'header header header header'
     'sidebar main main main';
-  grid-template-columns: auto 1fr;
+  // Define static grid column for sidebar
+  grid-template-columns: 12rem auto 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
 }
@@ -25,6 +26,7 @@
 @media (max-width: media.width(small)) {
   .rose-layout-page {
     grid-template-columns: 1fr;
+    grid-template-rows: 0.1fr auto 1fr;
     grid-template-areas:
       'header'
       'sidebar'

addons/rose/addon/templates/components/rose/header.hbs

@@ -1,4 +1,4 @@
-<header
+<div
   ...attributes
   class="rose-header"
 >
@@ -7,4 +7,4 @@
     utilities=(component 'rose/header/utilities')
     nav=(component 'rose/header/nav')
   )}}
-</header>
+</div>

addons/rose/addon/templates/components/rose/layout/page/header.hbs

@@ -1,3 +1,3 @@
-<div ...attributes class="rose-layout-header" >
+<header ...attributes class="rose-layout-header" >
   {{yield}}
-</div>
+</header>

addons/rose/tests/integration/components/rose/layout/page/header-test.js

@@ -8,6 +8,7 @@ module('Integration | Component | rose/layout/page/header', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<Rose::Layout::Page::Header />`);
+    assert.ok(find('header'));
     assert.ok(find('.rose-layout-header'));
   });
 

ui/core/app/routes/orgs/org/projects/index.js

@@ -1,3 +1,9 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class OrgsOrgProjectsIndexRoute extends Route {}
+export default class OrgsOrgProjectsIndexRoute extends Route {
+  @action
+  new() {
+    this.transitionTo('orgs.org.projects.new');
+  }
+}

ui/core/app/styles/app.scss

@@ -38,10 +38,9 @@
   box-sizing: border-box;
   box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 2px;
-  position: absolute;
-  right: 10px;
-  top: 70px;
-  display: inline-block;
+  position: relative;
+  float: right;
+  top: -50px;
 }
 
 .project-overview,

ui/core/app/templates/orgs/org/projects/index.hbs

@@ -1,7 +1,13 @@
 <div class="projects-overview">
   <h2>{{t "resources.projects"}}</h2>
-
-  <LinkTo @route="orgs.org.projects.new" class="project-new-link">{{t "titles.new"}}</LinkTo>
+  <Rose::Button
+    class="project-new-link"
+    @style="primary"
+    @iconLeft="plus-plain"
+    {{on "click" (route-action "new")}}
+  >
+    {{t 'titles.new'}}
+  </Rose::Button>
 
   <ul class="projects">
     {{#each @model as |project|}}