Moving the share view functionality to the tray

src/app.js

@@ -6,7 +6,6 @@ import { useLayers } from '@context';
 import { Sidebar } from '@components/sidebar';
 import { ControlPanel } from '@components/control-panel';
 import { MapLegend } from '@components/legend';
-import { Share } from '@share/share';
 
 /**
  * renders the main content
@@ -35,7 +34,6 @@ const Content = () => {
             <Sidebar />
             <ControlPanel/>
             <MapLegend />
-            <Share />
         </Fragment>
     );
 };

src/components/trays/index.js

@@ -3,17 +3,18 @@ import * as layers from './layers';
 import * as model_selection from './model-selection';
 import * as remove_items from './remove';
 import * as settings from './settings';
+import * as share_view from './share';
 import * as help_about from './help-about';
-//import * as screen_shot from './screenshot';
+
 
 export default {
   layers,
   hurricanes,
   model_selection,
   remove_items,
   settings,
+  share_view,
   help_about
-//  ,screen_shot
 };
 
 /*

src/components/trays/layers/tray-contents.js

@@ -6,7 +6,6 @@ import {
 } from '@mui/icons-material';
 import { LayersList } from './list';
 import { AddLayerForm } from './form';
-import { ShareComment } from '@share/share-comment';
 
 const FORM = 'FORM';
 const LIST = 'LIST';
@@ -54,8 +53,6 @@ export const TrayContents = () => {
     }}>
       { state === LIST && <LayersList /> }
 
-        <ShareComment/>
-
       { state === FORM && <AddLayerForm /> }
 
       <TrayFooter />

src/components/trays/model-selection/index.js

@@ -18,6 +18,6 @@ export const title = 'ADCIRC Model selection';
  */
 export const trayContents = () => (
       <Stack gap={ 2 } p={ 2 }>
-            <ModelSelection />
+          <ModelSelection />
       </Stack>
     );

src/components/trays/share/index.js

@@ -0,0 +1,25 @@
+export * from './share_view';
+
+import React from 'react';
+import { Stack } from '@mui/joy';
+import { Share as ShareViewIcon} from '@mui/icons-material';
+
+// import the component that will allow the user to make model selections
+import { ShareView } from "./share_view.js";
+
+// get an icon for the tray
+export const icon = <ShareViewIcon />;
+
+// create a title for this tray element
+export const title = 'Share your view';
+
+/**
+ * render the removal component
+ *
+ * @returns {JSX.Element}
+ */
+export const trayContents = () => (
+      <Stack gap={ 2 } p={ 2 }>
+          <ShareView />
+      </Stack>
+    );