# Menu demo whit clean theme [Menu demonstration with a 'clean theme'](https://r00t80y.github.io/demo/primary-navigation/index.html) ## Install ```console npm install @r00t80y/primary-navigation ``` You may need to install "peerDependencies" ```console npm install throttle-debounce custom-event-polyfill element-closest-polyfill ``` ## How to use with webpack? ### JavaScript ```js // Add Styles import '@r00t80y/primary-navigation/dist/scss/core/index'; import '@r00t80y/primary-navigation/dist/scss/themes/clean'; // Add Script import { createPrimaryNavigation } from '@r00t80y/primary-navigation'; // Init Menu createPrimaryNavigation(document.querySelector('.navigation'), { init: function () { console.log(`It's works!`); } }); ``` #### HTML ```html ``` ## Default Options ```js { breakpointClose: 756, overflowHidden: true, init: false, open: false, close: false } ``` ### breakpointClose (`Number`) Close menu if browser window size is larger than `breakpointClose` ### overflowHidden (`Boolean`) Add `overflow:hidden` when the menu is open ### init (`Callback Function`) Called once during plug-in initialisation ### open (`Callback Function`) Called when opening a menu ### close `(Callback Function)` Called when the menu is closed ## Default Style Options ```scss $navigation-breakpoint: 756px; $navigation-panel-width: 100%; $navigation-panel-max-width: 400px; $navigation-panel-height: 100%; $navigation-panel-background: rgba(#fff, 0.95); $navigation-panel-transition-duration: 400ms; $navigation-button__icon-svg: true; $navigation-button__icon-color: #000; $navigation-button__icon-color--hover: false; ``` ## How to use with CDN? ```html ``` ## What's new? ### v1.3.5 - Docs updated - SCSS files moved to dist dir - Renamed init plugin function PrimaryNavigation -> createPrimaryNavigation ### v1.3.4 - Docs updated - Replaced "ResizeDelay" on "throttle-debounce" - Fix: Close menu on press "ESC" button ### v1.3.3 - Fix Bug: click ### v1.3.1 - Added default option `overflowHidden` ### v1.1.0 - SVG Icons ```scss $navigation-button__icon-svg: true !default; ``` - Restructuring the styles folder `./src/scss` ``` primary-navigation -- core ---- icons ------ css.scss ------ svg.scss ---- vars.scss ---- panel.scss ---- button.scss ---- index.scss -- themes ---- clean.scss ``` - Focus is off by default ```js const defaultOptions = { ... focus: false, ... }; ``` ## License [MIT](./LICENSE)