Layout Configuration

Type Definition

interface LayoutConfig {
  /**
   * Sidebar configuration
   */
  sidebar?: {
    width?: number;
    position?: 'left' | 'right';
  };

  /**
   * Title bar configuration
   */
  titleBar?: {
    height?: number;
    showWindowControls?: boolean;
    draggable?: boolean;
  };
}

Width

Set sidebar width (in pixels):

layout: {
  sidebar: {
    width: 200,  // Default: 180
  },
},

Position

Set sidebar position:

layout: {
  sidebar: {
    position: 'left',  // 'left' | 'right', default: 'left'
  },
},

Title Bar Configuration

Height

Set title bar height (in pixels):

layout: {
  titleBar: {
    height: 48,  // Default: 40
  },
},

Window Controls

Show or hide window control buttons (minimize, maximize, close):

layout: {
  titleBar: {
    showWindowControls: true,  // Default: true
  },
},

Draggable Area

Enable or disable window dragging from the title bar:

layout: {
  titleBar: {
    draggable: true,  // Default: true
  },
},

Dragging requires decorations: false in tauri.conf.json.

Layout Diagram

┌─────────────────────────────────────────────────┐
│                   TitleBar (40px)               │
│  [Logo] [App Name]              [Min][Max][×]   │
├────────────┬────────────────────────────────────┤
│            │                                    │
│  Sidebar   │         Main Content               │
│  (180px)   │                                    │
│            │                                    │
│  [Nav 1]   │                                    │
│  [Nav 2]   │                                    │
│  [Nav 3]   │                                    │
│            │                                    │
│            │                                    │
│            │                                    │
└────────────┴────────────────────────────────────┘

Complete Example

layout: {
  sidebar: {
    width: 220,
    position: 'left',
  },
  titleBar: {
    height: 48,
    showWindowControls: true,
    draggable: true,
  },
},

layout: {
  sidebar: {
    width: 200,
    position: 'right',  // Sidebar on the right
  },
},

Layout result:

┌─────────────────────────────────────────────────┐
│                   TitleBar                       │
├────────────────────────────────────┬────────────┤
│                                    │            │
│         Main Content               │  Sidebar   │
│                                    │            │
│                                    │            │
└────────────────────────────────────┴────────────┘

Hiding Window Controls

In some scenarios (like using native system title bar), you may want to hide window controls:

layout: {
  titleBar: {
    showWindowControls: false,
  },
},

If window controls are hidden and decorations: false in tauri.conf.json, users won't be able to close the window.