Sidebar Appearance
-
sidebar_color
- For sidebar color there are 4 options given below: Values are in string."sidebar_color": "sidebar-white", choices: 'sidebar-white', 'sidebar-dark', 'sidebar-color', 'sidebar-transparent'
-
sidebar_type
- For sidebar type there are 3 options given below: Values are in array."sidebar_type": "sidebar-mini", choices: 'sidebar-hover', 'sidebar-mini', 'sidebar-boxed', 'sidebar-soft'
-
sidebar_menu_style
- For sidebar menu-style there are 5 options given below: Values are in string."sidebar_menu_style": "left-bordered", choices: 'navs-rounded', 'navs-rounded-all', 'navs-pills', 'navs-pill-all', 'left-bordered', 'navs-full-width'
There are two ways you can change the setting of your sidebar:
With the use of live customizer
You can work on sidebar using Live Customizer in three different ways:
-
You can change the sidebar with the property name and its value here by declaring property name and its values in file.
Database->Seeds->AppSettingSeeder.php
'value' => '{ "saveLocal": "", "storeKey": "huisetting", "setting": { "app_name": { "value" : "Hope UI"}, "theme_scheme_direction": { "value": "ltr" }, "theme_scheme": { "value": "light" }, } }',
php spark migrate:refresh
to save changes in database. -
You can change theme from your database for that open table with name
app_setting
.In the cloumn namevalue
change the value for variabletheme_scheme
for theme light or dark andtheme_scheme_direction
for direction.
Manual
You can change the sidebar layouts with a single action.
-
By adding some
classes
in sidebar parent section. Example is given bellow.
Sidebar Menu Color
If you wish to change the sidebar Menu color, you can follow the below action.
For example you have to set sidebar color as dark
then you will have to add sidebar-dark
class at data-toggle="main-sidebar"
of the sidebar.
<aside class=" ...... sidebar-dark" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-color" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-transparent" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-white" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
Sidebar Style
If you wish to change the sidebar style, you can follow the below action.
For example you have to set sidebar style as mini
then you will have to add sidebar-mini
class at data-toggle="main-sidebar"
of the sidebar.
<aside class=" ...... sidebar-mini" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-hover" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-boxed" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... sidebar-soft" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
Sidebar Active Menu Style
If you wish to change the sidebar active menu style, you can follow the below action.
For example you have to set sidebar active as rounded
then you will have to add navs-rounded
class at data-toggle="main-sidebar"
of the sidebar.
<aside class=" ...... navs-rounded" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... navs-rounded-all" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... navs-pill" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... navs-pill-all" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... left-bordered" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>
<aside class=" ...... navs-full-width" data-toggle="main-sidebar" data-sidebar="responsive">
.......
</aside>