Merge pull request #11 from pReya/feat/basic-responsive-design

feat: add basic responsive design

src/App.tsx

@@ -29,27 +29,26 @@ function App({}: AppProps) {
   };
 
   return (
-    <div className={'flex h-full'}>
+    <div className={'flex md:flex-row-reverse flex-col h-full'}>
+      <Map
+        onMouseEnter={handlePoiHoverOn}
+        onMouseLeave={handlePoiHoverOff}
+        hoveredPoiId={hoveredPoiId}
+        values={data as PointOfInterest[]}
+        onSelect={handlePoiClick}
+        selectedEntry={selectedPoi}
+      />
       {selectedPoi ? (
-        <SidebarSingleView style={{ flex: 1, minWidth: '250px' }} value={selectedPoi} onClose={handlePoiClose} />
+        <SidebarSingleView className="sidebar" value={selectedPoi} onClose={handlePoiClose} />
       ) : (
         <SidebarListView
           onMouseEnter={handlePoiHoverOn}
           onMouseLeave={handlePoiHoverOff}
-          style={{ flex: 1, minWidth: '250px' }}
+          className="sidebar"
           values={data as PointOfInterest[]}
           onClick={handlePoiClick}
         />
       )}
-
-      <Map
-        onMouseEnter={handlePoiHoverOn}
-        onMouseLeave={handlePoiHoverOff}
-        hoveredPoiId={hoveredPoiId}
-        values={data as PointOfInterest[]}
-        onSelect={handlePoiClick}
-        selectedEntry={selectedPoi}
-      />
     </div>
   );
 }

src/Sidebar/SidebarContainer.tsx

@@ -9,7 +9,9 @@ const SidebarContainer: React.FC<Props> = ({ style, className, children }) => {
   return (
     <div
       style={style}
-      className={`flex flex-col shadow-2xl border-r-2 border-black border-opacity-20 ${className ?? ''}`}
+      className={`flex flex-col shadow-2xl border-t-2 md:border-r-2 md:border-t-0 border-black border-opacity-20 ${
+        className ?? ''
+      }`}
     >
       {children}
     </div>

src/Sidebar/SidebarListElement.tsx

@@ -10,7 +10,7 @@ const SidebarListElement: React.FC<Props> = ({ value, ...restProps }) => {
     value && (
       <div
         {...restProps}
-        className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg overflow-hidden mx-4 my-2"
+        className="border-2 border-black border-opacity-20 hover:border-opacity-40 cursor-pointer rounded-lg md:overflow-hidden mx-4 my-2"
       >
         <div className="p-3">
           <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>

src/Sidebar/SidebarListView.tsx

@@ -9,6 +9,7 @@ interface Props {
   onClick?: (id: number) => void;
   onMouseEnter?: (id: number) => void;
   onMouseLeave?: () => void;
+  className?: string;
 }
 
 const SidebarListView: React.FC<Props> = ({ values, onMouseEnter, onMouseLeave, onClick, ...restProps }) => {

src/Sidebar/SidebarSingleView.tsx

@@ -7,18 +7,19 @@ interface Props {
   style?: CSSProperties;
   value: PointOfInterest;
   onClose?: () => void;
+  className?: string;
 }
 
-const SidebarSingleView: React.FC<Props> = ({ value, onClose, ...restProps }) => {
+const SidebarSingleView: React.FC<Props> = ({ value, onClose, className, ...restProps }) => {
   const strippedUrl = value?.website?.replace(/(^\w+:|^)\/\//, '');
   return (
-    <SidebarContainer className="relative p-0" {...restProps}>
+    <SidebarContainer className={`relative p-0 ${className || ''}`} {...restProps}>
       <CloseIcon
         size={32}
         className="absolute left-5 top-5 p-1 text-gray-500 inline-block cursor-pointer hover:bg-gray-300 hover:bg-opacity-50 rounded-full"
         onClick={onClose}
       />
-      <img className="lg:h-48 md:h-36 w-full object-cover object-center" src={value.image} alt="blog" />
+      <img className="lg:h-48 md:h-36 h-24 w-full object-cover object-center" src={value.image} alt="blog" />
       <div className="p-6">
         <h2 className="tracking-widest text-xs title-font font-medium text-gray-400 mb-1">{value.category}</h2>
         <h1 className="title-font text-lg font-medium text-gray-900 mb-3">{value.name}</h1>

src/index.css

@@ -23,3 +23,25 @@ code {
 .marker {
   color: var(--fabcity-red);
 }
+
+.sidebar {
+  flex: 3;
+  overflow-y: scroll;
+  max-height: 50vh;
+}
+
+.leaflet-control-container {
+  display: none;
+}
+
+@screen md {
+  .sidebar {
+    flex: 1;
+    min-width: 250px;
+    max-height: initial;
+  }
+
+  .leaflet-control-container {
+    display: initial;
+  }
+}