feat: emulate production left space of hosted app (#1013)

feat: emulate production left space of camac ng
projectcaluma · Nov 18, 2024 · 417f891 · 417f891
1 parent ae10efb
commit 417f891
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
@@ -6,3 +6,34 @@
   max-height: 100vh;
   overflow: hidden;
 }
+
+.nav-sidebar {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  top: 80px;
+  overflow-y: auto;
+  width: 240px;
+  border-right: 1px solid #dfdfdf;
+}
+
+.full-screen-content {
+  margin-left: 241px;
+}
+
+.full-screen-content > div {
+  height: calc(100vh - 80px);
+}
+
+.subnav-header {
+  margin: 10px;
+}
+
+ul.uk-navbar-nav > li.uk-active > a {
+  font-size: larger;
+  margin-left: 20px;
+}
+
+.uk-navbar-nav {
+  margin-right: 20px;
+}
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -42,8 +42,17 @@
       </ul>
     </div>
   </nav>
-
-  <main class="uk-height-1-1 uk-overflow-auto">
+  <aside class="nav-sidebar uk-navbar-container">
+    <div class="subnav-header">
+      <br>
+      <div>
+        <p>This panel is to emulate the side panel of the host app</p>
+        <br>
+        <p>This is not a part of <strong>ember-alexandria</strong> package</p>
+      </div>
+    </div>
+  </aside>
+  <div class="full-screen-content">
     {{outlet}}
-  </main>
+  </div>
 </div>