Add JS/C2JS/Labs menu to TodoMVC

bower.json

@@ -2,7 +2,8 @@
   "name": "todomvc",
   "dependencies": {
     "jquery": "~2.1.0",
-    "bootstrap": "~3.2.0"
+    "bootstrap": "~3.2.0",
+    "paper-tabs": "Polymer/paper-tabs#~0.3.5"
   },
   "devDependencies": {
     "prefixfree": "91790e8aff6d807cd62018479db2307e1972b92a"

site-assets/main.css

@@ -118,6 +118,10 @@ header nav a:not(:last-child) {
 	left: -20px;
 }
 
+.app-lists {
+	overflow: hidden;
+}
+
 .applist {
 	list-style: none;
 	margin: 0;
@@ -136,6 +140,11 @@ header nav a:not(:last-child) {
 	column-break-inside: avoid;
 }
 
+.applist-intro {
+	margin: 10px 0 10px;
+	font-style: italic;
+}
+
 .applist .routing::after,
 .applist .label,
 .legend .label {
@@ -323,6 +332,15 @@ a.zocial {
 	border-radius: .3em;
 }
 
+@keyframes swoosh-in {
+	from { opacity: 0; transform: translateX(-500px); }
+	to { opacity: 1; transform: translateX(0); }
+}
+
+.anim-swoosh-in {
+	animation: swoosh-in 0.5s;
+}
+
 @media (max-width: 480px) {
 	body .applist {
 		column-count: auto !important;

site-assets/main.js

@@ -183,4 +183,27 @@
 		}
 	}]);
 
+	function AppTabs() {
+		document.querySelector(AppTabs.selectors.tabs).addEventListener(
+			'core-select', this.onSelect.bind(this));
+	}
+
+	AppTabs.selectors = {
+		'tabs': '.js-app-tabs',
+		'list': '.js-app-list'
+	};
+
+	AppTabs.prototype.onSelect = function (e) {
+		var selected = e.target.selected;
+		[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
+			function (e) {
+				var isSelected = e.dataset.appList === selected;
+				e.style.display = isSelected ? 'block' : 'none';
+				e.classList.toggle('anim-swoosh-in', isSelected);
+			}
+		);
+	};
+
+	new AppTabs();
+
 }());