Slide-Out Menu Component

AI Assistant — Slide from Right

Project Detail — Form Panel

Team Members — Directory Panel

File Upload — Attach Files Panel

Usage examples

Copy-paste-ready snippets for SlideOutMenu.

Basic slide-out

<Button Variant="primary" Text="Open panel"
        OnClick="() => showPanel = true" />

<SlideOutMenu @bind-IsOpen="showPanel">
    <ChildContent>
        <p>Slide-out panel content goes here.</p>
    </ChildContent>
</SlideOutMenu>

@code {
    private bool showPanel;
}

With header and footer

<SlideOutMenu @bind-IsOpen="showPanel"
              CloseOnOverlayClick="true"
              OnClose="HandleClose">
    <Header>
        <h2>Create project</h2>
        <p>Fill in the details below.</p>
    </Header>
    <ChildContent>
        <InputField Label="Project name" />
        <InputField Label="Description" />
    </ChildContent>
    <Footer>
        <Button Variant="secondary" Text="Cancel"
                OnClick="() => showPanel = false" />
        <Button Variant="primary" Text="Create" />
    </Footer>
</SlideOutMenu>