From 806646ec06950c6332c3d991e846e7d5b7f818fd Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Thu, 29 Aug 2024 03:53:54 +0200
Subject: [PATCH] More styling of the new menu UX

---
 public/css/index-tailwind-output.css     |  51 ++-
 src/Logic/Web/ThemeViewStateHashActor.ts |  39 +-
 src/UI/Base/DrawerLeft.svelte            |  12 +-
 src/UI/Base/Link.svelte                  |   2 +-
 src/UI/Base/LogoutButton.svelte          |   5 +-
 src/UI/Base/Page.svelte                  |  14 +-
 src/UI/BigComponents/FilterPage.svelte   |   6 +-
 src/UI/BigComponents/MenuDrawer.svelte   | 455 +++++++++++++----------
 src/UI/Map/RasterLayerOverview.svelte    |   7 +-
 src/UI/ThemeViewGUI.svelte               |   4 +-
 src/index.css                            |   4 +
 11 files changed, 353 insertions(+), 246 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 89a5008ca..94b9781aa 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -1041,8 +1041,8 @@ video {
   margin-bottom: 0.5rem;
 }
 
-.mr-10 {
-  margin-right: 2.5rem;
+.mr-16 {
+  margin-right: 4rem;
 }
 
 .mb-1\.5 {
@@ -1280,6 +1280,10 @@ video {
   height: 1.25rem;
 }
 
+.h-14 {
+  height: 3.5rem;
+}
+
 .h-16 {
   height: 4rem;
 }
@@ -1420,10 +1424,6 @@ video {
   height: 0.625rem;
 }
 
-.h-14 {
-  height: 3.5rem;
-}
-
 .h-72 {
   height: 18rem;
 }
@@ -1440,6 +1440,10 @@ video {
   max-height: 3rem;
 }
 
+.max-h-full {
+  max-height: 100%;
+}
+
 .max-h-24 {
   max-height: 6rem;
 }
@@ -1448,10 +1452,6 @@ video {
   max-height: 16rem;
 }
 
-.max-h-full {
-  max-height: 100%;
-}
-
 .max-h-60 {
   max-height: 15rem;
 }
@@ -1530,6 +1530,10 @@ video {
   width: 1.25rem;
 }
 
+.w-14 {
+  width: 3.5rem;
+}
+
 .w-1\/2 {
   width: 50%;
 }
@@ -1620,10 +1624,6 @@ video {
   width: 2.25rem;
 }
 
-.w-14 {
-  width: 3.5rem;
-}
-
 .w-2 {
   width: 0.5rem;
 }
@@ -2356,6 +2356,11 @@ video {
   border-radius: 0.125rem;
 }
 
+.rounded-t-lg {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
 .rounded-b {
   border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
@@ -2366,11 +2371,6 @@ video {
   border-bottom-left-radius: 0.5rem;
 }
 
-.rounded-t-lg {
-  border-top-left-radius: 0.5rem;
-  border-top-right-radius: 0.5rem;
-}
-
 .rounded-b-\[1rem\] {
   border-bottom-right-radius: 1rem;
   border-bottom-left-radius: 1rem;
@@ -3302,6 +3302,10 @@ video {
   padding: 0.125rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .p-5 {
   padding: 1.25rem;
 }
@@ -4963,6 +4967,10 @@ svg.apply-fill path {
   max-width: 100%;
 }
 
+.max-w-screen {
+  max-width: 100vw;
+}
+
 /************************* Experimental support for foldable devices ********************************/
 
 @media (horizontal-viewport-segments: 2) {
@@ -7562,6 +7570,11 @@ svg.apply-fill path {
     padding: 0px;
   }
 
+  .md\:px-5 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+
   .md\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
diff --git a/src/Logic/Web/ThemeViewStateHashActor.ts b/src/Logic/Web/ThemeViewStateHashActor.ts
index d4c75296a..da76842c5 100644
--- a/src/Logic/Web/ThemeViewStateHashActor.ts
+++ b/src/Logic/Web/ThemeViewStateHashActor.ts
@@ -1,10 +1,10 @@
 import ThemeViewState from "../../Models/ThemeViewState"
 import Hash from "./Hash"
 import { MenuState } from "../../Models/MenuState"
-import hash from "svelte/types/compiler/compile/utils/hash"
 
 export default class ThemeViewStateHashActor {
     private readonly _state: ThemeViewState
+    private isUpdatingHash = false
 
     public static readonly documentation = [
         "The URL-hash can contain multiple values:",
@@ -49,11 +49,13 @@ export default class ThemeViewStateHashActor {
 
         // Register a hash change listener to correctly handle the back button
         Hash.hash.addCallback((hash) => {
-                console.trace("Going back with hash", hash)
+            if(this.isUpdatingHash){
+                return
+            }
             if (!hash) {
                 this.back()
-            }else{
-                if(!this.loadStateFromHash(hash)){
+            } else {
+                if (!this.loadStateFromHash(hash)) {
                     this.loadSelectedElementFromHash(hash)
                 }
             }
@@ -121,25 +123,30 @@ export default class ThemeViewStateHashActor {
      * returns 'true' if a hash was set
      */
     private setHash(): boolean {
-        const selectedElement = this._state.selectedElement.data
-        if(selectedElement){
-            Hash.hash.set(selectedElement.properties.id)
-            return true
-        }
-        for (const page in this._state.guistate.pageStates) {
-            const toggle = this._state.guistate.pageStates[page]
-            if (toggle.data) {
-                Hash.hash.set(page)
+        this.isUpdatingHash = true
+        try {
+
+            const selectedElement = this._state.selectedElement.data
+            if (selectedElement) {
+                Hash.hash.set(selectedElement.properties.id)
                 return true
             }
+            for (const page in this._state.guistate.pageStates) {
+                const toggle = this._state.guistate.pageStates[page]
+                if (toggle.data) {
+                    Hash.hash.set(page)
+                    return true
+                }
+            }
+            Hash.hash.set(undefined)
+            return false
+        } finally {
+            this.isUpdatingHash = false
         }
-        Hash.hash.set(undefined)
-        return false
     }
 
     private back() {
         const state = this._state
-        console.log("Got a 'back' event")
         if (state.previewedImage.data) {
             state.previewedImage.setData(undefined)
             return
diff --git a/src/UI/Base/DrawerLeft.svelte b/src/UI/Base/DrawerLeft.svelte
index 44c937a2e..d12ba07ba 100644
--- a/src/UI/Base/DrawerLeft.svelte
+++ b/src/UI/Base/DrawerLeft.svelte
@@ -9,10 +9,20 @@
     duration: 200,
     easing: sineIn
   };
+  let hidden = !shown.data
+  $: {
+    shown.setData(!hidden)
+  }
+  shown.addCallback(sh => {
+    hidden = !sh
+  })
 </script>
 
 
-<Drawer placement="left" transitionType="fly" transitionParams={transitionParams} hidden={!$shown} on:close={() => shown.set(false)}>
+<Drawer placement="left"
+        transitionType="fly" {transitionParams}
+        divClass = "overflow-y-auto z-50 "
+        bind:hidden={hidden}>
   <slot>
     CONTENTS
   </slot>
diff --git a/src/UI/Base/Link.svelte b/src/UI/Base/Link.svelte
index 6512856ee..6456c5361 100644
--- a/src/UI/Base/Link.svelte
+++ b/src/UI/Base/Link.svelte
@@ -13,7 +13,7 @@
 </script>
 
 <a
-  href={Utils.prepareHref(href)}
+  href={Utils.prepareHref(href) }
   aria-label={ariaLabel}
   title={ariaLabel}
   target={newTab ? "_blank" : undefined}
diff --git a/src/UI/Base/LogoutButton.svelte b/src/UI/Base/LogoutButton.svelte
index 6ca1d1c0d..e0ff7dc79 100644
--- a/src/UI/Base/LogoutButton.svelte
+++ b/src/UI/Base/LogoutButton.svelte
@@ -1,18 +1,19 @@
 <script lang="ts">
   import { OsmConnection } from "../../Logic/Osm/OsmConnection"
-  import Logout from "../../assets/svg/Logout.svelte"
   import Translations from "../i18n/Translations"
   import Tr from "./Tr.svelte"
   import ArrowRightOnRectangle from "@babeard/svelte-heroicons/solid/ArrowRightOnRectangle"
 
   export let osmConnection: OsmConnection
+  export let clss = ""
 </script>
 
 <button
+  class={clss}
   on:click={() => {
     osmConnection.LogOut()
   }}
 >
-  <ArrowRightOnRectangle class="h-6 w-6" />
+  <ArrowRightOnRectangle class="h-6 w-6 max-h-full" />
   <Tr t={Translations.t.general.logout} />
 </button>
diff --git a/src/UI/Base/Page.svelte b/src/UI/Base/Page.svelte
index 5eb398b6d..b3b7d977d 100644
--- a/src/UI/Base/Page.svelte
+++ b/src/UI/Base/Page.svelte
@@ -16,16 +16,20 @@
   if (fullscreen) {
     defaultClass = shared
   }
-  let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 z-50 w-full p-4 flex";
-  if(fullscreen){
+  let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 z-50 w-full p-4 flex"
+  if (fullscreen) {
     dialogClass += " h-full-child"
   }
   let bodyClass = "h-full p-4 md:p-5 space-y-4 flex-1 overflow-y-auto overscroll-contain"
+  let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg";
 </script>
 
 {#if !onlyLink}
-  <Modal open={_shown} on:close={() => shown.set(false)} size="xl" {defaultClass} {bodyClass} {dialogClass} color="none">
-    <slot name="header" slot="header" />
+  <Modal open={_shown} on:close={() => shown.set(false)} size="xl" {defaultClass} {bodyClass} {dialogClass} {headerClass}
+         color="none">
+    <h1 slot="header" class="w-full">
+      <slot name="header" />
+    </h1>
     <slot />
     {#if $$slots.footer}
       <slot name="footer" />
@@ -33,6 +37,8 @@
   </Modal>
 {:else}
   <button class="as-link" on:click={() => shown.setData(true)}>
+    <slot name="link">
     <slot name="header" />
+    </slot>
   </button>
 {/if}
diff --git a/src/UI/BigComponents/FilterPage.svelte b/src/UI/BigComponents/FilterPage.svelte
index 93b8b5e52..264c91598 100644
--- a/src/UI/BigComponents/FilterPage.svelte
+++ b/src/UI/BigComponents/FilterPage.svelte
@@ -50,7 +50,11 @@
 </script>
 
 <Page {onlyLink} shown={state.guistate.pageStates.filter}>
-  <div class="mr-10 flex w-full flex-wrap items-center justify-between" slot="header">
+  <div class="flex" slot="link">
+    <Filter class="h-6 w-6 pr-2" />
+    <Tr t={Translations.t.general.menu.filter} />
+  </div>
+  <div class="mr-16 flex w-full flex-wrap items-center justify-between" slot="header">
     <div class="flex">
       <Filter class="h-6 w-6 pr-2" />
       <Tr t={Translations.t.general.menu.filter} />
diff --git a/src/UI/BigComponents/MenuDrawer.svelte b/src/UI/BigComponents/MenuDrawer.svelte
index 6fadec878..ada4a9adf 100644
--- a/src/UI/BigComponents/MenuDrawer.svelte
+++ b/src/UI/BigComponents/MenuDrawer.svelte
@@ -11,7 +11,7 @@
   import CommunityIndexView from "./CommunityIndexView.svelte"
   import Community from "../../assets/svg/Community.svelte"
   import LoginToggle from "../Base/LoginToggle.svelte"
-  import { Avatar, Sidebar, SidebarWrapper } from "flowbite-svelte"
+  import {  Sidebar, SidebarWrapper } from "flowbite-svelte"
   import HotkeyTable from "./HotkeyTable.svelte"
   import { Utils } from "../../Utils"
   import Constants from "../../Models/Constants"
@@ -45,6 +45,7 @@
   import ThemeIntroPanel from "./ThemeIntroPanel.svelte"
   import Marker from "../Map/Marker.svelte"
   import LogoutButton from "../Base/LogoutButton.svelte"
+  import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
 
   export let state: ThemeViewState
   let userdetails = state.osmConnection.userDetails
@@ -58,239 +59,297 @@
   export let onlyLink: boolean
 </script>
 
-<Sidebar>
-  <SidebarWrapper divClass="link-underline">
+<Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
+<h2>Menu</h2>
+    <div class="flex flex-col">
 
-    <!-- User related: avatar, settings, favourits, logout -->
-    <div>
-      <LoginToggle {state} >
-        <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
-        <div class="flex">
-
-          <Avatar src={$userdetails.img} rounded />
-          Welcome <b>{$userdetails.name}</b>
-        </div>
-        <LogoutButton osmConnection={state.osmConnection}/>
-      </LoginToggle>
-
-
-      <Page {onlyLink} shown={pg.usersettings}>
-        <div class="flex" slot="header">
-          <CogIcon class="h-6 w-6" />
-          <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
-        </div>
-
-        <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
+      <!-- User related: avatar, settings, favourits, logout -->
+      <div class="sidebar-unit">
         <LoginToggle {state}>
-          <div class="flex flex-col" slot="not-logged-in">
-            <LanguagePicker availableLanguages={layout.language} />
-            <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
-            <LoginButton clss="primary" osmConnection={state.osmConnection} />
+          <LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
+          <div class="flex gap-x-2">
+            {#if $userdetails.img}
+              <img src={$userdetails.img} class="rounded-full w-14 h-14" />
+            {/if}
+            <div class="flex flex-col justify-between">
+              <b>{$userdetails.name}</b>
+
+            </div>
           </div>
-          <SelectedElementView
-            highlightedRendering={state.guistate.highlightedUserSetting}
-            layer={usersettingslayer}
-            selectedElement={{
+        </LoginToggle>
+
+
+        <Page {onlyLink} shown={pg.usersettings}>
+          <div class="flex" slot="header">
+            <CogIcon class="h-6 w-6" />
+            <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
+          </div>
+
+          <!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
+          <LoginToggle {state}>
+            <div class="flex flex-col" slot="not-logged-in">
+              <LanguagePicker availableLanguages={layout.language} />
+              <Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
+              <LoginButton clss="primary" osmConnection={state.osmConnection} />
+            </div>
+            <SelectedElementView
+              highlightedRendering={state.guistate.highlightedUserSetting}
+              layer={usersettingslayer}
+              selectedElement={{
                 type: "Feature",
                 properties: { id: "settings" },
                 geometry: { type: "Point", coordinates: [0, 0] },
               }}
 
-            {state}
-            tags={state.userRelatedState.preferencesAsTags}
-          />
+              {state}
+              tags={state.userRelatedState.preferencesAsTags}
+            />
+          </LoginToggle>
+
+
+        </Page>
+
+        <LoginToggle {state}>
+          <Page {onlyLink} shown={pg.favourites}>
+
+            <div class="flex" slot="header">
+              <HeartIcon class="h-6 w-6" />
+              <Tr t={Translations.t.favouritePoi.tab} />
+            </div>
+            <h3>
+
+              <Tr t={Translations.t.favouritePoi.title} />
+            </h3>
+            <div>
+              <Favourites {state} />
+              <h3>
+                <Tr t={Translations.t.reviews.your_reviews} />
+              </h3>
+              <ReviewsOverview {state} />
+            </div>
+          </Page>
+          <div class="self-end">
+            <LogoutButton osmConnection={state.osmConnection}  />
+          </div>
         </LoginToggle>
 
 
-      </Page>
+        <LanguagePicker/>
 
-      <LoginToggle {state}>
-      <Page {onlyLink} shown={pg.favourites}>
+      </div>
 
-        <div class="flex" slot="header">
-          <HeartIcon class="h-6 w-6" />
-          <Tr t={Translations.t.favouritePoi.tab} />
-        </div>
+
+      <!-- Theme related: documentation links, download, ... -->
+      <div class="sidebar-unit">
         <h3>
-
-          <Tr t={Translations.t.favouritePoi.title} />
+          About this map
         </h3>
-        <div>
-          <Favourites {state} />
-          <h3>
-            <Tr t={Translations.t.reviews.your_reviews} />
-          </h3>
-          <ReviewsOverview {state} />
-        </div>
-      </Page>
-      </LoginToggle>
 
-
-
-    </div>
-
-
-    <!-- Theme related: documentation links, download, ... -->
-    <div>
-      <h3>
-        About {layout.id}
-      </h3>
-
-      <Page {onlyLink} shown={pg.about_theme}>
-        <div class="flex" slot="header">
-          <Marker icons={layout.icon} size="h-4 w-4" />
-          <Tr t={layout.title} />
-        </div>
-        <ThemeIntroPanel {state} />
-      </Page>
-
-      <FilterPage {onlyLink} {state} />
-
-      <RasterLayerOverview {onlyLink} {state} />
-
-      <Page {onlyLink} shown={pg.share}>
-        <div class="flex" slot="header">
-          <Share class="h-4 w-4" />
-          <Tr t={Translations.t.general.sharescreen.title} />
-        </div>
-        <ShareScreen {state} />
-      </Page>
-
-
-      {#if state.featureSwitches.featureSwitchEnableExport}
-        <Page {onlyLink} shown={pg.download}>
-          <div slot="header" class="flex">
-            <ArrowDownTray class="h-4 w-4" />
-            <Tr t={Translations.t.general.download.title} />
+        <Page {onlyLink} shown={pg.about_theme}>
+          <dic slot="link">
+            Show introduction
+          </dic>
+          <div class="flex" slot="header">
+            <Marker icons={layout.icon} size="h-4 w-4" />
+            <Tr t={layout.title} />
           </div>
-          <DownloadPanel {state} />
+          <ThemeIntroPanel {state} />
         </Page>
-      {/if}
 
-      {#if layout.official}
-        <a
-          class="flex"
-          href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
+        <FilterPage {onlyLink} {state} />
+
+        <RasterLayerOverview {onlyLink} {state} />
+
+        <Page {onlyLink} shown={pg.share}>
+          <div class="flex" slot="header">
+            <Share class="h-4 w-4" />
+            <Tr t={Translations.t.general.sharescreen.title} />
+          </div>
+          <ShareScreen {state} />
+        </Page>
+
+
+        {#if state.featureSwitches.featureSwitchEnableExport}
+          <Page {onlyLink} shown={pg.download}>
+            <div slot="header" class="flex">
+              <ArrowDownTray class="h-4 w-4" />
+              <Tr t={Translations.t.general.download.title} />
+            </div>
+            <DownloadPanel {state} />
+          </Page>
+        {/if}
+
+        {#if layout.official}
+          <a
+            class="flex"
+            href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
         layout.id +
         ".md"}
-          target="_blank"
-        >
-          <DocumentMagnifyingGlass class="h-6 w-6" />
-          <Tr
-            t={Translations.t.general.attribution.openThemeDocumentation.Subs({
+            target="_blank"
+          >
+            <DocumentMagnifyingGlass class="h-6 w-6" />
+            <Tr
+              t={Translations.t.general.attribution.openThemeDocumentation.Subs({
           name: layout.title,
         })}
-          />
+            />
+          </a>
+
+          <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
+            <DocumentChartBar class="h-6 w-6" />
+            <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
+          </a>
+        {/if}
+      </div>
+
+
+      <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
+      <div class="sidebar-unit">
+
+        <h3>
+          Discover more
+        </h3>
+
+        <Page {onlyLink} shown={pg.community_index}>
+          <div class="flex gap-x-2" slot="header">
+            <Community class="h-6 w-6" />
+            <Tr t={Translations.t.communityIndex.title} />
+          </div>
+          <CommunityIndexView location={state.mapProperties.location} />
+        </Page>
+
+
+        <If condition={featureSwitches.featureSwitchEnableLogin}>
+          <OpenIdEditor mapProperties={state.mapProperties} />
+          <OpenJosm {state} />
+          <MapillaryLink large={false} mapProperties={state.mapProperties} />
+        </If>
+
+      </div>
+
+
+      <!-- About MC: various outward links, legal info, ... -->
+      <div class="sidebar-unit">
+
+        <h3>
+          <Tr t={Translations.t.general.menu.aboutMapComplete} />
+        </h3>
+
+        {#if $showHome}
+          <a class="flex" href={Utils.HomepageLink()}>
+            <Add class="h-6 w-6" />
+            {#if Utils.isIframe}
+              <Tr t={Translations.t.general.seeIndex} />
+            {:else}
+              <Tr t={Translations.t.general.backToIndex} />
+            {/if}
+          </a>
+        {/if}
+
+
+        <Page {onlyLink} shown={pg.hotkeys}>
+          <Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" />
+          <HotkeyTable />
+        </Page>
+
+        <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+          <Github class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.gotoSourceCode} />
         </a>
 
-        <a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
-          <DocumentChartBar class="h-6 w-6" />
-          <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
+        <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
+          <Bug class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.openIssueTracker} />
         </a>
-      {/if}
-    </div>
-
-    <!-- Legal info: privacy policy, map attribution, icon attribution -->
-    <div>
-      <h3>Legal</h3>
-
-      <Page {onlyLink} shown={pg.copyright}>
-        <Tr slot="header" t={Translations.t.general.attribution.attributionTitle} />
-        <CopyrightPanel {state} />
-      </Page>
 
 
-      <Page {onlyLink} shown={pg.copyright_icons}>
-        <div slot="header">
-          <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
-        </div>
-        <CopyrightAllIcons {state} />
-
-      </Page>
-
-
-      <Page {onlyLink} shown={pg.privacy}>
-        <div class="flex gap-x-2" slot="header">
-          <EyeIcon class="w-6 pr-2" />
-          <Tr t={Translations.t.privacy.title} />
-        </div>
-        <PrivacyPolicy {state} />
-      </Page>
-
-    </div>
-
-    <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
-    <div>
-
-      <h3>
-        Discover more
-      </h3>
-
-      <Page {onlyLink} shown={pg.community_index}>
-        <div class="flex gap-x-2" slot="header">
-          <Community class="h-6 w-6" />
-          <Tr t={Translations.t.communityIndex.title} />
-        </div>
-        <CommunityIndexView location={state.mapProperties.location} />
-      </Page>
-
-
-      <If condition={featureSwitches.featureSwitchEnableLogin}>
-        <OpenIdEditor mapProperties={state.mapProperties} />
-        <OpenJosm {state} />
-        <MapillaryLink large={false} mapProperties={state.mapProperties} />
-      </If>
-
-    </div>
-    <!-- About MC: various hints -->
-    <div>
-
-      <h3>
-        <Tr t={Translations.t.general.menu.aboutMapComplete} />
-      </h3>
-
-      {#if $showHome}
-        <a class="flex" href={Utils.HomepageLink()}>
-          <Add class="h-6 w-6" />
-          {#if Utils.isIframe}
-            <Tr t={Translations.t.general.seeIndex} />
-          {:else}
-            <Tr t={Translations.t.general.backToIndex} />
-          {/if}
+        <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
+          <Mastodon class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.followOnMastodon} />
+        </a>
+
+        <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
+          <Liberapay class="h-6 w-6" />
+          <Tr t={Translations.t.general.attribution.donate} />
         </a>
-      {/if}
 
 
-      <Page {onlyLink} shown={pg.hotkeys}>
-        <Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" />
-        <HotkeyTable />
-      </Page>
-
-      <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
-        <Github class="h-6 w-6" />
-        <Tr t={Translations.t.general.attribution.gotoSourceCode} />
-      </a>
-
-      <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
-        <Bug class="h-6 w-6" />
-        <Tr t={Translations.t.general.attribution.openIssueTracker} />
-      </a>
+        <Page {onlyLink} shown={pg.copyright}>
+          <Tr slot="header" t={Translations.t.general.attribution.attributionTitle} />
+          <CopyrightPanel {state} />
+        </Page>
 
 
-      <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
-        <Mastodon class="h-6 w-6" />
-        <Tr t={Translations.t.general.attribution.followOnMastodon} />
-      </a>
+        <Page {onlyLink} shown={pg.copyright_icons}>
+          <div slot="header">
+            <Tr t={ Translations.t.general.attribution.iconAttribution.title} />
+          </div>
+          <CopyrightAllIcons {state} />
 
-      <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
-        <Liberapay class="h-6 w-6" />
-        <Tr t={Translations.t.general.attribution.donate} />
-      </a>
+        </Page>
 
-      <div class="subtle">
-        {Constants.vNumber}
+
+        <Page {onlyLink} shown={pg.privacy}>
+          <div class="flex gap-x-2" slot="header">
+            <EyeIcon class="w-6 pr-2" />
+            <Tr t={Translations.t.privacy.title} />
+          </div>
+          <PrivacyPolicy {state} />
+        </Page>
+
+
+        <div class="subtle self-end">
+          {Constants.vNumber}
+        </div>
       </div>
     </div>
 
-  </SidebarWrapper>
 </Sidebar>
+
+
+<style>
+    :global(.sidebar-unit) {
+        width: calc(100% + 1rem);
+        margin-top: 0.75rem;
+        margin-left: -0.5rem;
+        display: flex;
+        flex-direction: column;
+        row-gap: 0.25rem;
+        background: var(--background-color);
+        padding: 1rem;
+        border-radius: 0.5rem;
+    }
+    :global(.sidebar-unit > h3) {
+        margin-top: 0;
+        margin-bottom: 0.5rem
+    }
+    :global(.sidebar-unit svg) {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: 0.5rem;
+        margin-left: 0.5rem;
+        flex-shrink: 0;
+    }
+
+    :global(.sidebar-unit img) {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin-right: 0.5rem;
+        flex-shrink: 0;
+
+    }
+
+
+    :global(.sidebar-unit  a) {
+        display: flex;
+        align-items: center;
+        margin-left: 1rem;
+    }
+
+    :global(.sidebar-unit button) {
+        display: flex;
+        align-items: center;
+        margin-left: 0.5rem;
+    }
+
+</style>
diff --git a/src/UI/Map/RasterLayerOverview.svelte b/src/UI/Map/RasterLayerOverview.svelte
index c3a86a8e7..6a0ccc94b 100644
--- a/src/UI/Map/RasterLayerOverview.svelte
+++ b/src/UI/Map/RasterLayerOverview.svelte
@@ -11,6 +11,7 @@
   import Loading from "../Base/Loading.svelte"
   import Page from "../Base/Page.svelte"
   import ThemeViewState from "../../Models/ThemeViewState"
+  import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
 
   export let state: ThemeViewState
 
@@ -54,7 +55,11 @@
 </script>
 
 <Page {onlyLink} shown={shown} fullscreen={true}>
-  <Tr slot="header" t={Translations.t.general.backgroundMap} />
+  <div slot="header" class="flex" >
+    <Square3Stack3dIcon class="h-6 w-6" />
+
+  <Tr t={Translations.t.general.backgroundMap} />
+  </div>
   {#if $_availableLayers?.length < 1}
     <Loading />
   {:else}
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index d70b722ea..6f9514dce 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -42,7 +42,6 @@
   import { BBox } from "../Logic/BBox"
   import ExtraLinkButton from "./BigComponents/ExtraLinkButton.svelte"
   import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
-  import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
   import Marker from "./Map/Marker.svelte"
   import SelectedElementPanel from "./Base/SelectedElementPanel.svelte"
   import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
@@ -224,7 +223,6 @@
             <b class="mr-1">
               <Tr t={layout.title} />
             </b>
-            <ChevronRight class="h-4 w-4" />
           </div>
         </MapControlButton>
 
@@ -389,7 +387,7 @@
     <svelte:fragment slot="error" />
   </LoginToggle>
 
-  <DrawerLeft shown={state.guistate.menuIsOpened}>
+  <DrawerLeft shown={state.guistate.menuIsOpened} >
     <MenuDrawer onlyLink={true} {state} />
   </DrawerLeft>
   <MenuDrawer onlyLink={false} {state} />
diff --git a/src/index.css b/src/index.css
index 9482d95f3..806c59d3a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -630,6 +630,10 @@ svg.apply-fill path {
   max-width: 100%;
 }
 
+.max-w-screen {
+    max-width: 100vw;
+}
+
 /************************* Experimental support for foldable devices ********************************/
 @media (horizontal-viewport-segments: 2) {
   .theme-list {