show profile in collapsed view too, fixes #431

Author: karussell

src/sidebar/MobileSidebar.module.css

@@ -95,14 +95,19 @@
     border-radius: 0.2rem;
 }
 
+/* address often too wide and we need to truncate */
 .btnOpenContainer .mapView {
-    width: calc(100% - 34px);
+    width: calc(100% - 34px - 34px);
 }
 
 .btnOpenInputs svg {
     color: #adadad;
 }
 
-.btnOpenInputs {
+.btnOpenInputs,
+.profile {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     width: 34px;
 }

src/sidebar/MobileSidebar.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { QueryPoint, QueryPointType, QueryStoreState, RequestState } from '@/stores/QueryStore'
 import { RouteStoreState } from '@/stores/RouteStore'
 import { ErrorStoreState } from '@/stores/ErrorStore'
@@ -13,6 +13,11 @@ import CloseInputsIcon from './unfold_less.svg'
 import CustomModelBox from '@/sidebar/CustomModelBox'
 import { Map } from 'ol'
 import { Coordinate } from '@/utils'
+import PlainButton from '@/PlainButton'
+import { tr } from '@/translation/Translation'
+import Chevron from '@/sidebar/search/routingProfiles/chevron.svg'
+import { icons } from '@/sidebar/search/routingProfiles/profileIcons'
+import { RoutingProfile } from '@/api/graphhopper'
 
 type MobileSidebarProps = {
     query: QueryStoreState
@@ -53,7 +58,11 @@ export default function ({ query, route, error, encodedValues, drawAreas, map }:
         <div className={styles.sidebar}>
             <div className={styles.background} ref={searchContainerRef}>
                 {isSmallSearchView ? (
-                    <SmallSearchView points={query.queryPoints} onClick={() => setIsSmallSearchView(false)} />
+                    <SmallSearchView
+                        selectedProfile={query.routingProfile}
+                        points={query.queryPoints}
+                        onClick={() => setIsSmallSearchView(false)}
+                    />
                 ) : (
                     <div className={styles.btnCloseContainer}>
                         <div className={styles.btnCloseInputs} onClick={() => setIsSmallSearchView(true)}>
@@ -88,13 +97,15 @@ function hasResult(route: RouteStoreState) {
     return route.routingResult.paths.length > 0
 }
 
-function SmallSearchView(props: { points: QueryPoint[]; onClick: () => void }) {
+function SmallSearchView(props: { points: QueryPoint[]; selectedProfile: RoutingProfile; onClick: () => void }) {
     const from = props.points[0]
     const to = props.points[props.points.length - 1]
     const isSmallHeight = useMediaQuery({ query: '(max-height: 36rem)' })
+    let icon = icons[props.selectedProfile.name]
 
     return (
         <div className={styles.btnOpenContainer} onClick={props.onClick}>
+            <div className={styles.profile}>{React.createElement(icon)}</div>
             <div className={styles.mapView}>
                 {!isSmallHeight && <SmallQueryPoint text={from.queryText} color={from.color} position={from.type} />}
                 {!isSmallHeight && <IntermediatePoint points={props.points} />}