Overview

• File: src/components/UI/sideModal.svelte

The SideModal component is a reusable sliding panel that appears from the right side of the screen. It's designed for displaying content without fully interrupting the main interface, making it ideal for chat panels, details views, or secondary information.

Type Definitions

interface ICallData {
  groupId: string; // Group/Call identifier
  groupName: string; // Group/Call name
  callerName: string; // Caller's name
}

Component Structure

Dependencies

import { fade } from "svelte/transition";
import { cubicIn, elasticInOut } from "svelte/easing";

Layout Structure

Container

<div aria-live="assertive"
     class="pointer-events-none fixed inset-0 flex items-end place-content-end sm:items-start z-[99]">
  <!-- Modal content -->
</div>

Container Structure

<div class="flex flex-col flex-grow pointer-events-none max-w-md h-full">
  <!-- Header spacing -->
  <div class="h-16">&nbsp;</div>

  <!-- Content area -->
  <div class="pointer-events-auto flex-grow overflow-y-hidden bg-white flex flex-col shadow-lg">
    <!-- Header slot -->
    <div class="flex w-full">
      <slot name="header" />
    </div>

    <!-- Main content slot -->
    <div class="flex-grow flex overflow-y-hidden p-1">
      <slot />
    </div>
  </div>
</div>

Animation

Transition Effects

// Entry animation
in:fade={{
  duration: 150,
  easing: cubicIn
}}

// Exit animation
out:fade={{
  duration: 200,
  easing: elasticInOut
}}

Styling

Layout Classes

/* Container positioning */
.fixed.inset-0          /* Full screen overlay */
.place-content-end      /* Right alignment */
.z-[99]                /* High z-index for overlay */

/* Panel dimensions */
.max-w-md              /* Maximum width */
.h-full                /* Full height */

/* Content styling */
.bg-white              /* White background */
.shadow-lg             /* Large shadow */
.overflow-y-hidden     /* Hidden vertical overflow */

Slots

Available Slots

1. header

• Purpose: Modal header content
• Usage:
  Header Content

2. default

• Purpose: Main modal content
• Usage:
  Main Content

Usage Examples

Basic Implementation

<script>
  import SideModal from './components/UI/sideModal.svelte';
</script>

<SideModal>
  <div slot="header">
    <h2>Modal Title</h2>
  </div>

  <div>
    Content goes here
  </div>
</SideModal>

With Custom Content

<SideModal>
  <div slot="header" class="flex justify-between items-center p-4">
    <h2>Details</h2>
    <button on:click={close}>×</button>
  </div>

  <div class="p-4">
    <p>Modal content with custom padding</p>
  </div>
</SideModal>

Layout Guidelines

Panel Structure

+------------------------+
|       (spacing)        |
+------------------------+
|     Header (slot)      |
+------------------------+
|                        |
|                        |
|    Content (slot)      |
|                        |
|                        |
+------------------------+