diff --git a/src/layout/Section.component.ts b/src/layout/Section.component.ts
index f1a5913..b1e2f75 100644
--- a/src/layout/Section.component.ts
+++ b/src/layout/Section.component.ts
@@ -3,12 +3,15 @@ import {Component} from '../decorators.js'
@Component('ex-section')
export class SectionComponent extends ExComponent {
- protected static html = `
+ protected static styles = `
+ `
+
+ protected static html = `
diff --git a/src/logical/Logical.component.ts b/src/logical/Logical.component.ts
new file mode 100644
index 0000000..d516e80
--- /dev/null
+++ b/src/logical/Logical.component.ts
@@ -0,0 +1,15 @@
+import {ExComponent} from '../ExComponent.js'
+
+export abstract class LogicalComponent extends ExComponent {
+ protected static styles = `
+
+ `
+
+ public value(): string {
+ return this.innerText.trim()
+ }
+}
diff --git a/src/logical/Session.component.ts b/src/logical/Session.component.ts
new file mode 100644
index 0000000..73dfa54
--- /dev/null
+++ b/src/logical/Session.component.ts
@@ -0,0 +1,19 @@
+import {LogicalComponent} from './Logical.component.js'
+import {Component} from '../decorators.js'
+
+@Component('ex-session')
+export class SessionComponent extends LogicalComponent {
+ mount() {
+ super.mount()
+
+ ;(window as any).session = this.session()
+
+ try {
+ const data = JSON.parse(this.value())
+ this.session().populate(data)
+ } catch (e) {
+ console.error('Error parsing JSON session data!', this.value()) // eslint-disable-line no-console
+ throw e
+ }
+ }
+}
diff --git a/src/nav/NavBar.component.ts b/src/nav/NavBar.component.ts
index 1fe1082..db486b7 100644
--- a/src/nav/NavBar.component.ts
+++ b/src/nav/NavBar.component.ts
@@ -10,7 +10,7 @@ export interface NavBarItem {
@Component('ex-nav')
export class NavBarComponent extends ExComponent {
- protected static html = `
+ protected static styles = `
+ `
+
+ protected static html = `