.

demo/src/index.ts

@@ -21,7 +21,7 @@ export default class SchmancyDemo extends $LitElement() {
 						<demo-nav> </demo-nav>
 					</schmancy-nav-drawer-navbar>
 					<schmancy-nav-drawer-content class="pl-2">
-						<schmancy-nav-drawer-appbar class="py-2">
+						<schmancy-nav-drawer-appbar .toggler=${true} class="py-2">
 							<schmancy-typography>Title</schmancy-typography>
 						</schmancy-nav-drawer-appbar>
 						<schmancy-surface type="surface" rounded="left">

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.0.267",
+	"version": "0.0.268",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"repository": {

src/nav-drawer/appbar.ts

@@ -6,7 +6,7 @@ import {
 	TSchmancyDrawerNavbarMode,
 } from '@schmancy/nav-drawer/context'
 import { css, html } from 'lit'
-import { customElement, state } from 'lit/decorators.js'
+import { customElement, property, state } from 'lit/decorators.js'
 import { when } from 'lit/directives/when.js'
 import { SchmancyEvents } from '..'
 
@@ -29,6 +29,8 @@ export class SchmancyDrawerAppbar extends TailwindElement(css`
 	@state()
 	sidebarOpen
 
+	@property({ type: Boolean }) toggler = true
+
 	render() {
 		const appbarClasses = {
 			'block z-50': true,
@@ -39,14 +41,14 @@ export class SchmancyDrawerAppbar extends TailwindElement(css`
 		}
 		return html`
 			<schmancy-grid
-				cols=${this.sidebarMode === 'push' ? '1fr' : 'auto 1fr'}
+				cols=${this.sidebarMode === 'overlay' && this.toggler ? 'auto 1fr' : '1fr'}
 				flow="col"
 				class=${this.classMap(appbarClasses)}
 				gap="sm"
 				align="center"
 			>
 				${when(
-					this.sidebarMode === 'overlay',
+					this.sidebarMode === 'overlay' && this.toggler,
 					() =>
 						html`<slot name="toggler">
 							<div class="${this.classMap(sidebarToggler)}">