You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

121 lines
7.4 KiB

<!-- Content Sidebar -->
<div class="bg-tertiary h-max flex-none basis-full rounded-lg p-6 md:basis-1/3 lg:basis-1/4">
<div class="grid grid-cols-1 gap-y-6 divide-y divide-gray-300/25 text-sm md:text-base lg:text-base">
<!-- Content Sidebar List 1 -->
<div class="last:pt-6">
<ul class="list-none space-y-5">
<li>
<button
class="inline-flex w-full items-center space-x-3 rounded-md bg-blue-700 px-3 py-1.5 font-semibold text-color-primary">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<span class="truncate">Image</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polygon points="23 7 16 12 23 17 23 7"></polygon>
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
</svg>
<span class="truncate">Video</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M14.5 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V7.5L14.5 2z">
</path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
<span class="truncate">Documents</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 00-3-3.87"></path>
<path d="M16 3.13a4 4 0 010 7.75"></path>
</svg>
<span class="truncate">Shared</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-color-primary">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"></polyline>
<path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2">
</path>
</svg>
<span class="truncate">Trash</span>
</button>
</li>
</ul>
</div>
<!-- End Content Sidebar List 1 -->
<!-- Content Sidebar List 2 -->
<div class="last:pt-6">
<ul class="list-none space-y-5">
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<div class="h-2 w-2 flex-none rounded-full bg-orange-500"></div>
<span class="truncate">Custom</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<div class="h-2 w-2 flex-none rounded-full bg-green-500"></div>
<span class="truncate">Important Meeting</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<div class="h-2 w-2 flex-none rounded-full bg-yellow-500"></div>
<span class="truncate">Work</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<div class="h-2 w-2 flex-none rounded-full bg-orange-500"></div>
<span class="truncate">Design</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<div class="h-2 w-2 flex-none rounded-full bg-red-500"></div>
<span class="truncate">Next Week</span>
</button>
</li>
<li>
<button class="inline-flex w-full items-center space-x-3 rounded-md px-3 py-1.5 text-gray-300">
<svg class="flex-none" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span class="truncate">Add New Label</span>
</button>
</li>
</ul>
</div>
<!-- Content Sidebar List 2 -->
</div>
</div>
<!-- End Content Sidebar -->