# j-NavLayout

> Jednoduché a plne citlivé rozloženie navigácie.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 9b1335470c82b2356be2a80f31280fcab15a382090387c8312b0dd46202d81f8
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Jednoduché a plne citlivé rozloženie navigácie.


__Je dobré vedieť__:

- `path {Boolean}` zobrazuje navigačný panel v režimoch zobrazenia definovaných v možnosti konfigurácie `hide`
- `<section>` musí obsahovať navigáciu
- `<main>` musí obsahovať obsah

__Konfigurácia__:

- `width {Number}` veľkosť navigácie (predvolená: `250`)
- `hide {String}` skryje navigáciu v definovaných režimoch zobrazenia (predvolené: `xs,sm`)
- `autoresize {Boolean}` umožňuje automatickú zmenu veľkosti (predvolené: `true`)
- Navigačná poloha `position {String}` (predvolené: `left`)
- `margin {Number}` pridá maržu pre `height` (predvolené: `0`)
- `parent {String}` môže obsahovať `parent`, `window` alebo jQuery selektor pre metódu `closest` (predvolené: `window`)

Použite ho so `<ui-component name="navlayout">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html example.html
<style>
	html, body { margin: 0; padding: 0; }
</style>

<ui-component name="navlayout" path="common.menu" config="parent:window;hide:xs" class="invisible">

	<section style="background-color:blue;color:#FFF">
		Navigation
	</section>

	<main style="background-color:red;color:#FFF">
		Main body
	</main>

</ui-component>

<script>

	var common = { menu: false };

	setInterval(function() {
		var path = 'common.menu';
		SET(path, !GET(path));
	}, 3000);

</script>
```