Your content goes here

``` #### Vanilla JS ```js document.addEventListener('DOMContentLoaded', function() { // iconbar entry HpvMenu.iconbar.registerEntry({ 'parentCls': 'icon-bar-top', 'innerHtml': '', 'tooltiptext': 'Central do Usuário', 'onClick': function (event) { // mixin connects components HpvMenu.mixin.handleIconBarClick(event, 'home'); } }); // sidebar entry HpvMenu.sidebar.registerEntry({ 'id': 'home', 'title': 'My Home Menu', 'overlay': true, 'sortItens': true, 'search': { 'enabled': true, 'mode': 'fuzzy', 'fields': ['title'], 'global': false // Set to true to include in global search }, 'itens': [ { 'type': 'entry', 'title': 'Item 1' }, { 'type': 'entry', 'title': 'Item 2' } ], 'onItemClick': function (event, entry, item) { console.log('Item is clicked: ', item); } }); }); ``` ## Themes Hpvm currently has 2 themes, the default and Dark. To use Dark theme simply import theme css after hpvm css file: ```html ``` ## Methods The Hpvm API offers a couple of methods to control components isolated or as a group ( mixin ). #### HpvMenu.iconbar.registerEntry(entry) Register a new iconbar entry. ```js HpvMenu.iconbar.registerEntry({ 'parentCls': 'icon-bar-bottom', 'classes': ['danger'], 'innerHtml': '', 'tooltiptext': 'Exit', 'onClick': function (event) { console.log('exit clicked'); } }); ``` #### HpvMenu.iconbar.setActive(el) Set programmatically an entry(el) of iconbar as active. ```js let iconbar = document.getElementsByClassName('icon-bar')[0]; let firstAnchor = iconbar.getElementsByTagName('a')[0]; HpvMenu.iconbar.setActive(firstAnchor); ``` #### HpvMenu.iconbar.removeLastActive() Deactivate any active entry on iconbar. ```js HpvMenu.iconbar.removeLastActive(); ``` #### HpvMenu.sidebar.registerEntry(entry) Register a new sidebar entry. ```js HpvMenu.sidebar.registerEntry({ 'id': 'dashboard', 'title': 'Dashboard', 'overlay': true, 'sortItens': true, 'search': true, 'itens': [], 'onItemClick': function (event, entry, item) { console.log("Item clicked: ", item); } }); ``` #### HpvMenu.sidebar.show(id) Show sidebar with rendered content from an registered entry. ```js HpvMenu.sidebar.show('dashboard'); ``` #### HpvMenu.sidebar.close() Close sidebar if openned. ```js HpvMenu.sidebar.close(); ``` #### HpvMenu.overlay.show( isIconBarVisible, isSidebarVisible ) Show overlay above user content, parameters help calculate the initial position. ```js HpvMenu.overlay.show(true, false); ``` #### HpvMenu.overlay.hide() Hide overlay if active. ```js HpvMenu.overlay.hide(); ``` #### HpvMenu.overlay.showLoading( isIconBarVisible, isSidebarVisible ) Show overlay above user content with an spinning icon. Parameters help calculate the initial position. ```js HpvMenu.overlay.showLoading(true, false); ``` #### HpvMenu.overlay.hideLoading() Hide overlay and spinning if active. ```js HpvMenu.overlay.hide(); ``` #### HpvMenu.mixin.closeSideBar() Closes sidebar, hides overlay and remove iconbar active entries. ```js HpvMenu.mixin.closeSideBar(); ``` #### HpvMenu.mixin.handleIconBarClick( event, id ) Set iconbar entry as active, opens sidebar and display the overlay. Can be used on while registering iconbar entry with 'onClick' event handler. ```js HpvMenu.iconbar.registerEntry({ 'parentCls': 'icon-bar-top', 'innerHtml': '', 'tooltiptext': 'Bookmarks', 'onClick': function (event) { HpvMenu.mixin.handleIconBarClick(event, 'bookmarks'); } }); ``` #### HpvMenu.mixin.setIconBarActive( el ) Wrapper around iconbar.setIconBarActive, closing the sidebar if users click on an open entry. ```js let iconbar = document.getElementsByClassName('icon-bar')[0]; let firstAnchor = iconbar.getElementsByTagName('a')[0]; HpvMenu.mixin.setIconBarActive( firstAnchor ); ``` ## Global Search HPVM-Menu now supports global search functionality that allows searching across multiple sidebars simultaneously. ### Enabling Global Search To enable global search for a sidebar, set `global: true` in the search configuration: ```js HpvMenu.sidebar.registerEntry({ 'id': 'my_sidebar', 'title': 'My Sidebar', 'search': { 'enabled': true, 'global': true, // Enable global search 'mode': 'fuzzy', 'fields': ['title', 'tags'] }, 'itens': [ // ... your items ] }); ``` ### Using Smart Search (Recommended) Use the smart search function that automatically chooses between local and global search based on each sidebar's configuration: ```html ``` ### Using Global Search Directly If you want to force global search for all sidebars: ```html ``` ### Using Local Search Only For local search within the current sidebar only: ```html ``` ### Smart Search Behavior The smart search functions (`filterFnSmart` and `filterFnFuzzySmart`) automatically choose the appropriate search method based on each sidebar's configuration: - **If `search.global=true`**: Uses global search (searches across all sidebars with global search enabled) - **If `search.global=false` or not set**: Uses local search (searches only within the current sidebar) This provides the best of both worlds: - **Global-enabled sidebars** participate in cross-sidebar search - **Local-only sidebars** maintain their independent search functionality ### Global Search Features - **Cross-sidebar search**: Results include items from all sidebars with `search.global=true` - **Grouped results**: Results are organized by sidebar with clear labels - **Smart navigation**: Click any result to automatically switch to that sidebar - **Path information**: Shows hierarchical path for nested items - **Highlight on selection**: Selected items are highlighted when navigated to - **No results message**: Shows "Nenhum item encontrado." when no matches are found ### Local Search Features - **Current sidebar only**: Searches only within the active sidebar - **Fast and focused**: Optimized for searching within a specific context - **Preserves sidebar state**: Doesn't interfere with other sidebars - **No results message**: Shows "Nenhum item encontrado." when no matches are found ### Example See the [Global Search Example](examples/sidebar-global-search/) for a complete implementation. ### TODO - [ ] Responsive layout ( Missing mobile yet ) - [ ] Customize scrollbar - [ ] Expansive iconbar as dropdown item - [ ] Stick section label on scroll ### Learn more ( In Progress ) - [Tutorial] - [Options] - [Add-ons] - [API] ### Licence The Hpvm-Menu code is licensed under the [Apache-2.0 licence](https://raw.githubusercontent.com/drecchia/hpvm-menu/master/LICENSE).
### Similar projects: - [MMenu.js](https://mmenujs.com/) - [HcOffcanvasNav](https://github.com/somewebmedia/hc-offcanvas-nav) - [OffSide.js](https://github.com/toomuchdesign/offside) - [SidebarJS](https://github.com/SidebarJS/sidebarjs)