use icon for navbar expand

This commit is contained in:
Ilion Beyst 2022-11-07 16:26:13 +01:00
parent 9ed7d7ab2f
commit 06fa72fe1c
2 changed files with 7 additions and 1 deletions

View file

@ -35,12 +35,14 @@
"vite-plugin-wasm-pack": "^0.1.9" "vite-plugin-wasm-pack": "^0.1.9"
}, },
"dependencies": { "dependencies": {
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@sveltejs/adapter-node": "^1.0.0-next.69", "@sveltejs/adapter-node": "^1.0.0-next.69",
"@types/luxon": "^2.0.9", "@types/luxon": "^2.0.9",
"ace-builds": "^1.4.14", "ace-builds": "^1.4.14",
"dayjs": "^1.10.7", "dayjs": "^1.10.7",
"planetwars-rs": "file:../planetwars-rs/pkg", "planetwars-rs": "file:../planetwars-rs/pkg",
"pw-visualizer": "file:../pw-visualizer", "pw-visualizer": "file:../pw-visualizer",
"svelte-fa": "^3.0.3",
"svelte-select": "^5.0.0-beta.31" "svelte-select": "^5.0.0-beta.31"
}, },
"type": "module" "type": "module"

View file

@ -2,10 +2,13 @@
import { afterNavigate } from "$app/navigation"; import { afterNavigate } from "$app/navigation";
import "./style.css"; import "./style.css";
import Fa from 'svelte-fa'
import { faBars } from '@fortawesome/free-solid-svg-icons'
import { get_session_token, clear_session_token } from "$lib/auth"; import { get_session_token, clear_session_token } from "$lib/auth";
import { currentUser } from "$lib/stores/current_user"; import { currentUser } from "$lib/stores/current_user";
import { onMount } from "svelte"; import { onMount } from "svelte";
// TODO: ideally we'd not store this in the user session, // TODO: ideally we'd not store this in the user session,
@ -60,7 +63,7 @@
<img alt="logo" src="/ship.svg" height="32px'" /> <img alt="logo" src="/ship.svg" height="32px'" />
PlanetWars PlanetWars
</a> </a>
<div class="navbar-expand" on:click={toggleExpanded}>expand</div> <div class="navbar-expand" on:click={toggleExpanded}><Fa icon={faBars} /></div>
<div class="navbar-items"> <div class="navbar-items">
<div class="navbar-item"> <div class="navbar-item">
<a href="/editor">Editor</a> <a href="/editor">Editor</a>
@ -184,6 +187,7 @@
display: none; display: none;
font-size: 16px; font-size: 16px;
height: $navbarHeight; height: $navbarHeight;
cursor: pointer;
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.navbar-items { .navbar-items {