| class BucketMasterSidebar extends HTMLElement { |
| connectedCallback() { |
| this.attachShadow({ mode: 'open' }); |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| width: 280px; |
| background-color: #FFFFFF; |
| border-right: 1px solid #E4E7EB; |
| height: calc(100vh - 64px); |
| padding: 1rem 0; |
| } |
| .sidebar-header { |
| padding: 0 1.5rem 1rem; |
| border-bottom: 1px solid #E4E7EB; |
| margin-bottom: 1rem; |
| } |
| .sidebar-title { |
| font-weight: 600; |
| color: #000000; |
| margin: 0; |
| } |
| .sidebar-item { |
| padding: 0.75rem 1.5rem; |
| display: flex; |
| align-items: center; |
| gap: 0.75rem; |
| color: #6E6E6E; |
| text-decoration: none; |
| transition: all 0.2s; |
| } |
| .sidebar-item:hover { |
| background-color: #FFF2CC; |
| color: #000000; |
| } |
| .sidebar-item.active { |
| background-color: #FFE699; |
| border-left: 4px solid #F7D348; |
| color: #000000; |
| } |
| .sidebar-item-icon { |
| width: 20px; |
| height: 20px; |
| } |
| </style> |
| <div class="sidebar-header"> |
| <h3 class="sidebar-title">Current Project</h3> |
| </div> |
| <a href="/project/123" class="sidebar-item active"> |
| <svg class="sidebar-item-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M3 7C3 5.89543 3.89543 5 5 5H19C20.1046 5 21 5.89543 21 7V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z" stroke="currentColor" stroke-width="2"/> |
| <path d="M3 9H21" stroke="currentColor" stroke-width="2"/> |
| <path d="M7 13H10" stroke="currentColor" stroke-width="2"/> |
| </svg> |
| Project Overview |
| </a> |
| <a href="/project/123/buckets" class="sidebar-item"> |
| <svg class="sidebar-item-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M4 7V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M2 5C2 3.89543 2.89543 3 4 3H20C21.1046 3 22 3.89543 22 5V7H2V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> |
| <path d="M10 12H14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/> |
| </svg> |
| Buckets |
| </a> |
| <a href="/project/123/settings" class="sidebar-item"> |
| <svg class="sidebar-item-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2"/> |
| <path d="M19.4 15C19.2669 15.3016 19.227 15.6363 19.2861 15.9606C19.3452 16.2849 19.5003 16.5816 19.7266 16.8082L19.8 16.8816C19.9253 17.0068 20.0124 17.1662 20.0506 17.3406C20.0888 17.515 20.0764 17.6973 20.0147 17.8647C19.797 18.4316 19.5023 18.9663 19.14 19.4541C19.026 19.6166 18.8539 19.7303 18.6607 19.7716C18.2926 19.8533 17.919 19.907 17.5428 19.9323C17.3426 19.9475 17.1574 20.0326 17.0207 20.1707C16.884 20.3088 16.8059 20.4899 16.8 20.68C16.8 21.42 16.6182 22.1481 16.2686 22.8C16.1426 23.0345 15.9223 23.2035 15.6664 23.2639C15.4105 23.3244 15.1446 23.2704 14.9316 23.1166C14.3746 22.6983 13.7566 22.3676 13.1 22.1381C12.9166 22.0696 12.7115 22.0696 12.5281 22.1381C11.8716 22.3676 11.2536 22.6983 10.6966 23.1166C10.4836 23.2704 10.2177 23.3244 9.9618 23.2639C9.7059 23.2035 9.4856 23.0345 9.3596 22.8C9.00995 22.1481 8.8282 21.42 8.8282 20.68C8.8223 20.4899 8.7442 20.3088 8.6075 20.1707C8.4708 20.0326 8.2856 19.9475 8.0854 19.9323C7.7092 19.907 7.3356 19.8533 6.9675 19.7716C6.7743 19.7303 6.6022 19.6166 6.4882 19.4541C6.1259 18.9663 5.8312 18.4316 5.6135 17.8647C5.5518 17.6973 5.5394 17.515 5.5776 17.3406C5.6158 17.1662 5.7029 17.0068 5.8282 16.8816L5.9016 16.8082C6.1279 16.5816 6.283 16.2849 6.3421 15.9606C6.4012 15.6363 6.3613 15.3016 6.2282 15C6.0951 14.6984 6.0552 14.3637 6.1143 14.0394C6.1734 13.7151 6.3285 13.4184 6.5548 13.1918L6.6282 13.1184C6.7535 12.9932 6.8406 12.8338 6.8788 12.6594C6.917 12.485 6.9046 12.3027 6.8429 12.1353C6.6252 11.5684 6.3305 11.0337 5.9682 10.5459C5.8542 10.3834 5.6821 10.2697 5.4889 10.2284C5.1208 10.1467 4.7472 10.093 4.371 10.0677C4.1708 10.0525 3.9856 9.9674 3.8489 9.8293C3.7122 9.6912 3.6341 9.5101 3.6282 9.32C3.6282 8.58 3.80995 7.8519 4.1596 7.2C4.2856 6.9655 4.5059 6.7965 4.7618 6.7361C5.0177 6.6756 5.2836 6.7296 5.4966 6.8834C6.0536 7.3017 6.6716 7.6324 7.3282 7.8619C7.5116 7.9304 7.7167 7.9304 7.9001 7.8619C8.5566 7.6324 9.1746 7.3017 9.7316 6.8834C9.9446 6.7296 10.2105 6.6756 10.4664 6.7361C10.7223 6.7965 10.9426 6.9655 11.0686 7.2C11.4182 7.8519 11.6 8.58 11.6 9.32C11.6059 9.5101 11.684 9.6912 11.8207 9.8293C11.9574 9.9674 12.1426 10.0525 12.3428 10.0677C12.719 10.093 13.0926 10.1467 13.4607 10.2284C13.6539 10.2697 13.826 10.3834 13.94 10.5459C14.3023 11.0337 14.597 11.5684 14.8147 12.1353C14.8764 12.3027 14.8888 12.485 14.8506 12.6594C14.8124 12.8338 14.7253 12.9932 14.6 13.1184L14.5266 13.1918C14.3003 13.4184 14.1452 13.7151 14.0861 14.0394C14.027 14.3637 14.0669 14.6984 14.2 15Z" stroke="currentColor" stroke-width="2"/> |
| </svg> |
| Settings |
| </a> |
| `; |
| } |
| } |
| customElements.define('bucketmaster-sidebar', BucketMasterSidebar); |
