# Get started
just define menu items to make a simple navigation
[see example](resources/simple_nav.html)
```
const def = {
nav:{
menu:[
{
title:"menu 1",
onclick:function(mainarea){mainarea.innerHTML = '
';},
default:true
// the menu item will be executed when its default property is true
}
]
}
};
// bs_handler will be provided
window.addEventListener("load",function(){
bs_handler.displayNavBar(def.nav);
});
```
next - add brand
# Add a brand
We can add the **brand** property to definition.
The brand can have **title**, **href** and **icon** properties.
The icon can be provided as a file or as an inner html.
[see example](resources/with_brand.html)
```
nav:{
brand:{
title:"Awesome App",
href:"#",
icon:{html:''}
//icon:{src:"circle.svg"}
},
menu:[...]
}
```
prev - get startednext - add color
# Get colored
We can add colors by definition.
**colorpole** property is generally for navbar and can be 'light' or 'dark.'
The default value of colorpole is 'light.'
**classes** property will hold the definitions for some elements.
The class names in **classes.navbar** will reflects in navbar.
[see example](resources/get_colored.html)
```
nav:{
colorpole:"dark",
classes:{
navbar:["bg-dark"]
},
brand:{...},
menu:[...]
}
```
prev -add brandnext - add dropdown menu
# Add dropdown
We can add dropdown menu.
Add a menu item with "dropdown" as **type**.
And add the dropdown items in **dropdowns**.
The dropdown items are like menu items.
[see example](resources/add_dropdown.html)
```
nav:{
colorpole:"dark",
classes:{...},
brand:{...},
menu:[
{title:"menu 1",...},
{title:"default menu",...},
{
type:"dropdown",
title:"dropdown menu",
dropdowns:[
{
title:"dropdown 1",
onclick:function(area){area.innerHTML = 'dropdown 1';}
},
{
title:"dropdown 2",
onclick:function(area){area.innerHTML = 'dropdown 2';}
}
]
}
]
}
```
prev - add colornext - add sidebar
# Nav
## Properties
|name|description|
|:--|:--|
|brand|defines brand title and icon|
|colorpole|defines navbar text color, "light" or "dark" is valid value and default value is "light"|
|classes|defines classes of each element|
|menu|defines menu, array of menu items|
```
const def_nav = {
brand:{},
colorpole:"light",
classes:{},
menu:[]
}
```
## Full example
```
const def_nav = {
brand:{
icon:{html:""},
title:"Title",
href:"#"
},
colorpole:"dark",
classes:{
navbar:["bg-dark"],
brand:[],
menu_li:[],
menu_a:["text-warning"],
dropdownmenu:["bg-transparent"],
dropdownitem:[],
spinner:["text-danger"]
},
menu:[
{
type:"executable",
title:"menu 1",
classes:{li:[],a:[]},
onclick:function(mainarea){mainarea.innerHTML = "test 1";},
default:true
},
{
type:"dropdown",
title:"dropdown",
classes:{li:[],a:[]},
dropdowns:[
{
type:"executable",
title:"dropdown1",
classes:{a:["bg-danger"]},
onclick:function(mainarea){
mainarea.innerHTML = "dropdown 1";
}
},
{
type:"executable",
title:"dropdown2",
classes:{a:["bg-warning"]},
onclick:function(mainarea){
mainarea.innerHTML = "dropdown 2";
}
}
]
}
]
};
```
# Brand
Brand will be defined in nav.
## Properties
|name|description|
|:--|:--|
|title|defines brand title|
|href|defines hyperlink of brand anchor|
|icon|defines brand icon, can have "html" property or "src" property|
```
brand:{
title:"brand title",
href:"#",
icon:{html:""}
}
```
## icon can be defined by "src"
```
brand:{
title:"brand title",
href:"#",
icon:{src:"icon/myicon.png"}
}
```
# Classes for Nav
Classes for Nav will be defined in nav.
## Properties
|name|description|
|:--|:--|
|navbar|defines classes for navbar|
|brand|defines classes for brand|
|menu_li|defines classes for li element in menu item|
|menu_a|defines classes for anchor element in menu item|
|dropdownmenu|defines classes for dropdownmenu|
|dropdownitem|defines classes for dropdownitem|
|spinner|defines classes for spinner|
```
classes:{
navbar:["bg-dark"],
brand:[],
menu_li:[],
menu_a:["text-warning"],
dropdownmenu:["bg-transparent"],
dropdownitem:[],
spinner:["text-danger"]
}
```
# Menu item
Menu item will be defined in nav.
## Properties
|name|description|
|:--|:--|
|type|defines menu type, valid values are "executable" and "dropdown", default value is "executable"|
|title|defines menu title|
|classes|defines classes for menu of itself, classes of list item element and anchor element in menu item|
|onclick|defines eventhandler for clicking menu item, ```function(mainareaelement){}```|
|default|defines default status of menu item, if true, the menu will be clicked when navigation displayed. default value is false|
|dropdowns|defines dropdownitems for menu item. this is used when the type of the menu is "dropdown."|
```
menu:[
{
title:"menu 1",
onclick:function(area){area.innerHTML = "menu 1";}
},
{
title:"menu 2",
onclick:function(area){area.innerHTML = "menu 2";}
}
]
```
```
menu:[
{
type:"executable",
title:"menu 1",
classes:{li:[],a:[]},
onclick:function(mainarea){mainarea.innerHTML = "test 1";},
default:true
},
{
type:"dropdown",
title:"dropdown",
classes:{li:[],a:[]},
dropdowns:[
{
title:"dropdown1",
classes:{a:["bg-danger"]},
onclick:function(mainarea){
mainarea.innerHTML = "dropdown 1";
}
},
{
title:"dropdown2",
classes:{a:["bg-warning"]},
onclick:function(mainarea){
mainarea.innerHTML = "dropdown 2";
}
}
]
}
]
```
# Sidebar
Sidebar definition will be required in ```bs_handler.displaySideBar()``` as parameter.
## Properties
|name|description|
|:--|:--|
|menu|defines menu items. basically same as nav menu but sidebar menu can have icon property.|
|classes|defines classes for sidebar.|
```
const sidebardef = {
menu:[],
classes:{}
};
```
## Full example
```
const sidebardef = {
menu:[
{
title:"side menu 1",
icon:{html:""},
classes:{li:[],a:[]},
onclick:function(mainarea){mainarea.innerHTML = "hello from side menu 1";},
default:true
},
{
title:"side menu 2",
icon:{html:""},
classes:{li:[],a:[]},
onclick:function(mainarea){mainarea.innerHTML = "hello from side menu 2";}
}
],
classes:{
sidebar:["bg-dark"],menu_ul:[],spinner:[],menu_li:[],menu_a:[]
}
};
```
# Classes for Sidebar
Classes for Sidebar will be defined in sidebar.
## Properties
|name|description|
|:--|:--|
|sidebar|defines classes for sidebar|
|menu_ul|defines classes for ul element in menu|
|menu_li|defines classes for li element in menu item|
|menu_a|defines classes for anchor element in menu item|
|spinner|defines classes for spinner|
```
classes:{
sidebar:["bg-dark"],
spinner:[],
menu_ul:[],
menu_li:[],
menu_a:[]
}
```
# Modal
Sidebar definition will be required in ```bs_handler.displayModal()``` as parameter.
## Properties
|name|description|
|:--|:--|
|backdrop|defines backdrop type. valid values are true, false, and "static."|
|header|defines header of modal form. "title" property is available for header.|
|body|defines body of modal form. "text" property is available for body.|
|closebutton|defines closebutton of modal form. "text" property is available for closebutton.|
|classes|defines classes for modal form.|
```
const modaldef = {
backdrop:"static",
classes:{
dialog:[],
document:["modal-lg","bg-transparent"],
content:["bg-danger"],
header:["d-none"],
title:[],
body:["bg-dark"],
footer:["d-none"],
closebutton:[]
},
header:{title:"header title"},
body:{text:"this is body text"},
closebutton:{text:"close"}
};
```
# Classes for Modal
Classes for Modal will be defined in modal.
## Properties
|name|description|
|:--|:--|
|dialog|defines classes for dialog|
|document|defines classes for document role element|
|header|defines classes for header|
|title|defines classes for header title|
|body|defines classes for body|
|footer|defines classes for footer|
|closebutton|defines classes for closebutton|
```
classes:{
dialog:[],
document:["modal-lg","bg-transparent"],
content:["bg-danger"],
header:["d-none"],
title:[],
body:["bg-dark"],
footer:["d-none"],
closebutton:[]
}
```