Framework WIP:

- Rename EgwApp to EgwFrameworkApp to avoid confusion with api/js/jsapi/EgwApp
- Continued work on narrow screen styles

kdots/assets/styles/framework.less

@@ -73,6 +73,7 @@ egw-app {
   &::part(name) {
 	display: flex;
 	align-items: center;
+	text-wrap: nowrap;
   }
 }
 

kdots/js/EgwFramework.styles.ts

@@ -40,6 +40,7 @@ export default css`
 	/* To use the sl-split-panel, we need it to have its own space & nest stuff inside */
 
 	.egw_fw__layout-default .egw_fw__divider {
+		max-width: 100vw;
 		grid-column-start: start;
 		grid-column-end: status-start;
 		grid-row-start: main-header;
@@ -71,12 +72,22 @@ export default css`
 	}
 
 
-	@media (min-width: 500px) {
+	@media (min-width: 600px) {
 		.egw_fw__layout-default {
 			grid-template-columns: [start banner-start header-start footer-start main-start] 1fr [main-end header-end banner-end end];
 			grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [main-header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em);
 		}
 	}
+	@media (max-width: 599px) {
+		.egw_fw__layout-default {
+			grid-template-columns: [start banner-start header-start footer-start main-start] 1fr [main-end header-end banner-end end];
+			grid-template-rows: [top banner] fit-content(2em) [header] fit-content(2em) [main-header] fit-content(2em) [main] 1fr [footer bottom] fit-content(2em);
+		}
+
+		::slotted([slot="logo"]) {
+			display: none;
+		}
+	}
 
 	/* Actual styles */
 

kdots/js/EgwFrameworkApp.styles.ts

@@ -84,7 +84,7 @@ export default css`
 		grid-row: footer / end;
 	}
 
-	@media (min-width: 500px) {
+	@media (min-width: 600px) {
 		.egw_fw_app__main {
 			grid-template-columns: [start left] fit-content(20%)  [main] 1fr [right] fit-content(50%) [end];
 			grid-template-rows: [start sub-header] fit-content(2em) [main] auto [footer] fit-content(2em) [end];
@@ -94,13 +94,42 @@ export default css`
 			height: 100%;
 		}
 	}
-	@media (max-width: 500px) {
+	@media (max-width: 599px) {
 		.egw_fw_app__main {
-			grid-template-areas:
+			grid-template-columns: [start left main-start] fit-content(50%)  [right] auto [main-end end];
-				"header"
+			grid-template-rows: 
-				"main"
+				[start sub-header] fit-content(2em) 
-				"left right"
+				[main] auto 
-				"footer"
+				[aside-header] fit-content(2em) 
+				[aside] min-content 
+				[aside-footer] fit-content(4em) 
+				[footer] fit-content(4em) 
+				[end];
+		}
+
+		.egw_fw_app__main_content {
+			grid-row: main / aside-header;
+			grid-column: start / end;
+		}
+
+		.egw_fw_app__aside {
+			grid-row: aside-header / footer;
+		}
+
+		.egw_fw_app__aside_header {
+			grid-row: aside-header / aside;
+		}
+
+		.egw_fw_app__aside_content {
+			grid-row: aside / aside-footer;
+		}
+
+		.egw_fw_app__aside_footer {
+			grid-row: aside-footer / footer;
+		}
+
+		.egw_fw_app__footer {
+			grid-column: start / end;
 		}
 	}
 `

kdots/js/EgwFrameworkApp.ts

@@ -1,10 +1,10 @@
 import {css, html, LitElement} from "lit";
 import {customElement} from "lit/decorators/custom-element.js";
-import "@shoelace-style/shoelace/dist/components/split-panel/split-panel.js";
 import {property} from "lit/decorators/property.js";
-
-import styles from "./EgwApp.styles";
 import {state} from "lit/decorators/state.js";
+import {classMap} from "lit/directives/class-map.js";
+
+import styles from "./EgwFrameworkApp.styles";
 
 /**
  * @summary Application component inside EgwFramework
@@ -33,7 +33,7 @@ import {state} from "lit/decorators/state.js";
  */
 @customElement('egw-app')
 //@ts-ignore
-export class EgwApp extends LitElement
+export class EgwFrameworkApp extends LitElement
 {
 	static get styles()
 	{
@@ -89,6 +89,11 @@ export class EgwApp extends LitElement
 
 	render()
 	{
+		const leftClassMap = classMap({
+			"egw_fw_app__aside": true,
+			"egw_fw_app__left": true,
+			"egw_fw_app__aside-collapsed": this.leftCollapsed
+		});
 		return html`
             <div class="egw_fw_app__header">
                 <div class="egw_fw_app__name" part="name">
@@ -104,7 +109,7 @@ export class EgwApp extends LitElement
             </div>
             <main class="egw_fw_app__main" part="main"
                   aria-label="${this.name}" tabindex="0">
-                <aside class="egw_fw_app__aside egw_fw_app__left" part="left">
+                <aside class=${leftClassMap} part="left">
                     <div class="egw_fw_app__aside_header">
                         <slot name="left-header"><span class="placeholder">left-header</span></slot>
                     </div>

kdots/js/app.ts

@@ -3,7 +3,7 @@
  */
 
 import "./EgwFramework";
-import "./EgwApp";
+import "./EgwFrameworkApp";
 
 
 document.addEventListener('DOMContentLoaded', () =>