UX(menu drawer): add extra category, reorder buttons

langs/en.json

@@ -292,6 +292,7 @@
             "aboutCurrentThemeTitle": "About this map",
             "aboutMapComplete": "About MapComplete",
             "filter": "Filter data",
+            "legal": "Legal notices",
             "moreUtilsTitle": "Discover more",
             "openHereDifferentApp": "Open the current location in other applications",
             "showIntroduction": "Show introduction",

langs/themes/en.json

@@ -788,7 +788,7 @@
                     "11": {
                         "options": {
                             "0": {
-                                "quesiton": "All platforms"
+                                "question": "All platforms"
                             },
                             "1": {
                                 "question": "Made with Android"

src/UI/BigComponents/MenuDrawer.svelte

@@ -160,11 +160,20 @@
           <ReviewsOverview {state} />
         </div>
       </Page>
+      <div class="hidden-on-mobile w-full">
+        <Page {onlyLink} shown={pg.hotkeys}>
+          <svelte:fragment slot="header">
+            <BoltIcon />
+            <Tr t={Translations.t.hotkeyDocumentation.title} />
+          </svelte:fragment>
+          <HotkeyTable />
+        </Page>
+      </div>
+
       <div class="self-end">
         <LogoutButton osmConnection={state.osmConnection} />
       </div>
     </LoginToggle>
-
     <LanguagePicker />
   </SidebarUnit>
 
@@ -261,6 +270,15 @@
       <ShareIcon />
       <Tr t={t.openHereDifferentApp} />
     </a>
+
+    <a
+      class="flex"
+      href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
+    >
+      <MagnifyingGlassCircle class="mr-2 h-6 w-6" />
+      <Tr t={Translations.t.inspector.menu} />
+    </a>
+
   </SidebarUnit>
 
   <!-- About MC: various outward links, legal info, ... -->
@@ -274,46 +292,13 @@
       <Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
     </a>
 
-    <div class="hidden-on-mobile w-full">
-      <Page {onlyLink} shown={pg.hotkeys}>
-        <svelte:fragment slot="header">
-          <BoltIcon />
-          <Tr t={Translations.t.hotkeyDocumentation.title} />
-        </svelte:fragment>
-        <HotkeyTable />
-      </Page>
-    </div>
 
-    <a
-      class="flex"
-      href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
-    >
-      <MagnifyingGlassCircle class="mr-2 h-6 w-6" />
-      <Tr t={Translations.t.inspector.menu} />
-    </a>
 
-    <a class="flex" href="https://source.mapcomplete.org/MapComplete/MapComplete/" target="_blank">
-      <Forgejo class="h-6 w-6" />
-      <Tr t={Translations.t.general.attribution.gotoSourceCode} />
-    </a>
-
-    <a
-      class="flex"
-      href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
-      target="_blank"
-    >
-      <Bug class="h-6 w-6" />
-      <Tr t={Translations.t.general.attribution.openIssueTracker} />
-    </a>
 
     <a class="flex" href="mailto:info@mapcomplete.org">
       <EnvelopeOpen class="h-6 w-6" />
       <Tr t={Translations.t.general.attribution.emailCreators} />
     </a>
-    <a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
-      <TranslateIcon class="h-6 w-6" />
-      <Tr t={Translations.t.translations.activateButton} />
-    </a>
 
     <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
       <Mastodon class="h-6 w-6" />
@@ -325,6 +310,30 @@
       <Tr t={Translations.t.general.attribution.donate} />
     </a>
 
+
+    <a
+      class="flex"
+      href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
+      target="_blank"
+    >
+      <Bug class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.openIssueTracker} />
+    </a>
+
+    <a class="flex" href="https://source.mapcomplete.org/MapComplete/MapComplete/" target="_blank">
+      <Forgejo class="h-6 w-6" />
+      <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+    </a>
+    <a class="flex" href={`${Constants.weblate}projects/mapcomplete/`} target="_blank">
+      <TranslateIcon class="h-6 w-6" />
+      <Tr t={Translations.t.translations.activateButton} />
+    </a>
+
+  </SidebarUnit>
+  <SidebarUnit>
+    <h3>
+      <Tr t={Translations.t.general.menu.legal} />
+    </h3>
     <Page {onlyLink} shown={pg.copyright}>
       <svelte:fragment slot="header">
         <Copyright />
@@ -332,7 +341,6 @@
       </svelte:fragment>
       <CopyrightPanel {state} />
     </Page>
-
     <Page {onlyLink} shown={pg.copyright_icons}>
       <svelte:fragment slot="header">
         <Copyright />
@@ -349,11 +357,12 @@
       <PrivacyPolicy {state} />
     </Page>
 
+  </SidebarUnit>
+
   <div class="subtle self-end">
     {Constants.vNumber}
     {#if $isAndroid}
       Android
     {/if}
   </div>
-  </SidebarUnit>
 </div>