close sidebar (#289)

* simple close sidebar * review comments
graphhopper · Nov 21, 2022 · 11ac550 · 11ac550
1 parent 96f4237
commit 11ac550
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 26 deletions.
diff --git a/src/App.module.css b/src/App.module.css
@@ -4,7 +4,7 @@
     padding: 0;
     margin: 0;
     display: grid;
-    grid-template-columns: 25rem 1fr auto;
+    grid-template-columns: 26rem 1fr auto;
     grid-template-rows: 100%;
     justify-content: space-between;
     overflow: auto;
@@ -40,6 +40,7 @@
 }
 
 .sidebarContent {
+    position: relative;
     display: flex;
     flex-direction: column;
     border-radius: 0.5rem;
@@ -127,3 +128,40 @@
         grid-template-rows: auto 0 1fr auto auto;
     }
 }
+
+.sidebarCloseButton {
+    position: absolute;
+
+    color: lightgray !important; /* unsure why !important is necessary here but not in ErrorMessage.module.css for same <Cross/> */
+
+    height: 10px;
+    width: 10px;
+
+    right: 7px;
+    top: 6px;
+}
+
+.sidebarCloseButton:hover {
+    color: black !important;
+}
+
+.sidebarWhenClosed {
+    z-index: 1;
+    position: absolute;
+    background-color: white;
+    border-radius: 0.5rem;
+    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.1);
+    padding: 0.25em;
+    margin: 0.5em;
+}
+
+.sidebarOpenButton svg {
+    fill: gray;
+
+    width: 30px;
+    height: 24px;
+}
+
+.sidebarOpenButton:hover svg {
+    fill: black;
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -38,6 +38,9 @@ import useMapBorderLayer from '@/layers/UseMapBorderLayer'
 import { ShowDistanceInMilesContext } from '@/ShowDistanceInMilesContext'
 import RoutingProfiles from '@/sidebar/search/routingProfiles/RoutingProfiles'
 import MapPopups from '@/map/MapPopups'
+import Menu from '@/sidebar/menu.svg'
+import Cross from '@/sidebar/times-solid.svg'
+import PlainButton from '@/PlainButton'
 
 export const POPUP_CONTAINER_ID = 'popup-container'
 export const SIDEBAR_CONTENT_ID = 'sidebar-content'
@@ -141,35 +144,47 @@ interface LayoutProps {
 }
 
 function LargeScreenLayout({ query, route, map, error, mapOptions, info }: LayoutProps) {
+    const [showSidebar, setShowSidebar] = useState(true)
     return (
         <>
-            <div className={styles.sidebar}>
-                <div className={styles.sidebarContent} id={SIDEBAR_CONTENT_ID}>
-                    <RoutingProfiles
-                        routingProfiles={info.profiles}
-                        selectedProfile={query.routingProfile}
-                        customModelAllowed={true}
-                        customModelEnabled={query.customModelEnabled}
-                    />
-                    <CustomModelBox
-                        enabled={query.customModelEnabled}
-                        encodedValues={info.encoded_values}
-                        initialCustomModelStr={query.initialCustomModelStr}
-                        queryOngoing={query.currentRequest.subRequests[0]?.state === RequestState.SENT}
-                    />
-                    <Search points={query.queryPoints} />
-                    <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
-                    <RoutingResults
-                        paths={route.routingResult.paths}
-                        selectedPath={route.selectedPath}
-                        currentRequest={query.currentRequest}
-                        profile={query.routingProfile.name}
-                    />
-                    <div>
-                        <PoweredBy />
+            {showSidebar ? (
+                <div className={styles.sidebar}>
+                    <div className={styles.sidebarContent} id={SIDEBAR_CONTENT_ID}>
+                        <PlainButton onClick={() => setShowSidebar(false)} className={styles.sidebarCloseButton}>
+                            <Cross />
+                        </PlainButton>
+                        <RoutingProfiles
+                            routingProfiles={info.profiles}
+                            selectedProfile={query.routingProfile}
+                            customModelAllowed={true}
+                            customModelEnabled={query.customModelEnabled}
+                        />
+                        <CustomModelBox
+                            enabled={query.customModelEnabled}
+                            encodedValues={info.encoded_values}
+                            initialCustomModelStr={query.initialCustomModelStr}
+                            queryOngoing={query.currentRequest.subRequests[0]?.state === RequestState.SENT}
+                        />
+                        <Search points={query.queryPoints} />
+                        <div>{!error.isDismissed && <ErrorMessage error={error} />}</div>
+                        <RoutingResults
+                            paths={route.routingResult.paths}
+                            selectedPath={route.selectedPath}
+                            currentRequest={query.currentRequest}
+                            profile={query.routingProfile.name}
+                        />
+                        <div>
+                            <PoweredBy />
+                        </div>
                     </div>
                 </div>
-            </div>
+            ) : (
+                <div className={styles.sidebarWhenClosed} onClick={() => setShowSidebar(true)}>
+                    <PlainButton className={styles.sidebarOpenButton}>
+                        <Menu />
+                    </PlainButton>
+                </div>
+            )}
             <div className={styles.popupContainer} id={POPUP_CONTAINER_ID} />
             <div className={styles.map}>
                 <MapComponent map={map} />

diff --git a/src/sidebar/menu.svg b/src/sidebar/menu.svg