1.0.261

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.258",
+  "version": "1.0.261",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.258',
+  version: '1.0.261',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-simple-appdash.ts

@@ -27,11 +27,14 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public name = 'Dees Simple Login';
 
+  @property()
+  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> = [];
+
   public static styles = [
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
       }
       .appbar {
@@ -39,17 +42,36 @@ export class DeesSimpleAppDash extends DeesElement {
         top: 0;
         height: 40px;
         width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
         font-size: 14px;
         line-height: 40px;
         font-family: 'Roboto', 'Inter', sans-serif;
         padding: 0px 16px;
+        z-index: 2;
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8);
+        display: grid;
+        grid-template-columns: min-content 1fr auto;
       }
+
+      .appName {
+        white-space: nowrap;
+      }
+
+      .appActions {
+        display: flex;
+      }
+
+      .appActions .action {}
+      .appActions .action:hover {
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
       .appcontent {
+        z-index: 1;
         position: fixed;
         top: 40px;
-        height: calc(100% - 40px);
+        height: calc(100vh - 40px);
         bottom: 0px;
         width: 100%;
         overflow: auto;
@@ -61,7 +83,13 @@ export class DeesSimpleAppDash extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="appbar">
-        configvault v1.2.3
+        <div class="appName">${this.name}</div>
+        <div class="viewTabs"></div>
+        <div class="appActions">
+          <div class="action">
+            Logout
+          </div>
+        </div>
       </div>
       <div class="appcontent">
         <slot></slot>