add a settings nav

assets/global.css

@@ -25,6 +25,7 @@ h1 {
 
 a {
 	color: royalblue;
+	text-decoration: none;
 }
 
 a:visited {

routes/_components/Layout.html

@@ -1,4 +1,4 @@
-<Nav page={{page}}/>
+<Nav page={{page}} />
 
 <main>
 	<slot></slot>

routes/settings/_components/SettingsLayout.html

@@ -0,0 +1,14 @@
+<SettingsNav page={{page}} />
+
+<div class="settings">
+  <slot></slot>
+</div>
+<script>
+  import SettingsNav from './SettingsNav.html';
+
+  export default {
+    components: {
+      SettingsNav
+    }
+  };
+</script>

routes/settings/_components/SettingsNav.html

@@ -0,0 +1,42 @@
+<nav>
+  <ul>
+    <li>
+      <a class='{{page === "home"  ? "selected" : ""}}' href='/settings'>
+        Settings
+      </a>
+    </li>
+    <li>
+      <a class='{{page === "about"  ? "selected" : ""}}' href='/settings/about'>
+        About
+      </a>
+    </li>
+    <li>
+      <a class='{{page === "add-instance" ? "selected" : ""}}' href='/settings/add-instance'>
+        Add an instance
+      </a>
+    </li>
+  </ul>
+</nav>
+
+<style>
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: center;
+  }
+
+  li {
+    margin: 10px 15px 20px;
+  }
+
+  a {
+    font-size: 1.2em;
+  }
+
+  a.selected {
+    font-weight: bold;
+  }
+
+</style>

routes/settings/about.html

@@ -0,0 +1,25 @@
+<:Head>
+  <title>About</title>
+</:Head>
+
+<Layout page='settings'>
+  <SettingsLayout page='about'>
+    <h1>About</h1>
+
+    <p>Pinafore is open-source software created by Nolan Lawson.</p>
+
+    <p>Icon thanks to sailboat by Gregor Cresnar from the Noun Project.</p>
+  </SettingsLayout>
+</Layout>
+
+<script>
+  import Layout from '../_components/Layout.html';
+  import SettingsLayout from './_components/SettingsLayout.html'
+
+  export default {
+    components: {
+      Layout,
+      SettingsLayout
+    }
+  };
+</script>

routes/settings/add-instance.html

@@ -3,17 +3,19 @@
 </:Head>
 
 <Layout page='settings'>
-  <h1>Add an instance</h1>
+  <SettingsLayout page='add-instance'>
+    <h1>Add an instance</h1>
 
-  <p>Log in to your instance to use Pinafore.</p>
+    <p>Log in to your instance to use Pinafore.</p>
 
-  <form on:submit='handleSubmit(event)'>
-    <label for="instanceInput">Instance name:</label>
-    <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
-    <button class="primary" type="submit" id="submitButton">Add instance</button>
-  </form>
+    <form on:submit='handleSubmit(event)'>
+      <label for="instanceInput">Instance name:</label>
+      <input type="text" id="instanceInput" bind:value='$instanceNameInSearch' placeholder=''>
+      <button class="primary" type="submit" id="submitButton">Add instance</button>
+    </form>
 
-  <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+    <p>Don't have an instance? <a href="https://joinmastodon.org">Join Mastodon!</a></p>
+  </SettingsLayout>
 </Layout>
 <style>
   @media (max-width: 767px) {
@@ -40,6 +42,7 @@
 </style>
 <script>
   import Layout from '../_components/Layout.html';
+  import SettingsLayout from './_components/SettingsLayout.html'
   import { registerApplication, generateAuthLink, getAccessTokenFromAuthCode } from '../_utils/mastodon'
   import { databasePromise } from '../_utils/database'
   import { store } from '../_utils/store'
@@ -57,7 +60,8 @@
       }
     },
     components: {
-      Layout
+      Layout,
+      SettingsLayout
     },
     store: () => store,
     methods: {

routes/settings/index.html

@@ -3,17 +3,20 @@
 </:Head>
 
 <Layout page='settings'>
-  <h1>Settings</h1>
+  <SettingsLayout page='home'>
+    <h1>Settings</h1>
 
-  <p>This is the 'settings' page. There's not much here.</p>
+  </SettingsLayout>
 </Layout>
 
 <script>
   import Layout from '../_components/Layout.html';
+  import SettingsLayout from './_components/SettingsLayout.html'
 
   export default {
     components: {
-      Layout
+      Layout,
+      SettingsLayout
     }
   };
 </script>

templates/2xx.html

@@ -33,6 +33,5 @@
 	     and anything else it needs to hydrate the app and
 	     initialise the router -->
 	<script src='%sapper.main%'></script>
-<!-- Icon thanks to sailboat by Gregor Cresnar from the Noun Project -->
 </body>
 </html>