ui: Added modal component, added a logging you in/out to try it.

marko/components/menu/component.js

@@ -0,0 +1,16 @@
+module.exports = class {
+  onCreate() {
+    this.state = {
+      loggingIn: false,
+      loggingOut: false,
+    }
+  }
+
+  loginClicked() {
+    this.state.loggingIn = true
+  }
+
+  logoutClicked() {
+    this.state.loggingOut = true
+  }
+}

marko/components/menu/index.marko

@@ -3,8 +3,15 @@
   <if(input.user != null)>
     <menu-gap />
     <menu-header>User</menu-header>
-    <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login">Login</menu-link>
-    <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout">Logout <span class="weak">(${input.user.name})</span></menu-link>
+    <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
+    <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
+  
+    <modal enabled=state.loggingIn notification title="Logging you in..." on-close("closeModal")>
+      <p>You may be redirected to Auth0 if it's been a while.</p>
+    </modal>
+    <modal enabled=state.loggingOut notification title="Logging you out..." on-close("closeModal")>
+      <p>You can probably log back in without entering your info if you're quick.</p>
+    </modal>
   </if>
   <else-if(!input.allowNoUser)>
     <menu-blurb class="error">input.user is missing!</menu-blurb>

marko/components/modal/component.js

@@ -0,0 +1,5 @@
+module.exports = class {
+  closeModal() {
+    this.emit("close")
+  }
+}

marko/components/modal/index.marko

@@ -0,0 +1,11 @@
+<if(input.enabled)>
+  <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
+    <div class="overlay-options color-menu">
+      <div if(input.closable) on-click("closeModal")>X</div>
+    </div>
+    <h1 class="color-primary" if(input.title)>${input.title}</h1>
+    <div class="modal color-text">
+      <include(input.renderBody) />
+    </div>
+  </div>
+</if>

marko/components/modal/style.less

@@ -0,0 +1,47 @@
+div.overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  padding-top: 4em;
+  z-index: 999;
+
+  background-color: rgba(0, 0, 0, 0.75);
+
+  overflow-y: auto;
+
+  h1 {
+    text-align: center;
+  }
+  
+  div.modal {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+  }
+
+  div.overlay-options {
+    width: 60ch;
+    max-width: 95%;
+    margin: auto;
+    text-align: right;
+
+    div {
+      opacity: 0.75;
+      user-select: none;
+      cursor: pointer;
+    }
+    div:hover {
+      opacity: 1;
+    }
+  }
+}
+
+div.overlay.notification-overlay {
+  padding-top: 20%;
+
+  div.modal {
+    text-align: center;
+  }
+}

marko/page/story/components/story-menu/index.marko

@@ -1,11 +1,11 @@
 <menu user=input.user>
   <menu-header>Story</menu-header>
-  <menu-link selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
+  <menu-link key="index" selected=input.selected.index icon="S" href="/story/">Stories</menu-link>
   <menu-gap />
   <menu-header>Categories</menu-header>
-  <menu-link for(category in (input.categories||[])) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
+  <menu-link for(category in (input.categories||[])) key=(category.name) selected=(input.selected.category == category.name) href=`/story/by-category/${category.name}` icon=category.name.charAt(0)>${category.name}</menu-link>
   <menu-gap />
   <menu-header>Tags</menu-header>
-  <menu-link for(tag in (input.menuTags||[])) selected=(input.selected.tag === `${tag.kind}:${tag.name}`) href=`/story/by-tag/${tag.kind}/${tag.name}` textClass=`color-tag-${tag.kind.toLowerCase()}` icon=tag.kind.charAt(0)>${tag.name}</menu-link>
+  <menu-link for(tag in (input.menuTags||[])) key=(tag.kind+":"+tag.name) selected=(input.selected.tag === `${tag.kind}:${tag.name}`) href=`/story/by-tag/${tag.kind}/${tag.name}` textClass=`color-tag-${tag.kind.toLowerCase()}` icon=tag.kind.charAt(0)>${tag.name}</menu-link>
   <menu-link selected=input.selected.tags icon="T" href="/story/tag-list/">Tags</menu-link>
 </menu>