Start adding app chrome.

Author: Templarian

src/pg/app/README.md

@@ -0,0 +1,11 @@
+# `<pg-app>`
+
+The `pg-app` component is a wrapper that allows an app icon and tabs.
+
+```typescript
+import '@pictogrammers/components/pg/app';
+```
+
+```html
+<pg-app></pg-app>
+```

src/pg/app/__examples__/basic/basic.css

@@ -0,0 +1,8 @@
+:host {
+
+}
+
+.example {
+  border: 10px solid #EEE;
+  height: 10rem;
+}

src/pg/app/__examples__/basic/basic.html

@@ -0,0 +1,17 @@
+<div class="example">
+  <pg-app>
+    <div slot="top">Top Bar</div>
+    <div slot="side">
+      Sidebar
+    </div>
+    <div slot="main">
+      Content Area
+    </div>
+    <div slot="main">
+      Content Area
+    </div>
+    <div slot="home">
+      Home is the initial page containing helpful info.
+    </div>
+  </pg-app>
+</div>

src/pg/app/__examples__/basic/basic.ts

@@ -0,0 +1,13 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './basic.html';
+import style from './basic.css';
+
+@Component({
+  selector: 'x-pg-app-basic',
+  template,
+  style
+})
+export default class XPgAppBasic extends HTMLElement {
+
+}

src/pg/app/app.css

@@ -0,0 +1,12 @@
+:host {
+  display: contents;
+}
+
+[part=grid] {
+  display: grid;
+  grid-template-columns: auto;
+}
+
+[part=header] {
+  display: flex;
+}

src/pg/app/app.html

@@ -0,0 +1,14 @@
+<div part="grid">
+  <header part="header">
+    <button part="logo">
+      <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M20 5H22V6H30V24H27L29 34H25L23.7998 28H20V31H16V28H12.2002L11 34H7L9 24H6V6H14V5H16V2H20V5ZM12.5996 26H16V24H13L12.5996 26ZM20 26H23.4004L23 24H20V26ZM8 22H28V8H8V22Z" fill="#453C4F"/>
+        <path d="M22 19H14V11H22V19Z" fill="#453C4F"/>
+      </svg>
+    </button>
+    <slot name="top"></slot>
+  </header>
+  <slot name="side"></slot>
+  <slot name="main"></slot>
+  <slot name="home"></slot>
+</div>

src/pg/app/app.ts

@@ -0,0 +1,15 @@
+import { Component, Part, Prop } from '@pictogrammers/element';
+
+import template from './app.html';
+import style from './app.css';
+
+@Component({
+  selector: 'pg-app',
+  style,
+  template
+})
+export default class PgApp extends HTMLElement {
+  @Part() $logo: HTMLButtonElement;
+
+
+}