Add tab widget to frontend example

assets/res/mint.css

@@ -2,12 +2,14 @@
 :root {
 	--glass:             #EEEEEE77;
 	--background:        #EEE;
+	--control:           #FFF4;
 	--foreground:        #333;
 	--subtle-foreground: #888;
 	--outline:           #00000015;
 	--shine:             #00000015;
 	--accent:            #209D6E;
 	--subtle-accent:     #209D6E30;
+	--subtler-accent:    #209D6E12;
 	--shadow:            0 4px 32px #03281A12;
 	--icon-filter:       hue-rotate(157deg) saturate(0.80) brightness(1.3);
 }

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;