Slide Over

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

<!-- Slide Over Modal -->
<div id="slide-over" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" onclick="closeSlideOver('slide-over')"></div>
  
  <!-- Panel -->
  <div id="slide-panel" class="fixed inset-y-0 left-0 w-full max-w-lg bg-white dark:bg-gray-900 shadow-2xl transform transition-transform duration-300 -translate-x-full">
    
    <!-- Header -->
    <div class="flex items-center justify-between p-6 border-b border-gray-100 dark:border-gray-800">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-violet-100 dark:bg-violet-900/30 rounded-xl flex items-center justify-center">
          <svg class="w-5 h-5 text-violet-600 dark:text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
          </svg>
        </div>
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Task Details</h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Project: Website Redesign</p>
        </div>
      </div>
      <button onclick="closeSlideOver('slide-over')" class="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </button>
    </div>
    
    <!-- Content -->
    <div class="p-6 overflow-y-auto h-[calc(100vh-180px)] space-y-6">
      <!-- Task Title -->
      <div>
        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Design new landing page mockups</h2>
        <div class="flex items-center gap-2">
          <span class="px-2 py-1 text-xs font-medium bg-violet-100 dark:bg-violet-900/30 text-violet-600 dark:text-violet-400 rounded-full">In Progress</span>
          <span class="text-sm text-gray-500 dark:text-gray-400">Due Dec 15, 2024</span>
        </div>
      </div>
      
      <!-- Description -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</label>
        <p class="text-gray-600 dark:text-gray-400 leading-relaxed">Create high-fidelity mockups for the new landing page based on the approved wireframes. Include mobile and desktop versions.</p>
      </div>
      
      <!-- Assignees -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Assignees</label>
        <div class="flex items-center gap-3">
          <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=32&h=32&fit=crop" class="w-8 h-8 rounded-full">
          <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop" class="w-8 h-8 rounded-full">
          <button class="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- Priority -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Priority</label>
        <select class="w-full px-4 py-3 border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
          <option>High</option>
          <option selected>Medium</option>
          <option>Low</option>
        </select>
      </div>
      
      <!-- Subtasks -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Subtasks</label>
        <div class="space-y-3">
          <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl cursor-pointer">
            <input type="checkbox" checked class="w-5 h-5 text-violet-600 border-gray-300 rounded focus:ring-violet-500">
            <span class="text-gray-700 dark:text-gray-300 line-through opacity-60">Research competitor designs</span>
          </label>
          <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl cursor-pointer">
            <input type="checkbox" checked class="w-5 h-5 text-violet-600 border-gray-300 rounded focus:ring-violet-500">
            <span class="text-gray-700 dark:text-gray-300 line-through opacity-60">Create wireframes</span>
          </label>
          <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl cursor-pointer">
            <input type="checkbox" class="w-5 h-5 text-violet-600 border-gray-300 rounded focus:ring-violet-500">
            <span class="text-gray-900 dark:text-white">Design desktop mockups</span>
          </label>
          <label class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-xl cursor-pointer">
            <input type="checkbox" class="w-5 h-5 text-violet-600 border-gray-300 rounded focus:ring-violet-500">
            <span class="text-gray-900 dark:text-white">Design mobile mockups</span>
          </label>
        </div>
      </div>
      
      <!-- Activity -->
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Activity</label>
        <div class="space-y-4">
          <div class="flex gap-3">
            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=32&h=32&fit=crop" class="w-8 h-8 rounded-full">
            <div>
              <p class="text-sm text-gray-900 dark:text-white"><span class="font-medium">Sarah</span> changed status to In Progress</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
            </div>
          </div>
          <div class="flex gap-3">
            <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=32&h=32&fit=crop" class="w-8 h-8 rounded-full">
            <div>
              <p class="text-sm text-gray-900 dark:text-white"><span class="font-medium">Marcus</span> added a comment</p>
              <p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Footer -->
    <div class="absolute bottom-0 left-0 right-0 p-6 border-t border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-900">
      <div class="flex gap-3">
        <button class="flex-1 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded-xl hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">Delete</button>
        <button onclick="closeSlideOver('slide-over')" class="flex-1 py-3 text-sm font-medium text-white bg-violet-600 rounded-xl hover:bg-violet-700 transition-colors">Save Changes</button>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openSlideOver('slide-over')" class="px-6 py-3 bg-violet-600 text-white font-medium rounded-xl hover:bg-violet-700 transition-colors focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2">Open Slide Over</button>

<script>
  function openSlideOver(id) {
    document.getElementById(id).classList.remove('hidden');
    document.getElementById('slide-panel').classList.remove('-translate-x-full');
    document.body.style.overflow = 'hidden';
  }
  function closeSlideOver(id) {
    document.getElementById('slide-panel').classList.add('-translate-x-full');
    setTimeout(() => {
      document.getElementById(id).classList.add('hidden');
    }, 300);
    document.body.style.overflow = '';
  }
</script>

1
2
3
4
5
6
7
8
9
10
11
12

# Slide Over

Slide-over panel modal.

## Usage
```bash
npx devsnips add Tailwind/Components/Modals/slide-over
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`