got started on new look. pivoting to api implementations now

src/features/shell/shell.tsx

@@ -6,32 +6,46 @@ import {
 } from "solid-icons/fa";
 import { ParentComponent, Component } from "solid-js";
 import css from "./shell.module.css";
+import { ColorSchemePicker } from "../theme";
 
 export const Shell: ParentComponent = (props) => {
   return (
     <main class={css.container}>
+      <Top />
       <Nav />
 
-      <div class={css.body}>{props.children}</div>
+      <div class={css.body}>
+        <div>{props.children}</div>
+      </div>
     </main>
   );
 };
 
+const Top: Component = (props) => {
+  return (
+    <aside class={css.top}>
+      <ColorSchemePicker />
+    </aside>
+  );
+};
+
 const Nav: Component = (props) => {
   return (
     <nav class={css.nav}>
-      <A href="/">
-        <FaSolidHouseChimney />
-        Home
-      </A>
-      <A href="/library">
-        <FaSolidStar />
-        Library
-      </A>
-      <A href="/search">
-        <FaSolidMagnifyingGlass />
-        Search
-      </A>
+      <ul>
+        <A href="/">
+          <FaSolidHouseChimney />
+          Home
+        </A>
+        <A href="/library">
+          <FaSolidStar />
+          Library
+        </A>
+        <A href="/search">
+          <FaSolidMagnifyingGlass />
+          Search
+        </A>
+      </ul>
     </nav>
   );
 };