Added Tabs demo, and made them work since this is usually overlooked in other demos.

public/code/Panels.css

@@ -25,9 +25,6 @@ panel middle {
   justify-content: flex-start;
 }
 
-panel middle h4 {
-}
-
 panel bottom {
   flex-shrink: 0;
   display: flex;

public/code/Tabs.css

@@ -0,0 +1,41 @@
+content {
+  display: flex;
+  flex-direction: column;
+}
+
+tabs {
+  margin-top: 1em;
+  /* added so you can see it in the display */
+  display: flex;
+  justify-content: space-evenly;
+  border-bottom: var(--color-accent);
+}
+
+tabs a {
+  text-decoration: none;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-accent);
+  border-width: thin;
+  width: 100%;
+  text-align: center;
+  padding: 2rem 0rem 0.5rem;
+}
+
+tabs a:hover {
+  box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+}
+
+tabs a.active {
+  background-color: var(--color-bg-secondary);
+}
+
+panel {
+  display: none;
+}
+
+panel.active {
+  border: 1px solid var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+}

public/code/Tabs.html

@@ -0,0 +1,31 @@
+<h1>Basic Tabs</h1>
+
+<tabs>
+  <a class="active">Tab1</a>
+  <a>Tab2</a>
+  <a>Tab3</a>
+</tabs>
+
+<h1>Interactive Demo</h1>
+<tabs>
+  {#each panels as panel, i}
+    <a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
+  {/each}
+</tabs>
+<panels>
+  {#each panels as panel, i}
+    <panel class:active={panel.active}>
+    <h1>{ panel.title }</h1> 
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+      velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+      cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+      laborum.
+    </p>
+  </panel>
+  {/each}
+</panels>
+

src/demos/Panels.svelte

@@ -30,9 +30,6 @@
     justify-content: flex-start;
   }
 
-  panel middle h4 {
-  }
-
   panel bottom {
     flex-shrink: 0;
     display: flex;

src/demos/Tabs.svelte

@@ -0,0 +1,96 @@
+<script>
+  import CodeView from '../components/CodeView.svelte';
+  import Icon from '../components/Icon.svelte';
+
+  let panels = [
+    {title: 'Panel 1', active: true},
+    {title: 'Panel 2', active: false},
+    {title: 'Panel 3', active: false},
+  ];
+
+  const activate = (index) => {
+    panels.forEach((panel, i) => panel.active = index == i);
+    panels = panels; // for the svelte update
+  }
+</script>
+
+<style>
+  content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  tabs {
+    margin-top: 1em;
+    /* added so you can see it in the display */
+    display: flex;
+    justify-content: space-evenly;
+    border-bottom: var(--color-accent);
+  }
+
+  tabs a {
+    text-decoration: none;
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-accent);
+    border-width: thin;
+    width: 100%;
+    text-align: center;
+    padding: 2rem 0rem 0.5rem;
+  }
+
+  tabs a:hover {
+    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+  }
+
+  tabs a.active {
+    background-color: var(--color-bg-secondary);
+  }
+
+  panel {
+    display: none;
+  }
+
+  panel.active {
+    border: 1px solid var(--color-accent);
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+  }
+
+</style>
+
+<content>
+  <h1>Basic Tabs</h1>
+
+  <tabs>
+    <a class="active">Tab1</a>
+    <a>Tab2</a>
+    <a>Tab3</a>
+  </tabs>
+
+  <h1>Interactive Demo</h1>
+  <tabs>
+    {#each panels as panel, i}
+      <a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
+    {/each}
+  </tabs>
+  <panels>
+    {#each panels as panel, i}
+      <panel class:active={panel.active}>
+      <h1>{ panel.title }</h1> 
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>
+    </panel>
+    {/each}
+  </panels>
+</content>
+
+<CodeView source="/code/Tabs" />
+

src/demos/index.svelte

@@ -9,6 +9,7 @@
   import Cards from '../thumbs/Cards.svelte';
   import Panels from '../thumbs/Panels.svelte';
   import NavBar from '../thumbs/NavBar.svelte';
+  import Tabs from '../thumbs/Tabs.svelte';
 
   import {push} from 'svelte-spa-router';
   import { holder } from '../../lib/imgholder.js';
@@ -106,9 +107,9 @@
   <figcaption>Panels</figcaption>
 </figure>
 
-<figure on:click={ () => push('/demos/navbar') }>
+<figure on:click={ () => push('/demos/tabs') }>
-  <NavBar />
+  <Tabs />
-  <figcaption>Nav Bar</figcaption>
+  <figcaption>Tabs</figcaption>
 </figure>
 
 </images>

src/routes.js

@@ -15,6 +15,7 @@ import Cards from "./demos/Cards.svelte";
 import Panels from "./demos/Panels.svelte";
 import Modal from "./demos/Modal.svelte";
 import NavBar from "./demos/NavBar.svelte";
+import Tabs from "./demos/Tabs.svelte";
 
 export default {
   "/": Home,
@@ -31,6 +32,7 @@ export default {
   "/demos/instagram": Instagram,
   "/demos/pinterest": Pinterest,
   "/demos/navbar": NavBar,
+  "/demos/tabs": Tabs,
   "/demos/xoracademy": XorAcademy,
   "/demos/xoracademy/watch": XorAcademyWatch,
   "*": NotFound,

src/thumbs/Panels.svelte

@@ -29,9 +29,6 @@
     justify-content: flex-start;
   }
 
-  panel middle h4 {
-  }
-
   panel bottom {
     flex-shrink: 0;
     display: flex;

src/thumbs/Tabs.svelte

@@ -0,0 +1,91 @@
+<script>
+  let panels = [
+    {title: 'Panel 1', active: true},
+    {title: 'Panel 2', active: false},
+    {title: 'Panel 3', active: false},
+  ];
+
+  const activate = (index) => {
+    panels.forEach((panel, i) => panel.active = index == i);
+    panels = panels; // for the svelte update
+  }
+</script>
+
+<style>
+  content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  tabs {
+    margin-top: 1em;
+    /* added so you can see it in the display */
+    display: flex;
+    justify-content: space-evenly;
+    border-bottom: var(--color-accent);
+  }
+
+  tabs a {
+    text-decoration: none;
+    color: var(--color-text);
+    border-bottom: 1px solid var(--color-accent);
+    border-width: thin;
+    width: 100%;
+    text-align: center;
+    padding: 2rem 0rem 0.5rem;
+  }
+
+  tabs a:hover {
+    box-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
+  }
+
+  tabs a.active {
+    background-color: var(--color-bg-secondary);
+  }
+
+  panel {
+    display: none;
+  }
+
+  panel.active {
+    border: 1px solid var(--color-accent);
+    display: flex;
+    flex-direction: column;
+    padding: 1em;
+  }
+
+</style>
+
+<content>
+  <h1>Basic Tabs</h1>
+
+  <tabs>
+    <a class="active">Tab1</a>
+    <a>Tab2</a>
+    <a>Tab3</a>
+  </tabs>
+
+  <h1>Interactive Demo</h1>
+  <tabs>
+    {#each panels as panel, i}
+      <a class:active={ panel.active} on:click={ () => activate(i) }>{panel.title}</a>
+    {/each}
+  </tabs>
+  <panels>
+    {#each panels as panel, i}
+      <panel class:active={panel.active}>
+      <h1>{ panel.title }</h1> 
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </p>
+    </panel>
+    {/each}
+  </panels>
+</content>
+