<script>import { BEM } from "../../models/BEM";
import { createEventDispatcher } from "svelte";
import Button from './Button.svelte';
const dispatch = createEventDispatcher();
const bm = new BEM('UI-Sidebar');
bm.append($$props.class);
export let title = '';
export let open = true;
const onClose = () => dispatch('close');
</script>
<aside class:open class="{bm.toString()}" style="{$$props.style}">
	<header>
		<span>{title}</span>
		<div class="actions">
			<slot name="headerActions"></slot>
			<Button isIcon rounded icon="fa fa-times" on:click={onClose}/>
		</div>
	</header>
	<section>
		<slot/>
	</section>
	{#if $$slots.footer}
		<footer>
			<slot name="footer"></slot>
		</footer>
	{/if}
</aside>
<style>aside {
  background: var(--ui-white);
  color: #495057;
  border: 0 none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  transform: translateZ(0);
  position: relative;
  height: 100%;
  transition: left 0.3s ease-in-out;
}

.open {
  width: var(--ui-co-sidebar_width, 20rem);
}

header {
  display: flex;
  align-items: center;
  gap: 20px;
}

.actions {
  margin-left: auto;
}

header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  padding: 1.25rem;
}

section {
  overflow-y: auto;
  flex-grow: 1;
  padding: 1.25rem;
  width: 100%;
  height: 100%;
  padding-top: 0;
}</style>
