aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/routes/__layout.svelte
diff options
context:
space:
mode:
authorIlion Beyst <ilion.beyst@gmail.com>2022-11-03 20:19:57 +0100
committerIlion Beyst <ilion.beyst@gmail.com>2022-11-03 20:19:57 +0100
commitb1f8062b85ee739e9efb32cbdfde205faaf297d8 (patch)
tree72de67359f6490eddb40ce7c265c3626a8e8e2b2 /web/pw-server/src/routes/__layout.svelte
parent1afd5b5404a1c064abfe6711b95d59ea1bb13022 (diff)
downloadplanetwars.dev-b1f8062b85ee739e9efb32cbdfde205faaf297d8.tar.xz
planetwars.dev-b1f8062b85ee739e9efb32cbdfde205faaf297d8.zip
basic responsive navbar
Diffstat (limited to 'web/pw-server/src/routes/__layout.svelte')
-rw-r--r--web/pw-server/src/routes/__layout.svelte79
1 files changed, 73 insertions, 6 deletions
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte
index 4baefce..6d00a5f 100644
--- a/web/pw-server/src/routes/__layout.svelte
+++ b/web/pw-server/src/routes/__layout.svelte
@@ -1,11 +1,22 @@
<script lang="ts">
+ import { afterNavigate, beforeNavigate } from "$app/navigation";
import UserControls from "$lib/components/navbar/UserControls.svelte";
import "./style.css";
+
+ let isExpanded = false;
+
+ function toggleExpanded() {
+ isExpanded = !isExpanded;
+ }
+
+ afterNavigate(() => {
+ isExpanded = false;
+ });
</script>
<div class="outer-container">
- <div class="navbar">
+ <div class="navbar" class:expanded={isExpanded}>
<div class="navbar-left">
<div class="navbar-header">
<a href="/">PlanetWars</a>
@@ -19,9 +30,16 @@
<div class="navbar-item">
<a href="/docs/rules">How to play</a>
</div>
+ <div class="navbar-divider"></div>
+ <div class="navbar-item">
+ <UserControls />
+ </div>
+
</div>
- <div class="navbar-right">
- <UserControls />
+ <!-- <div class="navbar-right">
+ </div> -->
+ <div class="navbar-expand" on:click={toggleExpanded}>
+ expand
</div>
</div>
<slot />
@@ -30,6 +48,8 @@
<style lang="scss" global>
@import "src/styles/global.scss";
+ $navbarHeight: 48px;
+
.outer-container {
width: 100vw;
height: 100vh;
@@ -38,7 +58,7 @@
}
.navbar {
- height: 48px;
+ height: $navbarHeight;
background-color: $bg-color;
border-bottom: 1px solid;
flex-shrink: 0;
@@ -49,14 +69,20 @@
.navbar-left {
display: flex;
+ width: 100%;
}
.navbar-right {
display: flex;
}
+ .navbar-divider {
+ flex-grow: 1;
+ }
+
.navbar-header {
- margin: auto 0;
+ height: $navbarHeight;
+ padding-top: 12px;
padding-right: 24px;
}
@@ -69,11 +95,52 @@
margin: auto 0;
padding: 0 8px;
}
-
.navbar-item a {
font-size: 14px;
color: #fff;
text-decoration: none;
font-weight: 600;
}
+
+ .navbar-expand {
+ color: white;
+ // margin: auto 0px;
+ display: none;
+ font-size: 16px;
+ padding-top: 14px;
+ }
+ @media screen and (max-width: 600px) {
+ .navbar-item {
+ display: none;
+ }
+
+ .navbar-divider {
+ display: none;
+ }
+
+ .navbar.expanded {
+ height: auto;
+ }
+
+ .navbar.expanded .navbar-left {
+ flex-direction: column;
+ }
+
+ .navbar.expanded .navbar-item {
+ display: block;
+ padding: 8px;
+ }
+
+ .navbar-right {
+ display: none;
+ }
+
+ .navbar.expanded .navbar-right {
+ display: flex;
+ }
+
+ .navbar-expand {
+ display: block;
+ }
+ }
</style>