Layout API

Neon Theme comes with pre-defined functions to handle layout behaviors. You have tens of options to make your theme layout look differently. In this page, you are going to see how you can show, hide, remove or add layout elements. In order to customize the layer JS file neon-api.js is required to load.


Go to API Functions

Sidebar Collapsing

Its easy to use, you just have to call one function toggle_sidebar_menu(animate).

Toggle Sidebar Force Show Sidebar Force Hide Sidebar

With Animation

You may apply animation to these functions by sending animate parameter as true, see it in action:

Toggle Sidebar w/ Animation Force Show Sidebar Force Hide Sidebar

Incorporating Chat API

This functions can be used only when you have included Chat on your theme.

Toggle Chat + Sidebar Toggle Chat + Sidebar w/ Animation

For more options about Chat API and see how to implement it click here to read more.

See how its implemented

Code for Toggle Sidebar
toggle_sidebar_menu(false);

Code for Force Show Sidebar
show_sidebar_menu(false);

Code for Force Hide Sidebar
hide_sidebar_menu(false);

Code for Toggle Sidebar w/ Animation
toggle_sidebar_menu(true);

Code for Force Show Sidebar (animation)
show_sidebar_menu(true);

Code for Force Hide Sidebar (animation)
hide_sidebar_menu(true);


Markup

Layout Markup is applied for one reason: To enable the sidebar collapsing/expanding. The symbol next to the logo applies this markup:

<!-- logo collapse icon -->
<div class="sidebar-collapse">
<a href="#" class="sidebar-collapse-icon with-animation"><!-- add class "with-animation" if you want sidebar to have animation during expanding/collapsing transition -->
<i class="entypo-menu"></i>
</a>
</div>

If you remove this markup, users will not be able to handle the sidebar visibility, its up to you to decide whether to insert or remove this feature.


API Functions

Function Name Description and Usage Details

show_sidebar_menu(animate)

Shows left sidebar (if not already shown) and if you have specified the parameter animate as true will apply smooth animation on transition.

hide_sidebar_menu(animate)

Hide left sidebar (if not already hidden) and if you have specified the parameter animate as true will apply smooth animation on transition.

toggle_sidebar_menu(animate)

Will use the two above functions, but firstly it will decide on their current state. The animated parameter will simply be passed to the respective functions.