sub-items

Playground/src/components/commandBarComponent.tsx

@@ -50,6 +50,15 @@ export class CommandBarComponent extends React.Component<ICommandBarComponentPro
                 <CommandButtonComponent globalState={this.props.globalState} tooltip="Clear code" icon="clear" isActive={false} onClick={()=> this.onClear()}/>
                 <CommandDropdownComponent globalState={this.props.globalState} icon="options" tooltip="Options" items={[
                     {
+                        label: "Theme",
+                        storeKey: "theme",
+                        defaultValue: "Light",
+                        subItems: [
+                            "Light",
+                            "Dark"
+                        ],
+                        onClick: () => {}
+                    },  {
                         label: "Safe mode",
                         storeKey: "safe-mode",
                         defaultValue: false,

Playground/src/components/commandDropdownComponent.tsx

@@ -6,8 +6,14 @@ interface ICommandDropdownComponentProps {
     globalState: GlobalState;
     icon: string; 
     tooltip: string;
-    items: {label: string, onClick?: () => void, onCheck?: (value: boolean) => void, storeKey?: string, 
-        defaultValue?: boolean;}[]
+    items: {
+        label: string, 
+        onClick?: () => void, 
+        onCheck?: (value: boolean) => void, 
+        storeKey?: string, 
+        defaultValue?: boolean | string;
+        subItems?: string[];
+    }[];
 }
 
 export class CommandDropdownComponent extends React.Component<ICommandDropdownComponentProps, {isExpanded: boolean}> {    
@@ -38,7 +44,7 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                         return (
                                             <div className="command-dropdown-label" key={m.label} onClick={() => {
                                                 if (! m.onClick) {
-                                                    let newValue = !Utilities.ReadBoolFromStore(m.storeKey!, m.defaultValue || false);
+                                                    let newValue = !Utilities.ReadBoolFromStore(m.storeKey!, (m.defaultValue as boolean) || false);
                                                     Utilities.StoreBoolFromStore(m.storeKey!, newValue);
                                                     this.forceUpdate();
                                                     m.onCheck!(newValue);
@@ -58,7 +64,21 @@ export class CommandDropdownComponent extends React.Component<ICommandDropdownCo
                                                             this.forceUpdate();
                                                             m.onCheck!(evt.target.checked);
                                                         }}
-                                                        checked={Utilities.ReadBoolFromStore(m.storeKey!, m.defaultValue || false)}/>
+                                                        checked={Utilities.ReadBoolFromStore(m.storeKey!, (m.defaultValue as boolean) || false)}/>
+                                                }
+                                                {
+                                                    m.subItems &&
+                                                    <div className={"sub-items " + (this.props.globalState.language === "JS" ? "background-js" : "background-ts")}>
+                                                        {
+                                                            m.subItems.map(s => {
+                                                                return (
+                                                                    <div key={s} className="sub-item">
+                                                                        {s}
+                                                                        </div>
+                                                                )
+                                                            })
+                                                        }
+                                                    </div>
                                                 }
                                             </div>
                                         )

Playground/src/scss/commandBar.scss

@@ -96,6 +96,10 @@
             &:hover {
                 background-color: white;
                 color: black;
+
+                .sub-items {
+                    display: block;
+                }
             } 
 
             .command-dropdown-label-text {
@@ -107,6 +111,35 @@
                 grid-column: 2;
                 grid-row: 1;
             }
+
+            .sub-items {
+                position: absolute;
+                left: 200px;
+                top: 0;
+                width: 150px;
+                background: white;
+                display: none;        
+    
+                &.background-js {
+                    .sub-item {                      
+                        &:hover {
+                            background-color: #3f3461;
+                        }
+                    }
+                }   
+                                    
+                .sub-item {                      
+                    font-family: "acumin-pro-extra-condensed";
+                    color:black;
+                    padding: 5px;
+                    padding-left: 10px;
+                    height: 35px;
+    
+                    &:hover {
+                        color: white;
+                    } 
+                }
+            }            
         }
     }