put share button under menu

script/viewer/Analyse/AnalyseMenu.tsx

@@ -5,44 +5,45 @@ export interface AnalyseMenuProps {
     isShared: boolean;
     clients: number,
     inShared: boolean,
+    open: boolean,
 }
 
 export function AnalyseMenu(props: AnalyseMenuProps) {
     const loc = () => window.location.toString().replace(/\#.*/, '') + '#' + props.sessionName;
-    const shareText = () => (props.isShared) ?
+
+    return (<div class="analyse-menu">
+        <Show when={props.inShared}>
+            <div class="share shared">
+                You're spectating a session controlled by someone else
+            </div>
+        </Show>
+        <Show when={!props.inShared}>
+            <details>
+                <summary title="Menu">☰</summary>
+                <ul class="menu">
+                    <li>
+                        <button class="share-session" title="Start a shared session" disabled={props.isShared}
+                                onClick={() => {
+                                    props.onShare()
+                                }}>
+                            <Show when={!props.isShared}>
+                                Start a shared session
+                            </Show>
+                            <Show when={props.isShared}>
                                 <input class="share-text" value={loc()} readOnly={true}
                                        title="Use this link to join the current session"
                                        style={{width: `${(loc().length * 8)}px`}}
                                        onFocus={(event) => {
                                            (event.target as HTMLInputElement).select()
-               }}/> : <span class="share-text">Start a shared session</span>;
-
-    const clientCount = () => (props.isShared) ?
-        <div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div> : [];
-
-    const shareButton = () => {
-        if (props.canShare) {
-
-            return [
-                <div class="share">
-                    <button class="share-session" title="Start a shared session"
-                            onClick={() => {
-                                props.onShare()
                                        }}/>
-                    {shareText}
-                </div>,
-                clientCount,
-            ]
-        } else if (props.inShared) {
-            return <div class="share shared">
-                You're spectating a session controlled by someone else
-            </div>
-        } else {
-            return [];
-        }
-    }
-
-    return (<div class="analyse-menu">
-        {shareButton}
+                            </Show>
+                        </button>
+                    </li>
+                </ul>
+            </details>
+        </Show>
+        <Show when={props.isShared && !props.inShared}>
+            <div class="clients">{props.clients} {(props.clients === 1) ? "spectator" : "spectators"}</div>
+        </Show>
     </div>)
 }

style/pages/viewer/AnalyseMenu.css

@@ -22,17 +22,17 @@
         }
     }
 
-    & .share-session {
+    & button.share-session {
         background: transparent;
         color: var(--primary-color);
-        font-size: 200%;
-        width: 24px;
+        padding-left: 32px;
         height: 24px;
         margin: 10px;
         border: none;
         cursor: pointer;
         background-image: url("inline://images//link_white.svg");
         background-size: contain;
+        background-repeat: no-repeat;
 
         &:active, &:focus {
             outline: none;
@@ -43,9 +43,9 @@
         color: var(--primary-color);
         background-color: var(--text-secondary);
         padding: 5px;
-        margin-top: 0;
         border: 1px #888 solid;
         border-radius: 5px;
+        margin-top: -3px;
 
         &:active, &:focus {
             outline: none;
@@ -64,4 +64,19 @@
     .clients {
         margin-left: 10px;
     }
+
+    summary {
+        font-size: 120%;
+        margin: 5px;
+        margin-left: 10px;
+    }
+
+    summary::marker {
+        content: '';
+    }
+
+    ul {
+        padding: 0;
+        margin: 0;
+    }
 }