This is a parody of leetcode.com for designers. It's being developed live on Twitch.tv/zedashaw to demonstrate how to make a parody of a website.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
pixelperfectionist/client/Header.svelte

74 lines
1.9 KiB

<script>
import { logout_user } from '$/client/api.js';
import Icon from '$/client/components/Icon.svelte';
import Darkmode from '$/client/components/Darkmode.svelte';
import {link} from 'svelte-spa-router';
import { user } from "$/client/stores.js";
import { register_enabled } from "$/client/config.js";
export let fixed = false;
</script>
<style>
#logo {
font-family: fancy;
font-size: 2em;
}
header {
background-color: var(--value0);
}
header a {
color: var(--value7);
}
nav {
background-color: var(--value0);
color: var(--value7);
}
nav * {
color: var(--value7);
}
@media only screen and (max-width: 600px) {
#logo {
font-size: 1.5em;
}
}
@media only screen and (max-width: 390px) {
#logo {
font-size: 1.4em;
}
}
</style>
<header class:fixed>
<nav>
{#if $user.authenticated}
<a href="/" use:link id="logo">PP</a>
<ul>
<li><a href="/client/#/explore/">Explore</a></li>
<li><a href="/client/#/problems/">Problems</a></li>
{#if $user.admin }
<li><a href="/admin/#/"><Icon color="var(--value7)" name="keyboard" tooltip="Admin database."/></a></li>
{/if}
</ul>
{:else}
<!-- don't use:link because we want them to go to the landing page if they aren't logged in. -->
<a href="/" use:link id="logo">PP</a>
<ul>
{#if register_enabled}
<li><a href="/client/#/explore/">Explore</a></li>
<li><a href="/client/#/problems/">Problems</a></li>
{/if}
<li><a href="/login/" use:link><Icon color="var(--value7)" name="log-in" tooltip="Log in." /></a></li>
<li><a href="/client/#/"><Icon color="var(--value7)" name="book" tooltip="Docs" /></a></li>
<li><Darkmode dark_icon_color="var(--value7)" light_icon_color="var(--value7)" /></li>
</ul>
{/if}
</nav>
</header>