oda-framework/components/layouts/app-layout/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="../../../oda.js"></script>
<oda-tester>
    <oda-test-layout></oda-test-layout>
</oda-tester>

<script type="module">
    ODA({is:'oda-test-layout', imports:'@oda/app-layout', extends:'oda-app-layout',
        template: /*html*/`
        <app-layout-toolbar slot="header">
             <oda-button icon="class" slot="header-left">header left toolbar</oda-button>
        </app-layout-toolbar>
        <oda-button icon="icons:warning" slot="header"></oda-button>
        <app-layout-toolbar slot="top">
            <oda-button icon="class" slot="top-left">left toolbar</oda-button>
            <oda-button icon="class" slot="top-right">right toolbar</oda-button>
            <oda-button icon="class" slot="top-center">center toolbar</oda-button>
        </app-layout-toolbar>

        <div slot="top">TOP qw erpiqwerop iqwpeopoqweirpqpowporq ikqwep wepp oeqpiqwer
            <oda-button>fff</oda-button>
        </div>
        <input slot="top" value="100">
        <div slot="top-left">TOP-LEFT</div>
        <iframe slot="main" src="../../grids/table/index.html">MAIN</iframe>
        <div slot="bottom">BOTTOM</div>
        <div  icon="odant:class" title="ПППП"  slot="left-panel">ссссс</div>
        <iframe  slot="left-panel" bar-opened label="надпись" src="../../../_sandbox/simple/index.html">LEFT1</iframe>
        <div  style="font-weight: bolder; color: red;" :slot="mySlot">LEFT2</div>
        <div slot="left-panel">LEFT3</div>
        <div slot="right-panel">RIGHT</div>
        <div slot="header">HEADER</div>
        <div slot="footer">FOOTER</div>

        <app-layout-toolbar slot="footer">
            <div slot="footer-left">left footer</div>
            <div slot="right">right footer</div>
            <div slot="center">center footer</div>
        </app-layout-toolbar>
        `,
        mySlot: 'left-panel',
        leftButtons: [{ icon: 'icons:warning', bubble: 10, allowToggle: true, toggleGroup: 'views' }, { icon: 'icons:error', bubble: 3, allowToggle: true, toggleGroup: 'views' }]
    })
</script>