Offcanvas

            
            <Button onclick={toggleOffcanvas}>
  Launch Basic Offcanvas
</Button>

<Offcanvas.Root isShown={showOffcanvas} onHidden={() => showOffcanvas = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>Some text as placeholder. Content can be virtually anything.</p>
        <Button colorVariant="secondary" onclick={() => showOffcanvas = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>
        

            
            <script lang="ts">
    import { Button, Offcanvas } from '@winkintel/bootstrap-svelte';
    let open = $state(false);
    let trigger: HTMLElement | null = $state(null);
</script>

<Button bind:elementRef={trigger} aria-controls="my-panel" aria-expanded={open}
    style="position: relative; z-index: 1042;" onclick={() => open = !open}>
    Toggle Offcanvas
</Button>
<Offcanvas.Root id="my-panel" isShown={open} triggerElements={[trigger]}
    useBackdrop="static" placement="end" onHide={() => open = false}>
    <Offcanvas.Body>Panel content</Offcanvas.Body>
</Offcanvas.Root>
        

            
            <Button onclick={() => showPlacementStart = true}>
    Offcanvas Start
</Button>
<Offcanvas.Root placement="start" isShown={showPlacementStart} onHidden={() => showPlacementStart = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Start</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the left of the screen (or right in RTL languages)</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementEnd = true}>
    Offcanvas End
</Button>
<Offcanvas.Root placement="end" isShown={showPlacementEnd} onHidden={() => showPlacementEnd = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas End</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the right of the screen (or left in RTL languages)</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementTop = true}>
    Offcanvas Top
</Button>
<Offcanvas.Root placement="top" isShown={showPlacementTop} onHidden={() => showPlacementTop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Top</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the top of the screen</Offcanvas.Body>
</Offcanvas.Root>

<Button onclick={() => showPlacementBottom = true}>
    Offcanvas Bottom
</Button>
<Offcanvas.Root placement="bottom" isShown={showPlacementBottom} onHidden={() => showPlacementBottom = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Offcanvas Bottom</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>Positioned from the bottom of the screen</Offcanvas.Body>
</Offcanvas.Root>
        

            
            <Offcanvas.Root useBackdrop="static" isShown={showStaticBackdrop} onHidden={() => showStaticBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Static Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>Click the close button or press escape to close this offcanvas. Clicking outside won't close it.</p>
        <Button colorVariant="secondary" onclick={() => showStaticBackdrop = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>

<Offcanvas.Root useBackdrop={true} isShown={showTrueBackdrop} onHidden={() => showTrueBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>True Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>This offcanvas has a backdrop that you can click outside to close it.</p>
    </Offcanvas.Body>
</Offcanvas.Root>

<Offcanvas.Root useBackdrop={false} isShown={showFalseBackdrop} onHidden={() => showFalseBackdrop = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>False Backdrop</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>There is no backdrop for this offcanvas. You can still interact with the page content.</p>
        <Button colorVariant="secondary" onclick={() => showFalseBackdrop = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>
        

            
            <Offcanvas.Root isBodyScrollable={true} isShown={showScrollable} onHidden={() => showScrollable = false}>
    <Offcanvas.Header>
        <Offcanvas.Title>Scrollable Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>The page body remains scrollable when this offcanvas is open.</p>
        <p>Try scrolling the page while this offcanvas is open.</p>
        <Button colorVariant="secondary" onclick={() => showScrollable = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>
        

            
            <Button colorVariant="primary" class="d-lg-none" onclick={() => showResponsive = !showResponsive}>
    Toggle Responsive Offcanvas
</Button>

<Offcanvas.Root showOnBreakpoint="lg" placement="start">
    <Offcanvas.Header>
        <Offcanvas.Title>Responsive Offcanvas</Offcanvas.Title>
    </Offcanvas.Header>
    <Offcanvas.Body>
        <p>This is always visible on lg screens and above, but behaves like a regular offcanvas below lg breakpoint.</p>
        <Button colorVariant="secondary" class="d-lg-none" onclick={() => showResponsive = false}>Close</Button>
    </Offcanvas.Body>
</Offcanvas.Root>