Rollback sidebar header controls prop

Author: Rokt33r

src/shared/components/organisms/Sidebar/atoms/SidebarHeader.tsx

@@ -4,9 +4,16 @@ import { AppComponent } from '../../../../lib/types'
 import cc from 'classcat'
 import Button from '../../../atoms/Button'
 import RoundedImage from '../../../atoms/RoundedImage'
-import { mdiChevronDown } from '@mdi/js'
+import { mdiChevronDown, mdiDotsHorizontal } from '@mdi/js'
 import { overflowEllipsis } from '../../../../lib/styled/styleFunctions'
 import Icon from '../../../atoms/Icon'
+import {
+  useContextMenu,
+  MenuTypes,
+  MenuItem,
+} from '../../../../lib/stores/contextMenu'
+import Checkbox from '../../../molecules/Form/atoms/FormCheckbox'
+import Radio from '../../../molecules/Form/atoms/FormRadio'
 
 interface SidebarHeaderProps {
   spaceImage?: string
@@ -31,7 +38,9 @@ const SidebarHeader: AppComponent<SidebarHeaderProps> = ({
   onSpaceClick,
   spaceImage,
   spaceName,
+  controls,
 }) => {
+  const { popup } = useContextMenu()
   return (
     <Container className={cc(['sidebar__header', className])}>
       <Button
@@ -55,10 +64,62 @@ const SidebarHeader: AppComponent<SidebarHeaderProps> = ({
           path={mdiChevronDown}
         />
       </Button>
+      {controls != null && (
+        <Button
+          variant='icon'
+          size='sm'
+          className='sidebar__header__controls'
+          iconPath={mdiDotsHorizontal}
+          iconSize={20}
+          onClick={async (event) => {
+            popup(event, mapControlsToPopup(controls))
+          }}
+        />
+      )}
     </Container>
   )
 }
 
+function mapControlsToPopup(controls: SidebarControls) {
+  const items: MenuItem[] = []
+
+  Object.entries(controls).forEach(([category, value]) => {
+    items.push({
+      type: MenuTypes.Component,
+      component: <PopupCategory>{category}</PopupCategory>,
+    })
+    value.forEach((option) => {
+      items.push({
+        type: MenuTypes.Normal,
+        onClick: option.onClick,
+        label: (
+          <span>
+            {option.type === 'check' ? (
+              <Checkbox checked={option.checked} />
+            ) : (
+              <Radio checked={option.checked} />
+            )}
+            <span style={{ paddingLeft: 6 }}>{option.label}</span>
+          </span>
+        ),
+      })
+    })
+  })
+
+  return items
+}
+
+const PopupCategory = styled.div`
+  padding: 0 ${({ theme }) => theme.sizes.spaces.sm}px;
+  color: ${({ theme }) => theme.colors.text.subtle};
+  font-size: ${({ theme }) => theme.sizes.fonts.df}px;
+  margin-top: ${({ theme }) => theme.sizes.spaces.sm}px;
+  margin-bottom: ${({ theme }) => theme.sizes.spaces.sm}px;
+  &.last {
+    margin-top: ${({ theme }) => theme.sizes.spaces.df}px;
+  }
+`
+
 const Container = styled.div`
   &.sidebar__header {
     display: flex;
@@ -77,7 +138,7 @@ const Container = styled.div`
     justify-content: left;
     min-width: 30px;
     color: ${({ theme }) => theme.colors.text.secondary};
-    q .button__label {
+    .button__label {
       text-align: left;
       justify-content: left;
       flex: 0 1 auto;