Vertical

  1. Docs
  2. Vertical

How to use pre-built layouts?

You can change the template as per your requirements. To configure it, we will use reducer.js. you can find the +layout.svelte file in /src/routes/ folder.

Theme Options

Each of the theme configuration options is provided Below, you can change their values as per you need in variable located in src/routes/+layout.svelte file. 

let layoutType = "vertical";

Go to src/Components/Common/RightSidebar.svelte file. 

let leftSidebarType = "dark";
let layoutModeType = "light";
let layoutWidthType = "lg";
let layoutPositionType = "fixed";
let topbarThemeType = "light";
let leftsidbarSizeType = "lg";
let leftSidebarViewType = "default";
let leftSidebarTypes = "gradient";
let leftSidebarImageTypes = "none";

Layout Width

image layoutWidthType = 'fluid';
image layoutWidthType = 'boxed';

Layout Position

layoutPositionType = 'fixed';
layoutPositionType = 'scrollable';

Topbar Colors

image topbarThemeType = 'light';
image topbarThemeType = 'dark';

Sidebar Sizes

image leftsidbarSizeType = 'lg';
image leftsidbarSizeType = 'md';
image leftsidbarSizeType = 'sm';
image leftsidbarSizeType = 'sm-hover';

Sidebar View

image leftSidebarViewType = 'default';
image leftSidebarViewType = 'detached';

Sidebar Colors

image leftSidebarType = 'light';
image leftSidebarType = 'dark';
image leftSidebarTypes = 'gradient';
image leftSidebarTypes = 'gradient-2';
image leftSidebarTypes = 'gradient-3';
image leftSidebarTypes = 'gradient-4';

Sidebar Images

image leftSidebarImageTypes = 'none';
image leftSidebarImageTypes = 'img-1';
image leftSidebarImageTypes = 'img-2';
image leftSidebarImageTypes = 'img-3';
image leftSidebarImageTypes = 'img-4';