<script>

	export let layout = "";
	export let layouts = [];

</script>

<div style="display: flex; flex-direction: column; font-size: 12px; position: fixed; top: 20px; left: 20px; background-color: white;">
	<p>temp, for testing :</p>
	<button on:click={function(){layout = "close"    }}>close</button>
	<button on:click={function(){layout = "home"     }}>home</button>
	<button on:click={function(){layout = "room"     }}>room</button>
	<button on:click={function(){layout = "new"      }}>new</button>
	<button on:click={function(){layout = "settings" }}>settings</button>
	<button on:click={function(){layout = "room_set" }}>room_set</button>
	<button on:click={function(){layout = "protected"}}>protected</button>
	<button on:click={function(){layout = "create"   }}>create</button>
	<button on:click={function(){layout = "mute"     }}>mute</button>
	<button on:click={function(){
		layouts = ["settings", "settings"];
		layout = "user";
	}}>user from settings</button>
	<button on:click={function(){
		layouts = ["room_set", "room_set"];
		layout = "user";
	}}>user from room_set</button>
</div>
