Module: common/app-sk

app-sk

A general application layout which includes a responsive side panel. This element is largely CSS, with a smattering of JS to toggle the side panel on/off when in small screen mode. This CSS has some variables which can be customized (see app-sk.scss and app-sk_demo.css for an example of this).

In general, create an app with a <header>, aside, main, and footer and app-sk will apply the appropriate CSS to make an app with a header bar, a collapsible (on small screens) side-bar, the main content, and a footer.

Source:
Example
<app-sk>
   <header>
     <h1>Hello App</h1>
     <div class=spacer></div>
     <login-sk></login-sk>
   </header>
   <aside>
     <h2>This is the side bar</h2>
     <h2>Hopefully the side bar handles really wide text well.</h2>
   </aside>

   <main>
     <h1>The main content!</h1>
   </main>

   <footer><error-toast-sk></error-toast-sk></footer>
 </app-sk>