removeSite()

package.json

@@ -21,7 +21,7 @@
 	"dependencies": {
 		"angular-tooltips": "^1.2.2",
 		"autoprefixer": "^8.6.4",
-		"bootstrap": "^4.1.2",
+		"bootstrap": "^4.2.1",
 		"eslint": "^5.9.0",
 		"highlight.js": "^9.12.0",
 		"node-sass": "^4.11.0",

public/assets/js/app.js

@@ -407,6 +407,16 @@
 			$scope.site = $scope.data.sites.length - 1;
 		};
 
+		$scope.removeSite = function(site) {
+			$scope.data.sites.splice(site, 1);
+
+			if ($scope.data.sites[$scope.site] === undefined) {
+				$scope.site--;
+			}
+
+			$timeout(calculateChanges);
+		};
+
 		$scope.setSite = function(site) {
 			$scope.site = site;
 			$timeout(calculateChanges);

public/index.html

@@ -106,7 +106,12 @@
 									<a class="nav-link">Sites:</a>
 								</li>
 								<li class="nav-item" ng-repeat="(key, value) in data.sites">
-									<a class="nav-link" ng-click="setSite(key)" ng-class="{ 'active': site === key, 'changed': getSiteChanges(key) !== 0 }" ng-cloak>{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small></a>
+									<a class="nav-link" ng-click="setSite(key)" ng-class="{ 'active': site === key, 'changed': getSiteChanges(key) !== 0 }" ng-cloak>
+										{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
+										<button type="button" class="close" ng-if="key > 0" ng-click="removeSite(key)">
+											<span>&times;</span>
+										</button>
+									</a>
 								</li>
 								<li class="nav-item">
 									<a class="nav-link text-muted small" ng-click="addSite()">﹢ Add site</a>

resources/scss/_main.scss

@@ -97,7 +97,7 @@ section.tabs {
 
 				@include media-breakpoint-up(xl) {
 					padding-left: 0;
-					padding-right: 0;
+					padding-right: 0.75rem;
 					text-align: center;
 				}
 
@@ -121,10 +121,6 @@ section.tabs {
 				&.changed {
 					font-weight: 700;
 
-					@include media-breakpoint-up(xl) {
-						padding-right: 1rem;
-					}
-
 					small {
 						display: inline;
 
@@ -145,6 +141,10 @@ section.tabs {
 						right: 0.25rem;
 					}
 				}
+
+				button.close {
+					line-height: 0.8;
+				}
 			}
 		}
 	}

resources/scss/vendor/_bootstrap.scss

@@ -26,7 +26,7 @@
 // @import '../../../node_modules/bootstrap/scss/progress';
 // @import '../../../node_modules/bootstrap/scss/media';
 // @import '../../../node_modules/bootstrap/scss/list-group';
-// @import '../../../node_modules/bootstrap/scss/close';
+@import '../../../node_modules/bootstrap/scss/close';
 // @import '../../../node_modules/bootstrap/scss/modal';
 // @import '../../../node_modules/bootstrap/scss/tooltip';
 // @import '../../../node_modules/bootstrap/scss/popover';