Harsh-jain/codecollab-vs-code-meets-google-docs
0
1class CollabSidebar extends HTMLElement {2 connectedCallback() {3 this.attachShadow({ mode: 'open' });4 this.shadowRoot.innerHTML = `5 <style>6 :host {7 display: block;8 width: 250px;9 background-color: #1e1e1e;10 border-right: 1px solid #252526;11 height: 100%;12 overflow-y: auto;13 font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;14 font-size: 13px;15 }16 .explorer-header {17 padding: 8px 10px;18 display: flex;19 align-items: center;20 justify-content: space-between;21 border-bottom: 1px solid #252526;22 text-transform: uppercase;23 font-size: 11px;24 font-weight: 400;25 letter-spacing: 0.5px;26 color: #bbbbbb;27 }28 .explorer-title {29 font-weight: 500;30 color: #f0f0f0;31 }32 .file-item {33 padding: 3px 8px 3px 20px;34 display: flex;35 align-items: center;36 gap: 6px;37 cursor: pointer;38 color: #d4d4d4;39 white-space: nowrap;40 overflow: hidden;41 text-overflow: ellipsis;42 }43 .file-item:hover {44 background-color: #2a2d2e;45 }46 47 .file-item.active {48 background-color: #37373d;49 color: #f0f0f0;50 }51 52 .folder {53 margin-top: 1rem;54 }55 56 .folder-header {57 padding: 0.5rem 1rem;58 display: flex;59 align-items: center;60 gap: 0.5rem;61 cursor: pointer;62 color: #9ca3af;63 }64 65 .folder-header:hover {66 background-color: #2a2d2e;67 }68 69 .folder-items {70 padding-left: 1.5rem;71 }72 </style>73 <div class="explorer-header">74 <div class="explorer-title">EXPLORER</div>75 <i data-feather="plus" class="w-4 h-4 text-gray-400 cursor-pointer"></i>76 </div>77 78 <div class="folder">79 <div class="folder-header">80 <i data-feather="folder" class="w-4 h-4"></i>81 <span>Project</span>82 </div>83 <div class="folder-items">84 <div class="file-item active">85 <i data-feather="file-text" class="w-4 h-4"></i>86 <span>main.js</span>87 </div>88 <div class="file-item">89 <i data-feather="file-text" class="w-4 h-4"></i>90 <span>utils.js</span>91 </div>92 <div class="file-item">93 <i data-feather="file-text" class="w-4 h-4"></i>94 <span>styles.css</span>95 </div>96 </div>97 </div>98 99 <div class="folder">100 <div class="folder-header">101 <i data-feather="folder" class="w-4 h-4"></i>102 <span>Components</span>103 </div>104 <div class="folder-items">105 <div class="file-item">106 <i data-feather="file-text" class="w-4 h-4"></i>107 <span>Navbar.js</span>108 </div>109 <div class="file-item">110 <i data-feather="file-text" class="w-4 h-4"></i>111 <span>Sidebar.js</span>112 </div>113 </div>114 </div>115 `;116 }117}