Fix UI issues entity panel

src/components/Main.js

@@ -279,7 +279,7 @@ export default class Main extends Component {
           </div>
           )
         }
-        {this.state.isAddLayerPanelOpen && (
+        {this.state.inspectorEnabled && this.state.isAddLayerPanelOpen && (
           <AddLayerPanel
             onClose={this.toggleAddLayerPanel}
             isAddLayerPanelOpen={this.state.isAddLayerPanelOpen}

src/components/components/AddLayerPanel/AddLayerPanel.component.jsx

@@ -5,7 +5,7 @@ import { Button } from '../Button';
 import { Chevron24Down, Load24Icon, Plus20Circle } from '../../../icons';
 import { Dropdown } from '../Dropdown';
 import CardPlaceholder from '../../../../assets/card-placeholder.svg';
-import { cardsData } from './cardsData';
+import { LayersOptions } from './LayersOptions.js';
 import {
   createSvgExtrudedEntity,
   createMapbox,
@@ -17,7 +17,8 @@ import {
 import Events from '/src/lib/Events';
 
 const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
-  const [selectedOption, setSelectedOption] = useState(null);
+  // set the first Layers option when opening the panel
+  const [selectedOption, setSelectedOption] = useState(LayersOptions[0].value);
   const [groupedMixins, setGroupedMixins] = useState([]);
 
   useEffect(() => {
@@ -52,7 +53,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
       index += 1;
     }
 
-    for (const categoryName of Object.keys(groupedObject)) {
+    for (const categoryName in groupedObject) {
       groupedArray.push({
         label: categoryName,
         options: groupedObject[categoryName]
@@ -61,62 +62,6 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
     return groupedArray;
   };
 
-  const options = [
-    {
-      value: 'Layers: Streets & Intersections',
-      label: 'Layers: Streets & Intersections',
-      onClick: () => console.log('Layers: Streets & Intersections')
-    },
-    {
-      value: 'Models: Personal Vehicles',
-      label: 'Models: Personal Vehicles',
-      mixinGroups: ['vehicles', 'vehicles-rigged'],
-      onClick: () => console.log('Models: Personal Vehicles')
-    },
-    {
-      value: 'Models: Transit Vehicles',
-      label: 'Models: Transit Vehicles',
-      mixinGroups: ['vehicles-transit'],
-      onClick: () => console.log('Models: Transit Vehicles')
-    },
-    {
-      value: 'Models: Utility Vehicles',
-      label: 'Models: Utility Vehicles',
-      mixinGroups: ['vehicles-rigged'],
-      onClick: () => console.log('Models: Utility Vehicles')
-    },
-    {
-      value: 'Models: Characters',
-      label: 'Models: Characters',
-      mixinGroups: ['people', 'people-rigged'],
-      onClick: () => console.log('Models: Characters')
-    },
-    {
-      value: 'Models: Street Props',
-      label: 'Models: Street Props',
-      mixinGroups: ['sidewalk-props', 'intersection-props'],
-      onClick: () => console.log('Models: Street Props')
-    },
-    {
-      value: 'Models: dividers',
-      label: 'Models: dividers',
-      mixinGroups: ['dividers'],
-      onClick: () => console.log('Models: dividers')
-    },
-    {
-      value: 'Models: Buildings',
-      label: 'Models: Buildings',
-      mixinGroups: ['buildings'],
-      onClick: () => console.log('Models: Buildings')
-    },
-    {
-      value: 'Models: stencils',
-      label: 'Models: stencils',
-      mixinGroups: ['stencils'],
-      onClick: () => console.log('Models: stencils')
-    }
-  ];
-
   // data for layers cards
   const layersData = [
     {
@@ -178,7 +123,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
   // get array with objects data (cardsData) from mixinGroups of selectedOption
   const getSelectedMixinCards = (selectedOption) => {
     if (!selectedOption) return [];
-    const selectedOptionData = options.find(
+    const selectedOptionData = LayersOptions.find(
       (option) => option.value === selectedOption
     );
     const selectedMixinGroupNames = selectedOptionData.mixinGroups;
@@ -339,7 +284,7 @@ const AddLayerPanel = ({ onClose, isAddLayerPanelOpen }) => {
         </div>
         <Dropdown
           placeholder="Layers: Maps & Reference"
-          options={options}
+          options={LayersOptions}
           onSelect={handleSelect}
           selectedOptionValue={selectedOption}
           className={styles.dropdown}

src/components/components/AddLayerPanel/AddLayerPanel.module.scss

@@ -11,7 +11,7 @@
   width: calc(100% - 82px);
   transition: transform 0.3s ease-in-out;
   z-index: 100;
-  padding: 20px 40px 20px 42px;
+  padding: 0px 40px 20px 42px;
   margin: 0 auto;
   overflow-y: scroll;
 
@@ -42,6 +42,7 @@
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px;
+    margin-top: -30px;
   }
 
   .cards {
@@ -72,7 +73,7 @@
   }
 
   .closeButton {
-    position: absolute;
+    position: sticky;
     width: 64px;
     height: 40px;
     transform: translateX(-50%);

src/components/components/AddLayerPanel/LayersOptions.js

@@ -0,0 +1,51 @@
+const LayersOptions = [
+  {
+    value: 'Layers: Streets & Intersections',
+    label: 'Layers: Streets & Intersections',
+    onClick: () => console.log('Layers: Streets & Intersections')
+  },
+  {
+    value: 'Models: Personal Vehicles',
+    label: 'Models: Personal Vehicles',
+    mixinGroups: ['vehicles', 'vehicles-rigged'],
+    onClick: () => console.log('Models: Personal Vehicles')
+  },
+  {
+    value: 'Models: Transit Vehicles',
+    label: 'Models: Transit Vehicles',
+    mixinGroups: ['vehicles-transit'],
+    onClick: () => console.log('Models: Transit Vehicles')
+  },
+  {
+    value: 'Models: Utility Vehicles',
+    label: 'Models: Utility Vehicles',
+    mixinGroups: ['vehicles-rigged'],
+    onClick: () => console.log('Models: Utility Vehicles')
+  },
+  {
+    value: 'Models: Characters',
+    label: 'Models: Characters',
+    mixinGroups: ['people', 'people-rigged'],
+    onClick: () => console.log('Models: Characters')
+  },
+  {
+    value: 'Models: Street Props',
+    label: 'Models: Street Props',
+    mixinGroups: ['sidewalk-props', 'intersection-props'],
+    onClick: () => console.log('Models: Street Props')
+  },
+  {
+    value: 'Models: dividers',
+    label: 'Models: dividers',
+    mixinGroups: ['dividers'],
+    onClick: () => console.log('Models: dividers')
+  },
+  {
+    value: 'Models: Buildings',
+    label: 'Models: Buildings',
+    mixinGroups: ['buildings'],
+    onClick: () => console.log('Models: Buildings')
+  }
+];
+
+export { LayersOptions };