    <!-- 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 -->