Add ContentMenu component

src/react-components/room/ContentMenu.js

@@ -0,0 +1,41 @@
+import React, { Children } from "react";
+import className from "classnames";
+import PropTypes from "prop-types";
+import styles from "./ContentMenu.scss";
+
+export function ContentMenuButton({ active, children, ...props }) {
+  return (
+    <button className={className(styles.contentMenuButton, { [styles.active]: active })} {...props}>
+      {children}
+    </button>
+  );
+}
+
+ContentMenuButton.propTypes = {
+  children: PropTypes.node,
+  active: PropTypes.bool
+};
+
+export function ContentMenu({ children }) {
+  return (
+    <div className={styles.contentMenu}>
+      {Children.toArray(children).reduce(
+        (acc, child) =>
+          acc === null ? (
+            child
+          ) : (
+            <>
+              {acc}
+              {<div className={styles.separator} />}
+              {child}
+            </>
+          ),
+        null
+      )}
+    </div>
+  );
+}
+
+ContentMenu.propTypes = {
+  children: PropTypes.node
+};

src/react-components/room/ContentMenu.scss

@@ -0,0 +1,70 @@
+@use "../styles/theme.scss";
+
+:local(.content-menu) {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: flex;
+  flex-direction: row;
+  padding: 8px 10px;
+  background-color: theme.$white;
+  border: 1px solid theme.$lightgrey;
+  border-radius: 12px;
+  width: min-content;
+  pointer-events: auto;
+
+  @media(min-width: theme.$breakpoint-md) {
+    top: 24px;
+    right: 24px;
+  }
+}
+
+:local(.content-menu-button) {
+  display: flex;
+  flex-direction: row;
+  border: none;
+  border-radius: 8px;
+  background-color: theme.$transparent;
+  font-size: theme.$font-size-xs;
+  font-weight: theme.$font-weight-bold;
+  align-items: center;
+  height: 32px;
+  padding: 0 8px;
+
+  & > * {
+    margin-right: 8px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &:hover {
+    background-color: theme.$lightgrey;
+  }
+}
+
+:local(.active) {
+  color: theme.$white;
+  background-color: theme.$blue;
+
+  svg {
+    *[stroke=\#000] {
+      stroke: theme.$white;
+    }
+
+    *[fill=\#000] {
+      fill: theme.$white;
+    }
+  }
+
+  &:hover {
+    background-color: theme.$blue-hover;
+  }
+}
+
+:local(.separator) {
+  width: 1px;
+  margin: 0 8px;
+  background-color: theme.$lightgrey;
+}

src/react-components/room/ContentMenu.stories.js

@@ -0,0 +1,68 @@
+import React from "react";
+import { RoomLayout } from "../layout/RoomLayout";
+import { ContentMenu, ContentMenuButton } from "./ContentMenu";
+import { ReactComponent as ObjectsIcon } from "../icons/Objects.svg";
+import { ReactComponent as PeopleIcon } from "../icons/People.svg";
+
+export default {
+  title: "ContentMenu"
+};
+
+export const Base = () => (
+  <RoomLayout
+    viewport={
+      <ContentMenu>
+        <ContentMenuButton>
+          <ObjectsIcon />
+          <span>Objects</span>
+        </ContentMenuButton>
+        <ContentMenuButton>
+          <PeopleIcon />
+          <span>People</span>
+        </ContentMenuButton>
+      </ContentMenu>
+    }
+  />
+);
+
+Base.parameters = {
+  layout: "fullscreen"
+};
+
+export const Active = () => (
+  <RoomLayout
+    viewport={
+      <ContentMenu>
+        <ContentMenuButton active>
+          <ObjectsIcon />
+          <span>Objects</span>
+        </ContentMenuButton>
+        <ContentMenuButton>
+          <PeopleIcon />
+          <span>People</span>
+        </ContentMenuButton>
+      </ContentMenu>
+    }
+  />
+);
+
+Active.parameters = {
+  layout: "fullscreen"
+};
+
+export const OnlyPeople = () => (
+  <RoomLayout
+    viewport={
+      <ContentMenu>
+        <ContentMenuButton>
+          <PeopleIcon />
+          <span>People</span>
+        </ContentMenuButton>
+      </ContentMenu>
+    }
+  />
+);
+
+OnlyPeople.parameters = {
+  layout: "fullscreen"
+};