Gecko - layout v2

by Petr Haluza

HTML

<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/reset.css">
<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/fonts.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">


<div id="base">

<div id=header>
<div id="flash">flash</div>
	<div class="container">
	Header
	</div><!-- .cont -->
</div>

<div class="container">
<div id="core">
	
		<aside>
			<div id="mainTree">
			<span class="maniTreeToggle">***</span>
				<ul>
					<li><a href="#"><i><svg viewBox="0 0 24 24" ><use href="#svg-home" /></svg></i><span>Počitače</span></a></li>
					<li><a href="#"><i><svg viewBox="0 0 24 24" ><use href="#svg-secure" /></svg></i><span>Servery</span></a></li>
					<li><a href="#"><i>F</i><span>Fotovoltaika</span></a></li>
					<li><a href="#"><i>D</i><span>PC doplňky a kancelář</span></a></li>
				</ul>
			</div>
			<div id="subTreex">
			<ul>
			<li>Herni</li>
			<li>Pracovni</li>
			<li>Mini</li>
			</ul>
			</div>
		</aside>

		<main id="main">
		<div class="card">
			<header>CardHeader</header>
			<main>CardMain</main>
			<footer>CardFooter</footer>
			
		</div>
		</main>

</div><!-- #core -->
</div><!-- .cont -->



<div id="footer">
  <div class="container">
	Footer
	</div><!-- .cont -->
</div><!-- #footer -->
</div><!-- #base -->

<section id="svgrepo" style="display:none">
	<svg id="svg-home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
<path d="M22 22L2 22" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path d="M2 11L10.1259 4.49931C11.2216 3.62279 12.7784 3.62279 13.8741 4.49931L22 11" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
<path opacity="0.5" d="M15.5 5.5V3.5C15.5 3.22386 15.7239 3 16 3H18.5C18.7761 3 19 3.22386 19 3.5V8.5" stroke="#1C274C"...

CSS

:root { --page-bg: #eef3f9; --block-bg: #f9fafd; --block-radius: 6px}
body { --headerHeight: 50px;--flashHeight: 20px}
body.hasFlash { --headerHeight2: calc( var( --headerHeight ) + var( --flashHeight ) )}



* { box-sizing: border-box}

.container {
max-width:800px; margin: 0 auto}

#base { /*padding-top: calc( var(--headerHeight) + 10px)*/; background: var(--page-bg)}/* /#base ******/ 

#header { position: sticky; z-index:11; top: 0; left:0; right:0; margin-bottom: 10px; backdrop-filter: blur(5px);
	height: var(--headerHeight); border: 1px dashed red}


/* výška headeru bez flash / s flash */
body.hasFlash #header { height: var(--headerHeight2); top: calc(var(--flashHeight) * -1) /* negativni vzska flashe */}
#header #flash {background:red}



#core { display: flex; gap: 10px;
	& aside {flex: 0 0 70px; position: sticky; top: calc( var(--headerHeight) + 10px); display: flex; gap: 10px; z-index:10;
		&:has(#subTree) {flex: 0 0 220px;}
		& > div { background: var(--block-bg); border-radius: var(--block-radius)}
	} /* /#core aside ******/
	& #main {background: var(--block-bg); padding: 1em; flex: 1 1 100%; z-index:9; border-radius: var(--block-radius)}
} /* /#core ******/

#footer {background: lightblue; margin-top: 10px; padding: 1em}

@media (max-width: 768px) {
}



#mainTree { width: 3em; z-index:5}
#mainTree ul li {position: relative}
#mainTree ul li span { display:none; position: absolute; white-space: nowrap; top: 0; padding-left: 1em;}
#mainTree.expand ul li span { display:block}
#mainTree.expand:after { content:""; position: absolute; z-index:-1; left:0; top:0; bottom:0; width: 200px;
 background: var(--block-bg); border-radius: var(--block-radius); box-shadow: 15px 0 20px -10px var(--page-bg)}
#mainTree ul li a { padding:.5em}
#mainTree ul li a i {position: relative; z-index:2}
#mainTree ul li a i svg {width:25px}
#mainTree ul li a:hover span { display: block; background: white; z-index:1}
#subTree { flex: 1 0 auto; z-index:4}



/*#base:before...

JavaScript

// ověření, jesli má header flashMesage, v čistým JS, spustit hned po headeru
document.addEventListener('DOMContentLoaded', function() {
    var headerElement = document.getElementById('header');
    var flashElement = document.getElementById('flash');
    if (headerElement && flashElement && headerElement.contains(flashElement)) {
        // přidat body třídu
        document.body.classList.add('hasFlash');
    }
});



$(document).ready(function() {

    // Přidání třídy .hover při kliku na Toggle
    $('.maniTreeToggle').click(function() {
        $('#mainTree').toggleClass('expand');
        event.stopPropagation();
    });

    // Odebrání třídy .hover při kliku mimo 
    $(document).click(function() {
        $('#mainTree').removeClass('expand');
    });
});