Tnagele SideBar: Fancy Responsive Sidebar (Pure HTML, JS) + Cordova + Demos (Browser-APK-IOS-Windows)

Tnagele SideBar is Fancy vertical navigation menu with pure HTML, CSS and JQuery. Cross platform that compatible with almost all major browsers and devices. Colorful with Overlay and push effect that ready to be used in Web Apps. (i.e: Admin Panel). Web version as well as Cordova version is included, so it can be complied to all format supported by Cordova (including: APK, IOS, and windows).

Documentation

1. Quick Start
Find the Starter:
Once you purchase, download and decompress the package, you will see three folders have been made for you: Starter, CordovaReady and Web Demo.
    Starter: to provide you an easy stating up with minimum contents so you will add you own contents.
   CordovaReady: Full Cordova example that handles cordova staring (device ready) and loads the contest afterwards.
   Web Demo: Same demo provide online (Tnagele Sidebar Live Demo) are also shipped.

 

2. Tnagele Sidebar
Use Starter folder (index.html and index-rtl.html) as starting points to follow the instruction below.
a. Set Collapse type:
Two collapse types are available (see the demo), to set a type add class: collapse-lg or collapse-sm
Find the line below:
body class=”sidebar-mini layout-fixed layout-navbar-fixed collapse-lg “

b. Set Theme Color: Dark – Light
Add class : sidebar-dark-tnagele-COLOR or sidebar-light-tnagele-COLOR
Example:
div class=”main-sidebar sidebar-no-expand sidebar-light-tnagele-pink”

c. Set Front Color
Add class : div class=”main-sidebar sidebar-no-expand sidebar-light-tnagele-COLORNAME
Example:
div class=”main-sidebar sidebar-no-expand sidebar-light-tnagele-pink
Available Names:
white , light , dark , primary , secondary , success , info , warning , danger  ,navy , olive , lime , fuchsia , maroon , blue , indigo , purple , pink , red , orange , yellow , green , teal , cyan , gray , graydark 

3. Legacy AdminLTE Sidebar
a. Set Flat Type:
AdminLTE sidebar add class: nav-flat or without (for Tnagele sidebar always use nav-flat)
Example:
ul class=”nav nav-pills nav-sidebar flex-column nav-flat

a. Set Theme Color: Dark – Light
Add class : sidebar-dark-COLOR or sidebar-light-COLOR
Example:
div class=”main-sidebar sidebar-no-expand sidebar-light-pink”

b. Set Front Color:
Add class : div class=”main-sidebar sidebar-no-expand sidebar-light-COLORNAME
Example:
div class=”main-sidebar sidebar-no-expand sidebar-light-pink
All available colors are listed above.

 

4. Header
a. Set Header Type: Fixed or Not Fixed
If Fixed, Header stays in place while the user is scrolling the web page.
add class: layout-navbar-fixed
Example:
body class=”sidebar-mini layout-fixed layout-navbar-fixed collapse-lg “

b. Set Header Color:
For Background:
add class : bg-COLORNAME 
Example:
nav class=”main-header navbar navbar-expand navbar-text-light bg-info
All available colors are listed above.

For Text Color: Dark or Light
add class : navbar-text-light or navbar-text-dark 
Example:
nav class=”main-header navbar navbar-expand navbar-text-light bg-info”

5. Footer
a. Set Footer Type: Fixed or Not Fixed
add class: layout-footer-fixed
Example:
body class=”sidebar-mini layout-fixed layout-navbar-fixed collapse-lg sidebar-collapse layout-footer-fixed

b. Set Footer Color
For Background:
add class : bg-COLORNAME 
Example:
footer class=”main-footer bg-red navbar-text-light”

For Text Color: Dark or Light
add class : navbar-text-light or navbar-text-dark 
Example:
footer class=”main-footer bg-red navbar-text-light”

6. RTL Support & Any Fonts
Index-rtl.html is provided to RTL languages. To Change the fonts activate the commented style as use you own font styles:

<style>
@import url(‘https://fonts.googleapis.com/css?family=Courier+Prime|Roboto+Mono&display=swap’);
* {font-family: ‘Roboto Mono’, monospace;}     </style>

 

7. Cordova Folder:
In case you want to build your project on other types (i.e. APK, APPX, IOS..etc) using cordova, this folder is ready to use. Here is an APK demo for Tnagle Sidebar that has been created using Cordova.

 

Support

 

Please contact us at: [email protected]