Styleguide | UI Elements | Whimsy - SaaS Website Template

Base UI

Sidebar

Documentation

Available Parameters

Parameter	Type	Description
`foldable`	Boolean Default : `false`	Set `true` value for `foldable` parameter to set the sidebar foldable (minimizable).
`activeMenu`	Active Menu Object	Set configuration for activated menu in sidebar. Example: `{ "menu" : "base-ui", "subMenu" : "accordions-collapse" }`
`sidebarMenu`	Array of Menu Item required	Set list of Menu items. Example: [ { "type" : "category", "title" : "Component", }, { "id" : "base-ui", "type" : "item", "link" : "javascript:void()", "title" : "Base UI", "icon" : "ic-menu-base-ui", "subMenu" : [ { "id" : "accordions-collapse", "link" : "javascript:void()", "title" : "Accordions & Collapse", }, ] }, { "id" : "widgets", "type" : "item", "link" : "javascript:void()", "title" : "Widgets", "icon" : "ic-menu-widgets", } ]

Starter Kit Codes

Starter Kit Code

 {# include components/sidebar  #}
 {% include "../../components/sidebar.twig", with {
    	foldable		: false,
	activeMenu		: false,
	sidebarMenu 	: [
		{
			type 	: 'category',
			title 	: 'Navigation',
		},
		{
			id 		: 'dashboard',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Dashboard',

			icon		: 'ic-menu-dashboard',

			subMenu	: [],
		},

		{
			type 	: 'category',
			title 	: 'App',
		},
		{
			id		: 'calendar',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Calendar',

			icon		: 'ic-menu-calendar',
		},
		{
			id		: 'chat',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Chat',

			icon		: 'ic-menu-chat',
		},
		{
			id		: 'crm',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'CRM',

			icon		: 'ic-menu-crm',
		},
		{
			id 		: 'email',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Email',

			icon		: 'ic-menu-email',

			subMenu	: [],
		},
		{
			id 		: 'e-commerce',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'E-commerce',

			icon		: 'ic-menu-e-commerce',

			subMenu	: [],
		},
		{
			id 		: 'online-course',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Online Course',

			icon		: 'ic-menu-online-course',

			subMenu	: [],
		},
		{
			id 		: 'file-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'File Management',

			icon		: 'ic-menu-file-management',
		},
		{
			id 		: 'social-media',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Social Media',

			icon		: 'ic-menu-social-media',
		},
		{
			id 		: 'project-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Project Management',

			icon		: 'ic-menu-project-management',
		},
		{
			id 		: 'support-desk',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Support Desk',

			icon		: 'ic-menu-support-desk',
		},

		{
			type 	: 'category',
			title 	: 'Styleguide',
		},
		{
			id		: 'color-style',
			type		: 'item',

			link		: 'styleguide/color-style.html',
			title	: 'Color & Style',

			icon		: 'ic-menu-color-style',
		},
		{
			id		: 'typography',
			type		: 'item',

			link		: 'styleguide/typography.html',
			title	: 'Typography',

			icon		: 'ic-menu-typography',
		},

		{
			type 	: 'category',
			title 	: 'Component',
		},
		{
			id		: 'base-ui',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Base UI',

			icon		: 'ic-menu-base-ui',

			subMenu	: [],
		},
		{
			id		: 'widgets',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Widgets',

			icon		: 'ic-menu-widgets',
		},
		{
			id		: 'charts',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Charts',

			icon		: 'ic-menu-charts',
		},
		{
			id		: 'form',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Form',

			icon		: 'ic-menu-form',
		},
		{
			id		: 'tables',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Tables',

			icon		: 'ic-menu-tables',
		},
	]
 } %}

Starter Kit Code

 {# include components/sidebar  #}
 {% include "../../components/sidebar.twig", with {
    	foldable		: false,
	activeMenu		: {
		menu		: 'calendar',
	},
	sidebarMenu 	: [
		{
			type 	: 'category',
			title 	: 'Navigation',
		},
		{
			id 		: 'dashboard',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Dashboard',

			icon		: 'ic-menu-dashboard',

			subMenu	: [],
		},

		{
			type 	: 'category',
			title 	: 'App',
		},
		{
			id		: 'calendar',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Calendar',

			icon		: 'ic-menu-calendar',
		},
		{
			id		: 'chat',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Chat',

			icon		: 'ic-menu-chat',
		},
		{
			id		: 'crm',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'CRM',

			icon		: 'ic-menu-crm',
		},
		{
			id 		: 'email',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Email',

			icon		: 'ic-menu-email',

			subMenu	: [],
		},
		{
			id 		: 'e-commerce',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'E-commerce',

			icon		: 'ic-menu-e-commerce',

			subMenu	: [],
		},
		{
			id 		: 'online-course',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Online Course',

			icon		: 'ic-menu-online-course',

			subMenu	: [],
		},
		{
			id 		: 'file-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'File Management',

			icon		: 'ic-menu-file-management',
		},
		{
			id 		: 'social-media',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Social Media',

			icon		: 'ic-menu-social-media',
		},
		{
			id 		: 'project-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Project Management',

			icon		: 'ic-menu-project-management',
		},
		{
			id 		: 'support-desk',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Support Desk',

			icon		: 'ic-menu-support-desk',
		},

		{
			type 	: 'category',
			title 	: 'Styleguide',
		},
		{
			id		: 'color-style',
			type		: 'item',

			link		: 'styleguide/color-style.html',
			title	: 'Color & Style',

			icon		: 'ic-menu-color-style',
		},
		{
			id		: 'typography',
			type		: 'item',

			link		: 'styleguide/typography.html',
			title	: 'Typography',

			icon		: 'ic-menu-typography',
		},

		{
			type 	: 'category',
			title 	: 'Component',
		},
		{
			id		: 'base-ui',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Base UI',

			icon		: 'ic-menu-base-ui',

			subMenu	: [],
		},
		{
			id		: 'widgets',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Widgets',

			icon		: 'ic-menu-widgets',
		},
		{
			id		: 'charts',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Charts',

			icon		: 'ic-menu-charts',
		},
		{
			id		: 'form',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Form',

			icon		: 'ic-menu-form',
		},
		{
			id		: 'tables',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Tables',

			icon		: 'ic-menu-tables',
		},
	]
 } %}

Starter Kit Code

 {# include components/sidebar  #}
 {% include "../../components/sidebar.twig", with {
    	foldable		: false,
	activeMenu		: {
		menu		: 'base-ui',
		subMenu	: 'accordions-collapse'
	},
	sidebarMenu 	: [
		{
			type 	: 'category',
			title 	: 'Navigation',
		},
		{
			id 		: 'dashboard',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Dashboard',

			icon		: 'ic-menu-dashboard',

			subMenu	: [],
		},

		{
			type 	: 'category',
			title 	: 'App',
		},
		{
			id		: 'calendar',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Calendar',

			icon		: 'ic-menu-calendar',
		},
		{
			id		: 'chat',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Chat',

			icon		: 'ic-menu-chat',
		},
		{
			id		: 'crm',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'CRM',

			icon		: 'ic-menu-crm',
		},
		{
			id 		: 'email',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Email',

			icon		: 'ic-menu-email',

			subMenu	: [],
		},
		{
			id 		: 'e-commerce',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'E-commerce',

			icon		: 'ic-menu-e-commerce',

			subMenu	: [],
		},
		{
			id 		: 'online-course',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Online Course',

			icon		: 'ic-menu-online-course',

			subMenu	: [],
		},
		{
			id 		: 'file-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'File Management',

			icon		: 'ic-menu-file-management',
		},
		{
			id 		: 'social-media',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Social Media',

			icon		: 'ic-menu-social-media',
		},
		{
			id 		: 'project-management',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Project Management',

			icon		: 'ic-menu-project-management',
		},
		{
			id 		: 'support-desk',
			type 	: 'item',

			link		: 'javascript:void()',
			title 	: 'Support Desk',

			icon		: 'ic-menu-support-desk',
		},

		{
			type 	: 'category',
			title 	: 'Styleguide',
		},
		{
			id		: 'color-style',
			type		: 'item',

			link		: 'styleguide/color-style.html',
			title	: 'Color & Style',

			icon		: 'ic-menu-color-style',
		},
		{
			id		: 'typography',
			type		: 'item',

			link		: 'styleguide/typography.html',
			title	: 'Typography',

			icon		: 'ic-menu-typography',
		},

		{
			type 	: 'category',
			title 	: 'Component',
		},
		{
			id		: 'base-ui',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Base UI',

			icon		: 'ic-menu-base-ui',

			subMenu	: [
				{
					id		: 'accordions-collapse',
					link		: 'javascript:void()',
					title	: 'Accordions & Collapse',
				},
				{
					id		: 'alerts',
					link		: 'javascript:void()',
					title	: 'Alerts',
				},
				{
					id		: 'avatar',
					link		: 'javascript:void()',
					title	: 'Avatar',
				},
				{
					id		: 'badge',
					link		: 'javascript:void()',
					title	: 'Badge',
				},
				{
					id		: 'breadcrum',
					link		: 'javascript:void()',
					title	: 'Breadcrum',
				},
				{
					id		: 'button',
					link		: 'javascript:void()',
					title	: 'Button',
				},
				{
					id		: 'calendar',
					link		: 'javascript:void()',
					title	: 'Calendar',
				},
				{
					id		: 'card',
					link		: 'javascript:void()',
					title	: 'Card',
				},
				{
					id		: 'carousel',
					link		: 'javascript:void()',
					title	: 'Carousel',
				},
				{
					id		: 'dropdown',
					link		: 'javascript:void()',
					title	: 'Dropdown',
				},
				{
					id		: 'list-group',
					link		: 'javascript:void()',
					title	: 'List Group',
				},
				{
					id		: 'modal',
					link		: 'javascript:void()',
					title	: 'Modal',
				},
				{
					id		: 'navs-tab',
					link		: 'javascript:void()',
					title	: 'Navs & Tab',
				},
				{
					id		: 'pagination',
					link		: 'javascript:void()',
					title	: 'Pagination',
				},
				{
					id		: 'range-slider',
					link		: 'javascript:void()',
					title	: 'Range Slider',
				},
				{
					id		: 'tooltip',
					link		: 'javascript:void()',
					title	: 'Tooltip',
				},
				{
					id		: 'rating',
					link		: 'javascript:void()',
					title	: 'Rating',
				},
			]									
		},
		{
			id		: 'widgets',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Widgets',

			icon		: 'ic-menu-widgets',
		},
		{
			id		: 'charts',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Charts',

			icon		: 'ic-menu-charts',
		},
		{
			id		: 'form',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Form',

			icon		: 'ic-menu-form',
		},
		{
			id		: 'tables',
			type		: 'item',

			link		: 'javascript:void()',
			title	: 'Tables',

			icon		: 'ic-menu-tables',
		},
	]
 } %}