Hamburger menu first try

This commit is contained in:
Tobias Berger 2021-09-28 16:37:19 +02:00
parent 416585e0da
commit 0af11dc267
2 changed files with 75 additions and 13 deletions

View file

@ -7,6 +7,7 @@
</script> </script>
<div> <div>
<slot />
<ul> <ul>
{#each tabEntries as [tabName, tab]} {#each tabEntries as [tabName, tab]}
<li> <li>
@ -36,8 +37,6 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
pointer-events: none;
> ul { > ul {
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
@ -46,7 +45,6 @@
padding: 0.2em 0.6em; padding: 0.2em 0.6em;
> li { > li {
pointer-events: initial;
list-style-type: none; list-style-type: none;
display: inline; display: inline;
user-select: none; user-select: none;

View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { AddMessageEvent } from "../shark/Message"; import type { AddMessageEvent } from "../shark/Message";
import type { SharkGame } from "../shark/SharkGame"; import type { SharkGame } from "../shark/SharkGame";
import Log from "./Log.svelte"; import Log from "./Log.svelte";
import ResourceTable from "./ResourceTable/ResourceTable.svelte"; import ResourceTable from "./ResourceTable/ResourceTable.svelte";
@ -9,6 +8,11 @@
export let game: typeof SharkGame; export let game: typeof SharkGame;
$: Game = game; $: Game = game;
let sidebarExpanded = false;
function toggleSidebar(to?: boolean) {
sidebarExpanded = to ?? !sidebarExpanded;
}
function handleAddMessage(event: CustomEvent<AddMessageEvent>) { function handleAddMessage(event: CustomEvent<AddMessageEvent>) {
Game.Log.addMessage(event.detail.message, event.detail.messageType); Game.Log.addMessage(event.detail.message, event.detail.messageType);
} }
@ -18,7 +22,7 @@
</script> </script>
<main> <main>
<div id="left-column"> <div id="left-column" class={sidebarExpanded ? "expanded" : "collapsed"}>
<ResourceTable bind:resources={Game.Resources.Resources} /> <ResourceTable bind:resources={Game.Resources.Resources} />
<Log <Log
bind:logLength={Game.Settings.logLength.current} bind:logLength={Game.Settings.logLength.current}
@ -27,11 +31,33 @@
on:resetLog={handleResetLog} on:resetLog={handleResetLog}
/> />
</div> </div>
<div id="right-column"> <div id="right-column" on:click={() => toggleSidebar(false)}>
<div id="right-top">
<div
role="button"
id="sidebar-toggle"
on:click={(ev) => {
ev.cancelBubble = true;
toggleSidebar();
}}
>
<svg width="1em" height="1em">
<line id="top" x1="0" y1="1px" x2="1em" y2="1px" />
<line id="middle" x1="0" y1="0.5em" x2="1em" y2="0.5em" />
<line
id="bottom"
x1="0"
y1="calc(1em - 1px)"
x2="1em"
y2="calc(1em - 1px)"
/>
</svg>
</div>
<TabSelector <TabSelector
bind:tabs={Game.Tabs.AllTabs} bind:tabs={Game.Tabs.AllTabs}
bind:selectedTab={Game.Tabs.currentTab} bind:selectedTab={Game.Tabs.currentTab}
/> />
</div>
<div id="tab-content"> <div id="tab-content">
<svelte:component <svelte:component
this={Game.Tabs.currentTab} this={Game.Tabs.currentTab}
@ -63,10 +89,7 @@
> #right-column { > #right-column {
height: 100%; height: 100%;
max-height: 100%;
width: 80%; width: 80%;
max-width: 80%;
> #tab-content { > #tab-content {
width: 100%; width: 100%;
// Subtract the height of the TabSelector // Subtract the height of the TabSelector
@ -74,6 +97,47 @@
overflow-y: scroll; overflow-y: scroll;
} }
> #right-top {
display: inline-flex;
width: 100%;
> #sidebar-toggle {
display: none;
cursor: pointer;
width: 1em;
height: 1em;
margin: 10px;
background-color: var(--color-dark);
svg {
stroke: var(--color-lighter);
}
}
}
}
@media screen and (max-width: 700px) {
> #left-column {
position: absolute;
z-index: 1;
transition: transform 0.3s;
&.collapsed {
transform: translate(calc(-100% - 100px));
}
}
> #right-column {
width: 100%;
> #right-top {
> #sidebar-toggle {
display: initial;
}
}
}
} }
} }
</style> </style>