wip: extra components

src/components/Identify.jsx

@@ -6,7 +6,7 @@ import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Col, Container } from 'reactstrap';
 
-import { toQueryString } from '@ugrc/utilities';
+import { toQueryString } from '@ugrc/utilities/src';
 
 import ky from 'ky';
 import './Identify.css';
@@ -181,7 +181,7 @@ const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => {
         },
       ],
     ],
-    []
+    [],
   );
 
   const reverseGeocode = useCallback(
@@ -208,7 +208,7 @@ const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => {
         console.warn(ex);
       }
     },
-    [wkid, apiKey]
+    [wkid, apiKey],
   );
 
   const get = useCallback(
@@ -243,14 +243,14 @@ const IdentifyInformation = ({ apiKey, wkid = 3857, location }) => {
           } catch (error) {
             console.warn(error);
           }
-        })
+        }),
       );
 
       await reverseGeocode(mapPoint);
 
       controller.current = null;
     },
-    [apiKey, wkid, reverseGeocode]
+    [apiKey, wkid, reverseGeocode],
   );
 
   useEffect(() => {

src/components/MapView.jsx

@@ -53,7 +53,7 @@ const MapComponent = ({ zoomToGraphic, onClick }) => {
       mapView.current.on('click', onClick);
     });
 
-    setSelectorOptions({
+    const selectorOptions = {
       view: mapView.current,
       quadWord: import.meta.env.VITE_DISCOVER,
       baseLayers: ['Hybrid', 'Lite', 'Terrain', 'Topo', 'Color IR'],
@@ -67,7 +67,16 @@ const MapComponent = ({ zoomToGraphic, onClick }) => {
         },
       ],
       position: 'top-right',
-    });
+    };
+
+    // select a random index from baseLayers and convert the string to an object
+    const randomBaseMapIndex = Math.floor(Math.random() * selectorOptions.baseLayers.length);
+    selectorOptions.baseLayers[randomBaseMapIndex] = {
+      token: selectorOptions.baseLayers[randomBaseMapIndex],
+      selected: true,
+    };
+
+    setSelectorOptions(selectorOptions);
 
     return () => {
       mapView.current.destroy();
@@ -76,7 +85,7 @@ const MapComponent = ({ zoomToGraphic, onClick }) => {
   }, [setMapView, onClick]);
 
   return (
-    <div ref={mapNode} className="relative w-full grow">
+    <div ref={mapNode} className="size-full">
       {selectorOptions ? <LayerSelector {...selectorOptions}></LayerSelector> : null}
     </div>
   );

src/components/Sidebar.jsx

@@ -1,13 +1,19 @@
+import { Bars3Icon } from '@heroicons/react/24/solid';
 import PropTypes from 'prop-types';
-// import './Sidebar.css';
+import { useState } from 'react';
+import { Button, Dialog, DialogTrigger, Modal, ModalOverlay } from 'react-aria-components';
 
-export default function Sidebar({ children }) {
+export function Sidebar({ children }) {
   return (
-    <div className="md:w-80 h-80 md:h-full">
-      <div className="flex h-full flex-col">
-        <div className="flex-1 overflow-y-auto p-2" id="main-content">
-          {children}
-        </div>
+    <div className="flex flex-col">
+      <button
+        aria-label="sidebar toggle"
+        className="self-end rounded-md outline-none transition-shadow ease-in-out focus:ring-2 focus:ring-primary-900 focus:ring-offset-2 dark:ring-offset-transparent dark:focus:ring-secondary-600"
+      >
+        <Bars3Icon aria-hidden className="h-full w-6" />
+      </button>
+      <div className="p-2" id="main-content">
+        {children}
       </div>
     </div>
   );
@@ -16,3 +22,62 @@ export default function Sidebar({ children }) {
 Sidebar.propTypes = {
   children: PropTypes.node.isRequired,
 };
+
+export const SideDrawer = ({ children }) => {
+  let [isOpen, setOpen] = useState(true);
+
+  return (
+    <DialogTrigger>
+      <Button
+        aria-label="sidebar toggle"
+        className="rounded-md outline-none transition-shadow ease-in-out focus:ring-2 focus:ring-primary-900 focus:ring-offset-2 dark:ring-offset-transparent dark:focus:ring-secondary-600"
+      >
+        <Bars3Icon aria-hidden className="h-full w-6" />
+      </Button>
+      <ModalOverlay className="fixed inset-0">
+        <Modal
+          isOpen={isOpen}
+          onOpenChange={setOpen}
+          className="anim-ease-in-out anim-duration-1000 fixed top-[113px] bottom-0 left-0 w-[300px] bg-primary-900 outline-none data-[entering=true]:animate-in data-[entering=true]:slide-in-from-left data-[exiting=true]:animate-out data-[exiting=true]:fade-out"
+        >
+          <Dialog>
+            {({ close }) => (
+              <>
+                {children}
+                <Button onPress={close}>Close</Button>
+              </>
+            )}
+          </Dialog>
+        </Modal>
+      </ModalOverlay>
+    </DialogTrigger>
+  );
+};
+
+SideDrawer.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const DoubleSidebar = ({ children }) => {
+  return (
+    <div className="overflow-y-auto p-2 hidden md:block" id="main-content">
+      {children}
+    </div>
+  );
+};
+
+export const Drawer = () => {
+  return (
+    <div className="group left-2.5 pl-9 relative h-full w-80 shrink-0 border-yellow-400 bg-white/10 shadow-md transition-[width] duration-500 ease-in-out data-[open='false']:w-0 data-[open='true']:border-r">
+      <aside className='h-full w-80 overflow-y-auto text-zinc-900 duration-500 ease-in-out data-[type="sidebar"]:data-[open="false"]:-translate-x-full data-[type="sidebar"]:data-[open="true"]:translate-x-0 dark:text-zinc-100'></aside>
+      <p className="flex h-10 w-6 items-center justify-center rounded-none border border-l-0 bg-transparent p-1 shadow-md hover:bg-current group-hover:bg-red-900/5 group-pressed:bg-black/10 disabled:bg-transparent dark:group-hover:bg-white/10 dark:group-pressed:bg-white/20"></p>
+    </div>
+  );
+};
+
+export const DefaultDrawerTrigger = () => (
+  <div className="absolute -right-8 top-[calc(50%-24px)] block h-10 w-6 rounded rounded-l-none border border-l-0 bg-white shadow-md">
+    <ChevronLeftIcon className="h-6 w-full shrink-0 fill-zinc-900 transition-transform duration-500 -rotate-180" />
+    <p className="flex h-10 w-6 items-center justify-center rounded-none border border-l-0 bg-transparent p-1 shadow-md hover:bg-current group-hover:bg-black/10 group-pressed:bg-black/50 disabled:bg-transparent dark:group-hover:bg-white/10 dark:group-pressed:bg-white/20"></p>
+  </div>
+);