Add tab widget to frontend example

assets/res/style.css

@@ -82,6 +82,40 @@ nav {
 	margin-right: 1em;
 }
 
+.sidebar .buttonList {
+	margin-bottom: 1rem;
+}
+
+.tabList {
+	display: flex;
+}
+
+.tabList.end {
+	justify-content: flex-end;
+}
+
+.tabList a, .tabList span {
+	color: var(--accent);
+	border: 1px solid var(--shine);
+	background-color: var(--control);
+	display: inline-block;
+	padding: 0 0.5em;
+	border-left-width: 0;
+}
+
+.tabList span {
+	background-color: var(--subtler-accent);
+}
+
+.tabList a:first-child, .tabList span:first-child {
+	border-radius: 0.5em 0 0 0.5em;
+	border-left-width: 1px;
+}
+
+.tabList a:last-child, .tabList span:last-child {
+	border-radius: 0 0.5em 0.5em 0;
+}
+
 header {
 	padding: 0 1rem;
 	display: flex;
@@ -109,12 +143,24 @@ header .buttonList {
 		position: relative;
 	}
 
-	nav .buttonListWrap .buttonList {
+	nav .buttonListWrap .buttonList, nav .buttonListWrap .tabList  {
 		overflow-x: auto;
 		white-space: nowrap;
 		scrollbar-width: thin;
 		width: 100%;
 	}
+
+	nav .buttonListWrap .tabList {
+		justify-content: unset;
+	}
+
+	nav .buttonListWrap .tabList *:first-child {
+		margin-left: auto;
+	}
+
+	nav .buttonListWrap .tabList *:last-child {
+		margin-right: auto;
+	}
 	
 	nav .buttonListWrap::after {
 		position: absolute;