B2B25 - layout test 1

by Petr Haluza

HTML

<body>

<header id="main-header">
<div class="message"><!-- if -->
	<div class="wrapper">
	message
	</div>
</div><!-- /if -->
<div class="pre-wrap">
	<div class="wrapper">
	HLAVIČKA
	</div>
</div>
</header>

<section id="main-content">
	<div class="pre-wrap">
	<div class="wrapper">
	<aside id="tree" class="">STROM
		<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
	</aside>
	<main>
	<section id="content">
		Main section
		<li><label class="b2b-layout-switch" for="b2b-layout-switch"><input type="checkbox" id="b2b-layout-switch" /> Box / full </label></li>
				<p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p><p>x</p>
	</section>



	</main>
	</div>
	</div>
</section>

<footer id="main-footer">
	<div class="pre-wrap">
	<div class="wrapper">
	FOOTER<br>FOOTER<br>FOOTER<br>FOOTER<br>FOOTER<br>
	</div>
	</div>
</footer>

</body>

CSS

/**** BODY LAYOUT ****/
:root {
	--main-header-height: 50px;
	--aside-width: 200px;
}

body {display: flex; flex-direction: column; min-height: 100vh}

body > header {position: sticky; top:0; height: var(--main-header-height); display: flex; flex-direction: column;}
header:has(.message) { height: 80px}
header:has(.message) ~ #main-content { --main-header-height: 80px} /* když je v hlavičce aktivní MESSAGE */


#main-content {display: flex; flex-grow: 1}
#main-content .pre-wrap {display:flex; flex-grow: 1}
#main-content .wrapper {display:flex; flex-grow: 1}

#main-content aside#tree {max-height: calc(100vh - var(--main-header-height)); overflow-y:auto; width: var(--aside-width); position: fixed}
#main-content main { display: flex; ; flex-grow: 1; flex-direction: column; padding-left: var(--aside-width)}
/* když je strom class="min" */
#main-content aside#tree.min {height: 50px; opacity:.75} /* je strom plovoucí nad obsahem */
#main-content .wrapper:has(aside#tree.min) main {padding-left:0; padding-top: 50px} /* je obsah na celou šířku */

footer#main-footer {margin-top: auto; background: #aaf}


.wrapper {max-width: 100%; margin: 0 auto; transition: all .5s}
[data-layout="boxed"] .wrapper {max-width: 800px; margin: 0 auto}



/**** MAIN HEADER - layout headeru ve stránce je v sekci BODY LAYOUT ****/
body > header {background: #aaf;}


/**** ASIDE pro stromy produktů - layout ASIDE ve stránce je v sekci BODY LAYOUT ****/
#main-content aside#tree {background:#afa;}
/* obsahový "bílý" blok */
section#content {}


/**** MAIN pro MAIN CONTENT - layout MAINu ve stránce je v sekci BODY LAYOUT ****/
#main-content main { background:#faa;}


/**** MAIN FOOTER - layout footeru ve stránce je v sekci BODY LAYOUT ****/
footer#main-footer {background: #aaf}

JavaScript

// HAPv25 layoutSwitch
const layoutSwitch = document.querySelector('.b2b-layout-switch input[type="checkbox"]');
const currentLayout = localStorage.getItem('100mega-b2b-layout');
if (currentLayout) {
  document.documentElement.setAttribute('data-layout', currentLayout);
  if (currentLayout === 'boxed') { layoutSwitch.checked = true; }
}
function switchLayout(e) {
  if (e.target.checked) { document.documentElement.setAttribute('data-layout', 'boxed'); localStorage.setItem('100mega-b2b-layout', 'boxed'); }
  else { document.documentElement.setAttribute('data-layout', 'fullWidth'); localStorage.setItem('100mega-b2b-layout', 'fullWidth'); }    
}
layoutSwitch.addEventListener('change', switchLayout, false);
// konec HAPv25 layoutSwitch