feat(lluis): add <NavBar />

kantord · May 5, 2021 · 2fee850 · 2fee850 · vercel · May 5, 2021
1 parent ec2ca35
commit 2fee850
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 48 deletions.
diff --git a/apps/lluis/NavBar.svelte b/apps/lluis/NavBar.svelte
@@ -0,0 +1,46 @@
+<script lang="typescript">
+  export let dark = false
+  export let is_hidden_mobile = false
+</script>
+
+<nav
+  class="navbar"
+  class:dark
+  class:is-hidden-mobile={is_hidden_mobile}
+  role="navigation"
+  aria-label="main navigation"
+>
+
+  <div class="navbar-brand">
+    <a class="navbar-item" href="/">
+      <img src="/images/logo.svg" alt="LibreLingo" />
+    </a>
+  </div>
+
+  <div class="navbar-start"></div>
+
+  <div class="navbar-end">
+    <div class="navbar-item">
+  <div class="buttons">
+  <slot name="buttons" />
+  </div>
+    </div>
+  </div>
+
+</nav>
+
+<style type="text/scss">
+  .navbar.dark {
+    background: var(--navbar-dark-background);
+    color: var(--navbar-dark-text-color);
+  }
+
+  .navbar {
+    border: 0;
+    .navbar-end {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+</style>
diff --git a/apps/web/src/components/NavBar.svelte b/apps/web/src/components/NavBar.svelte
@@ -3,6 +3,7 @@
   import authStore from "../auth"
   import SponsorButton from "./SponsorButton.svelte"
   import GitHubButton from "./GitHubButton.svelte"
+  import NavBar from "lluis/NavBar.svelte"
   import Icon from "lluis/Icon.svelte"
   import Button from "lluis/Button.svelte"
   import ButtonLink from "lluis/ButtonLink.svelte"
@@ -14,56 +15,39 @@
     _Logout: () => void
   }
   const _Logout = () => (window as unknown as WindowWithLogout)._Logout()
-</script>
-
-<nav
-  class="navbar"
-  class:dark
-  class:is-hidden-mobile="{is_hidden_mobile}"
-  role="navigation"
-  aria-label="main navigation"
->
-  <div class="navbar-brand">
-    <a class="navbar-item" href="/">
-      <img src="/images/logo.svg" alt="LibreLingo" />
-    </a>
-  </div>
 
-  <div class="navbar-start"></div>
+</script>
 
-  <div class="navbar-end">
-    <div class="navbar-item">
-      <div class="buttons">
-        <SponsorButton />
-        <GitHubButton />
-        {#if hasAuth && settings.features.authEnabled}
-          {#if $authStore.user}
-            <Button size="small" outlined inverted info>
-              <Icon size="small" icon="user" />
-              <span>{$authStore.user.name}</span>
-            </Button>
-            <Button
-              on:click="{() => _Logout()}"
-              size="small"
-              outlined
-              inverted
-              info
-            >
-              Log out
-            </Button>
-          {:else}
-            <ButtonLink href="/sign-up" size="small" outlined inverted info>
-              Sign up
-            </ButtonLink>
-            <ButtonLink href="/login" size="small" outlined inverted info>
-              Log in
-            </ButtonLink>
-          {/if}
-        {/if}
-      </div>
-    </div>
-  </div>
-</nav>
+<NavBar dark>
+  <span slot="buttons">
+    <SponsorButton />
+    <GitHubButton />
+    {#if hasAuth && settings.features.authEnabled}
+      {#if $authStore.user}
+        <Button size="small" outlined inverted info>
+          <Icon size="small" icon="user" />
+          <span>{$authStore.user.name}</span>
+        </Button>
+        <Button
+          on:click="{() => _Logout()}"
+          size="small"
+          outlined
+          inverted
+          info
+        >
+          Log out
+        </Button>
+      {:else}
+        <ButtonLink href="/sign-up" size="small" outlined inverted info>
+          Sign up
+        </ButtonLink>
+        <ButtonLink href="/login" size="small" outlined inverted info>
+          Log in
+        </ButtonLink>
+      {/if}
+    {/if}
+  </span>
+</NavBar>
 
 <style type="text/scss">
   @import "../variables";

diff --git a/apps/web/src/mystyles.scss b/apps/web/src/mystyles.scss
@@ -57,3 +57,11 @@
 
 
 @import "~bulmaswatch/lumen/overrides.scss";
+
+:root {
+    --blue: #325f74;
+    --white: #bfb5af;
+
+    --navbar-dark-background: var(--blue);
+    --navbar-dark-text-color: var(--white);
+}