From 0af11dc2674da11d15a23d073d66d2399b12ce8c Mon Sep 17 00:00:00 2001 From: Tobias Berger Date: Tue, 28 Sep 2021 16:37:19 +0200 Subject: [PATCH] Hamburger menu first try --- src/components/TabSelector.svelte | 4 +- src/components/Wrapper.svelte | 84 +++++++++++++++++++++++++++---- 2 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/components/TabSelector.svelte b/src/components/TabSelector.svelte index c3221df..ee5e65d 100644 --- a/src/components/TabSelector.svelte +++ b/src/components/TabSelector.svelte @@ -7,6 +7,7 @@
+
    {#each tabEntries as [tabName, tab]}
  • @@ -36,8 +37,6 @@ margin: 0; padding: 0; - pointer-events: none; - > ul { text-align: center; font-weight: bold; @@ -46,7 +45,6 @@ padding: 0.2em 0.6em; > li { - pointer-events: initial; list-style-type: none; display: inline; user-select: none; diff --git a/src/components/Wrapper.svelte b/src/components/Wrapper.svelte index d1c8011..fb9f57b 100644 --- a/src/components/Wrapper.svelte +++ b/src/components/Wrapper.svelte @@ -1,6 +1,5 @@
    -
    +
    -
    - +
    toggleSidebar(false)}> +
    + + +
    #right-column { height: 100%; - max-height: 100%; width: 80%; - max-width: 80%; - > #tab-content { width: 100%; // Subtract the height of the TabSelector @@ -74,6 +97,47 @@ 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; + } + } + } } }