Skip to main content

Layout ❇️

Dasha provides multiple layout modes and sidebar color options, allowing you to customize the look and feel of your application with ease. Use the available classes to switch between modes or colors instantly.

Layout Modes​

1. Light Mode​

A clean and bright appearance, perfect for a modern interface.

light-modes

2. Dark Mode​

A dark theme for a comfortable viewing experience in low-light environments.

light-modes 
class="dark"

3. Monochrome Modes​

A minimal monochrome style for an elegant, distraction-free interface.

mono-modes 
class="mono"

1. Skin Bordered​

Sidebar with clear borders without shadow for a structured appearance.

light-modes

2. Skin Shadow​

Sidebar with a shadow effect, adding depth to the layout.

light-modes 
class="skin-shadow"

Layout Options​

Apply the following classes to the html<aside> element to change the sidebar color.

1. sidebar-default​

Sidebar with clear borders without shadow for a structured appearance.

light-modes 
<aside class="sidebar-default"></aside>

2. sidebar-primary​

Sidebar with a bold primary color.

light-modes 
<aside class="sidebar-primary"></aside>

3. sidebar-success​

Green sidebar for a positive, professional tone.

light-modes 
<aside class="sidebar-success"></aside>

4. sidebar-warning​

Yellow sidebar to draw attention to important areas.

light-modes 
<aside class="sidebar-warning"></aside>

5. sidebar-danger​

Red sidebar for warnings or critical information.

light-modes 
<aside class="sidebar-danger"></aside>

6. sidebar-info​

Light blue sidebar for informational purposes.

light-modes 
<aside class="sidebar-info"></aside>

7. sidebar-dark​

Dark sidebar for a strong, bold look.

light-modes 
<aside class="sidebar-dark"></aside>

Disabled Developer Tools Modes​

In production mode, you can disable browser developer tools access to enhance security and protect your application's code from inspection.
This feature helps prevent users from easily accessing source code, network requests, and other sensitive information.

How It Works​

When enabled, the system automatically blocks or restricts:

  • Right-click context menu
  • Keyboard shortcuts like Ctrl+Shift+I, F12, and Ctrl+U
  • Opening the browser’s developer console
light-modes

Collapsed Sidebar​

The Collapsed Sidebar feature allows you to minimize the sidebar for a cleaner and more focused workspace.
When enabled, the sidebar shrinks to icon-only mode, giving more space to the main content area.

How It Works​

  • Default: Sidebar is fully expanded.
  • Collapsed Mode: Sidebar displays only icons.
  • Useful for smaller screens or when you want to focus on the content.

Enable Collapsed Sidebar​

You can enable this feature by adding the sidebar-collapsed class to the sidebar container.

Example:

<aside class="sidebar-collapsed"></aside>
light-modes