Nicer fix it its a bit big fix it close it up like smaller the chat side bar and add an icon to close and open this bar ok?
Browse files- index.html +28 -6
index.html
CHANGED
|
@@ -55,8 +55,11 @@
|
|
| 55 |
</head>
|
| 56 |
<body class="h-full bg-dark-900 text-gray-100 flex">
|
| 57 |
<!-- Left Sidebar -->
|
| 58 |
-
<div class="w-[
|
| 59 |
-
<
|
|
|
|
|
|
|
|
|
|
| 60 |
<div class="p-6 pt-5">
|
| 61 |
<h1 class="text-xl serif text-[#EAE7E3]">Syntra</h1>
|
| 62 |
</div>
|
|
@@ -113,10 +116,10 @@
|
|
| 113 |
</div>
|
| 114 |
</div>
|
| 115 |
</div>
|
| 116 |
-
|
| 117 |
<!-- Main Content -->
|
| 118 |
-
|
| 119 |
-
|
| 120 |
<div class="text-xs mb-12 tracking-wider">
|
| 121 |
<span class="text-gray-500">Free plan</span>
|
| 122 |
<span class="mx-2">·</span>
|
|
@@ -172,9 +175,28 @@
|
|
| 172 |
|
| 173 |
<script>
|
| 174 |
feather.replace();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 175 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 176 |
// Simple animation for the greeting star
|
| 177 |
-
|
| 178 |
const star = document.querySelector('[data-feather="star"]');
|
| 179 |
anime({
|
| 180 |
targets: star,
|
|
|
|
| 55 |
</head>
|
| 56 |
<body class="h-full bg-dark-900 text-gray-100 flex">
|
| 57 |
<!-- Left Sidebar -->
|
| 58 |
+
<div id="sidebar" class="w-[280px] h-full bg-[#171617] flex flex-col border-r border-dark-700 transition-all duration-300 ease-in-out">
|
| 59 |
+
<button id="sidebar-toggle" class="absolute top-4 -right-3 z-10 w-6 h-6 bg-dark-700 rounded-full flex items-center justify-center border border-dark-600 shadow-lg hover:bg-dark-600 transition-colors">
|
| 60 |
+
<i data-feather="chevron-left" class="w-4 h-4 stroke-gray-400"></i>
|
| 61 |
+
</button>
|
| 62 |
+
<!-- Logo -->
|
| 63 |
<div class="p-6 pt-5">
|
| 64 |
<h1 class="text-xl serif text-[#EAE7E3]">Syntra</h1>
|
| 65 |
</div>
|
|
|
|
| 116 |
</div>
|
| 117 |
</div>
|
| 118 |
</div>
|
| 119 |
+
|
| 120 |
<!-- Main Content -->
|
| 121 |
+
<main class="flex-1 flex flex-col items-center justify-center p-6 transition-all duration-300 ease-in-out">
|
| 122 |
+
<!-- Plan Banner -->
|
| 123 |
<div class="text-xs mb-12 tracking-wider">
|
| 124 |
<span class="text-gray-500">Free plan</span>
|
| 125 |
<span class="mx-2">·</span>
|
|
|
|
| 175 |
|
| 176 |
<script>
|
| 177 |
feather.replace();
|
| 178 |
+
|
| 179 |
+
// Sidebar toggle functionality
|
| 180 |
+
const sidebar = document.getElementById('sidebar');
|
| 181 |
+
const sidebarToggle = document.getElementById('sidebar-toggle');
|
| 182 |
+
const chevron = sidebarToggle.querySelector('i');
|
| 183 |
|
| 184 |
+
sidebarToggle.addEventListener('click', () => {
|
| 185 |
+
sidebar.classList.toggle('w-[280px]');
|
| 186 |
+
sidebar.classList.toggle('w-0');
|
| 187 |
+
sidebar.classList.toggle('overflow-hidden');
|
| 188 |
+
|
| 189 |
+
// Rotate chevron icon
|
| 190 |
+
if (sidebar.classList.contains('w-0')) {
|
| 191 |
+
chevron.setAttribute('data-feather', 'chevron-right');
|
| 192 |
+
} else {
|
| 193 |
+
chevron.setAttribute('data-feather', 'chevron-left');
|
| 194 |
+
}
|
| 195 |
+
feather.replace();
|
| 196 |
+
});
|
| 197 |
+
|
| 198 |
// Simple animation for the greeting star
|
| 199 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 200 |
const star = document.querySelector('[data-feather="star"]');
|
| 201 |
anime({
|
| 202 |
targets: star,
|