Added header tabs.

src/components/board/BoardSidebar.vue

@@ -21,12 +21,27 @@
   -->
 
 <template>
-  <div class="sidebar-header">
+	<div class="sidebar">
-    <a class="icon-close" title="Close" @click="closeSidebar">
+		<div class="sidebar-header">
-      <span class="hidden-visually">Close</span>
+			<a class="icon-close" title="Close" @click="closeSidebar">
-	  </a>
+				<span class="hidden-visually">Close</span>
-    <h3>{{ board.title }}</h3>
+			</a>
-  </div>
+			<h3>{{ board.title }}</h3>
+		</div>
+
+		<ul class="tab-headers">
+			<li v-for="tab in tabs" :class="{ 'selected': tab.isSelected }" :key="tab.name">
+				<a @click="setSelectedHeader(tab.name)">{{ tab.name }}</a>
+			</li>
+		</ul>
+
+		<div class="tabs-container">
+			<ul
+				id="shareWithList"
+				class="shareWithList"
+			/>
+		</div>
+	</div>
 </template>
 
 <script>
@@ -39,10 +54,38 @@ export default {
 				return {}
 			}
 		}
-  },
+	},
-  methods: {
+	data() {
-		closeSidebar: function() {
+		return {
+			activeTab: 'shareWithList',
+			tabs: [
+				{
+					name: 'Sharing',
+					isSelected: true
+				},
+				{
+					name: 'Tags',
+					isSelected: false
+				},
+				{
+					name: 'Deleted items',
+					isSelected: false
+				},
+				{
+					name: 'Timeline',
+					isSelected: false
+				}
+			]
+		}
+	},
+	methods: {
+		closeSidebar() {
 			this.$store.dispatch('toggleSidebar')
+		},
+		setSelectedHeader(tabName) {
+			this.tabs.forEach(tab => {
+				tab.isSelected = (tab.name === tabName)
+			})
 		}
 	}
 }
@@ -65,4 +108,18 @@ export default {
     height: 24px;
     width: 24px;
   }
+  ul.tab-headers {
+	margin: 15px 15px 0 15px;
+		li {
+			display: inline-block;
+			&.selected {
+				color: #000;
+				border-bottom: 1px solid #4d4d4d;
+				font-weight: 600;
+			}
+			a {
+				padding: 12px;
+			}
+		}
+  }
 </style>