uploader + menu changes

image upload w/ video and other files
menu updates

10 files changed, 109 insertions, 238 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 1b0622f6d..e1605473c 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -329,7 +329,8 @@ export class CurrentUserUtils {
             doc.emptyWebpage = Docs.Create.WebDocument("", { title: "New Webpage", _nativeWidth: 850, _nativeHeight: 962, _width: 600, UseCors: true });
         }
         if (doc.activeMobile === undefined) {
-            doc.activeMobile = CurrentUserUtils.setupMobileMenu();
+            console.log("phone setup");
+            this.setupActiveMobile(doc);
         }
         return [
             { title: "Drag a comparison box", label: "Comp", icon: "columns", ignoreClick: true, drag: 'Docs.Create.ComparisonDocument()' },
@@ -398,16 +399,18 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    // static setupActiveMobile(doc: Doc) {
-    //     if (doc.activeMobile === undefined) {
-    //         doc.activeMobile = CurrentUserUtils.setupMobileMenu();
-    //     }
-    // }
+    static setupActiveMobile(doc: Doc) {
+        if (doc.activeMobile === undefined) {
+            console.log("undefined");
+            doc.activeMobile = this.setupMobileMenu();
+        }
+        return doc.activeMobile as Doc;
+    }
 
     static setupMobileMenu() {
-        const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), {
-            _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _yMargin: 100
-        }), Doc) as Doc;
+        const menu = new PrefetchProxy(Docs.Create.StackingDocument(this.setupMobileButtons(), {
+            _width: 980, ignoreClick: true, lockedPosition: false, _chromeStatus: "disabled", title: "home", _yMargin: 100
+        }));
         return menu;
     }
 
@@ -740,7 +743,7 @@ export class CurrentUserUtils {
         this.setupDefaultIconTemplates(doc);  // creates a set of icon templates triggered by the document deoration icon
         this.setupDocTemplates(doc); // sets up the template menu of templates
         this.setupRightSidebar(doc);  // sets up the right sidebar collection for mobile upload documents and sharing
-        // this.setupActiveMobile(doc);
+        this.setupActiveMobile(doc);
         this.setupOverlays(doc);  // documents in overlay layer
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupDefaultPresentation(doc); // presentation that's initially triggered
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 107077792..f61f4a05e 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,7 +1,7 @@
 .gestureOverlay-cont {
     width: 100vw;
     height: 100vh;
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     touch-action: none;
diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index 714ff46a9..98efdfd23 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -428,11 +428,9 @@
 
     .collectionStackingView .collectionStackingView-columnDragger,
     .collectionMasonryView .collectionStackingView-columnDragger {
-        width: 30;
-        transform: translate(0, -40px);
-        height: 30;
-        font-size: 40;
-        position: absolute;
-        margin-left: -5;
+        width: 0.1;
+        height: 0.1;
+        opacity: 0;
+        font-size: 0;
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
index 5a27f74e5..9f5e217bf 100644
--- a/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/InkOptionsMenu.tsx
@@ -101,7 +101,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
                 title={`Draw ${btn}`}
                 key={btn}
                 onPointerDown={action(e => GestureOverlay.Instance.InkShape = btn)}
-                style={{ backgroundColor: btn === GestureOverlay.Instance.InkShape ? "121212" : "" }}>
+                style={{ backgroundColor: btn === GestureOverlay.Instance?.InkShape ? "121212" : "" }}>
                 {this._icons[i]}
             </button>)},
         </>;
@@ -113,7 +113,7 @@ export default class InkOptionsMenu extends AntimodeMenu {
             title="Bezier changer"
             key="bezier"
             onPointerDown={e => this.changeBezier(e)}
-            style={ { backgroundColor:ActiveInkBezierApprox() ? "121212":"" } }>
+            style={{ backgroundColor: ActiveInkBezierApprox() ? "121212" : "" }}>
             B
         </button>;
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 1fab54d7e..e034e07a0 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1213,7 +1213,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : "";
         const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground;
         if (this.props.isSelected()) {
-            this._editorView && RichTextMenu.Instance.updateFromDash(this._editorView, undefined, this.props);
+            this._editorView && RichTextMenu.Instance?.updateFromDash(this._editorView, undefined, this.props);
         } else if (FormattedTextBoxComment.textBox === this) {
             FormattedTextBoxComment.Hide();
         }
diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx
index caee06d8f..793d4068f 100644
--- a/src/client/views/presentationview/PresElementBox.tsx
+++ b/src/client/views/presentationview/PresElementBox.tsx
@@ -49,7 +49,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps, PresDoc
 
     componentDidMount() {
         this._heightDisposer = reaction(() => [this.rootDoc.presExpandInlineButton, this.collapsedHeight],
-            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 100 : 0), { fireImmediately: true });
+            params => this.layoutDoc._height = NumCast(params[1]) + (Number(params[0]) ? 200 : 0), { fireImmediately: true });
     }
     componentWillUnmount() {
         this._heightDisposer?.();
diff --git a/src/mobile/ImageUpload.scss b/src/mobile/ImageUpload.scss
index d5ab31469..95c0c2680 100644
--- a/src/mobile/ImageUpload.scss
+++ b/src/mobile/ImageUpload.scss
@@ -6,6 +6,7 @@
     flex-direction: column;
     align-items: center;
     max-width: 400px;
+    min-width: 400px;
 
     .upload_label {
         font-size: 3em;
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 8f050aedd..3b4008e3f 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -14,6 +14,7 @@ import { listSpec } from '../fields/Schema';
 import { List } from '../fields/List';
 import { Scripting } from '../client/util/Scripting';
 import MainViewModal from '../client/views/MainViewModal';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface ImageUploadProps {
     Document: Doc;
@@ -35,83 +36,80 @@ export class Uploader extends React.Component {
     @observable process: string = "";
 
     onClick = async () => {
-        console.log("uploader click");
         try {
-            this.status = "initializing protos";
+            await Docs.Prototypes.initialize();
+            const imgPrev = document.getElementById("img_preview");
             const slab1 = document.getElementById("slab1");
             if (slab1) {
                 slab1.style.opacity = "1";
             }
-            await Docs.Prototypes.initialize();
-            const imgPrev = document.getElementById("img_preview");
-            console.log("buddy");
             if (imgPrev) {
-                console.log("hi");
                 const files: FileList | null = inputRef.current!.files;
+                const slab2 = document.getElementById("slab2");
+                if (slab2) {
+                    slab2.style.opacity = "1";
+                }
                 if (files && files.length !== 0) {
-                    this.process = "Uploading Image"
-                    console.log(files[0]);
-                    const name = files[0].name;
-                    const res = await Networking.UploadFilesToServer(files[0]);
-                    this.status = "uploading image";
-                    const slab2 = document.getElementById("slab2");
-                    if (slab2) {
-                        slab2.style.opacity = "1";
-                    }
-                    this.status = "upload image, getting json";
-                    const slab3 = document.getElementById("slab3");
-                    if (slab3) {
-                        slab3.style.opacity = "1";
-                    }
-                    res.map(async ({ result }) => {
-                        if (result instanceof Error) {
-                            return;
-                        }
-                        const path = Utils.prepend(result.accessPaths.agnostic.client);
-                        const doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
-
-                        this.status = "getting user document";
-                        const slab4 = document.getElementById("slab4");
-                        if (slab4) {
-                            slab4.style.opacity = "1";
-                        }
-                        this.status = "upload image, getting json";
-                        const slab5 = document.getElementById("slab5");
-                        if (slab5) {
-                            slab5.style.opacity = "1";
+                    this.process = "Uploading Files";
+                    for (let index = 0; index < files.length; ++index) {
+                        const file = files[index];
+                        const res = await Networking.UploadFilesToServer(file);
+                        const slab3 = document.getElementById("slab3");
+                        if (slab3) {
+                            slab3.style.opacity = "1";
                         }
-                        const res = await rp.get(Utils.prepend("/getUserDocumentId"));
-                        if (!res) {
-                            throw new Error("No user id returned");
-                        }
-                        const field = await DocServer.GetRefField(res);
-                        let pending: Opt<Doc>;
-                        if (field instanceof Doc) {
-                            pending = await Cast(field.rightSidebarCollection, Doc);
-                        }
-                        if (pending) {
-                            this.status = "has pending docs";
-                            const slab6 = document.getElementById("slab6");
-                            if (slab6) {
-                                slab6.style.opacity = "1";
+                        res.map(async ({ result }) => {
+                            const name = file.name;
+                            if (result instanceof Error) {
+                                return;
                             }
-                            const data = await Cast(pending.data, listSpec(Doc));
-                            if (data) {
-                                data.push(doc);
+                            const path = Utils.prepend(result.accessPaths.agnostic.client);
+                            let doc = null;
+                            if (file.type === "video/mp4") {
+                                doc = Docs.Create.VideoDocument(path, { _nativeWidth: 200, _width: 200, title: name });
                             } else {
-                                pending.data = new List([doc]);
+                                doc = Docs.Create.ImageDocument(path, { _nativeWidth: 200, _width: 200, title: name });
                             }
-                            this.status = "finished";
-
-                            console.log("hi");
-                            const slab7 = document.getElementById("slab7");
-                            if (slab7) {
-                                slab7.style.opacity = "1";
+                            const slab4 = document.getElementById("slab4");
+                            if (slab4) {
+                                slab4.style.opacity = "1";
+                            }
+                            const res = await rp.get(Utils.prepend("/getUserDocumentId"));
+                            if (!res) {
+                                throw new Error("No user id returned");
+                            }
+                            const field = await DocServer.GetRefField(res);
+                            let pending: Opt<Doc>;
+                            if (field instanceof Doc) {
+                                pending = await Cast(field.rightSidebarCollection, Doc);
                             }
-                            this.process = "Image Uploaded";
+                            if (pending) {
+                                const data = await Cast(pending.data, listSpec(Doc));
+                                if (data) {
+                                    data.push(doc);
+                                } else {
+                                    pending.data = new List([doc]);
+                                }
+                                this.status = "finished";
+                                const slab5 = document.getElementById("slab5");
+                                if (slab5) {
+                                    slab5.style.opacity = "1";
+                                }
+                                this.process = "File " + (index + 1).toString() + " Uploaded";
+                                if (index === files.length) {
+                                    const slab6 = document.getElementById("slab6");
+                                    if (slab6) {
+                                        slab6.style.opacity = "1";
+                                    }
+                                }
+                            }
+                        });
+                        this.process = "All Files Uploaded";
+                        const slab7 = document.getElementById("slab7");
+                        if (slab7) {
+                            slab7.style.opacity = "1";
                         }
-
-                    });
+                    }
                 } else {
                     this.process = "No file selected";
                 }
@@ -120,16 +118,18 @@ export class Uploader extends React.Component {
         } catch (error) {
             this.error = JSON.stringify(error);
         }
-
     }
 
     // Updates label after a files is selected (so user knows a file is uploaded)
     inputLabel = async () => {
         const files: FileList | null = inputRef.current!.files;
         await files;
-        if (files && files.length !== 0) {
+        if (files && files.length === 1) {
             console.log(files);
             this.nm = files[0].name;
+        } else if (files && files.length > 1) {
+            console.log(files.length);
+            this.nm = files.length.toString() + " files selected";
         }
     }
 
@@ -163,7 +163,7 @@ export class Uploader extends React.Component {
         if (slab7) {
             slab7.style.opacity = "0.4";
         }
-        this.nm = "Choose an image";
+        this.nm = "Choose files";
 
         if (inputRef.current) {
             inputRef.current.value = "";
@@ -177,9 +177,12 @@ export class Uploader extends React.Component {
     private get uploadInterface() {
         return (
             <div className="imgupload_cont">
-                <input type="file" accept="image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel}></input>
+                <input type="file" accept="video/*,image/*" className="inputFile" id="input_image_file" ref={inputRef} onChange={this.inputLabel} multiple></input>
                 <label className="file" id="label" htmlFor="input_image_file">{this.nm}</label>
-                <div className="upload_label" onClick={this.onClick}>Upload Image</div>
+                <div className="upload_label" onClick={this.onClick}>
+                    <FontAwesomeIcon icon="upload" size="lg" />
+                    Upload
+                </div>
                 {/* <div onClick={this.onClick} className="upload_button">Upload</div> */}
                 <img id="img_preview" src=""></img>
                 {/* <p>{this.status}</p>
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index f2914eaae..211cc7a1a 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -52,10 +52,7 @@ export class MobileInterface extends React.Component {
     @observable static Instance: MobileInterface;
     @computed private get userDoc() { return Doc.UserDoc(); }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    // Sets up new mobile menu only if activeMobile already exists
-    // @observable private mainDoc: any = this.userDoc.activeMobile === undefined ? CurrentUserUtils.setupMobileMenu() : this.userDoc.activeMobile;
-    @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu();
+    @observable private mainDoc: any = CurrentUserUtils.setupActiveMobile(this.userDoc);
     @observable private renderView?: () => JSX.Element;
     @observable private audioState: any;
     @observable private activeToolbar: boolean = false;
@@ -86,13 +83,7 @@ export class MobileInterface extends React.Component {
 
     @action
     componentDidMount = () => {
-        library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
-        if (this.userDoc.activeMobile) {
-            console.log(Doc.UserDoc().activeMobile);
-        }
-        if (this.userDoc && !this.mainContainer) {
-            this.userDoc.activeMobile = this._homeDoc;
-        }
+        Doc.UserDoc().activeMobile = this._homeDoc;
         this._homeDoc._viewType === "stacking" ? this.menuListView = true : this.menuListView = false;
         Doc.SetSelectedTool(InkTool.None);
         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
@@ -353,26 +344,6 @@ export class MobileInterface extends React.Component {
                 <div className="hidePath" />
             </div>);
         }
-        //     }
-        // } else {
-
-        //     return (
-        //         <div className="pathbar">
-        //             <div className="scrollmenu">
-        //                 <div className="pathbarItem">
-        //                     <div className="pathbarText"
-        //                         style={{ backgroundColor: "rgb(119, 37, 37)" }}
-        //                         key={0}
-        //                         onClick={() => this.returnHome()}>Home
-        //                     </div>
-        //                 </div>
-        //             </div>
-        //             <div className="hidePath" />
-        //         </div>
-        //     );
-        // }
-
-        // }
     }
 
     // Handles when user clicks on document in the pathbar
@@ -393,16 +364,6 @@ export class MobileInterface extends React.Component {
     }
 
     renderDefaultContent = () => {
-        let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
-            if (doc.type !== "ink") {
-                return (
-                    <div
-                        className="item"
-                        key={index}
-                        onClick={() => doc.onClick}>{doc.title}
-                    </div>);
-            }
-        });
 
         if (this._homeMenu === true) {
             return (
@@ -420,7 +381,10 @@ export class MobileInterface extends React.Component {
                     {this.renderPathbar()}
                     <div className="sidebar" id="sidebar">
                         <div className="sidebarButtons">
-                            {menuButtons}
+                            <div
+                                className="item"
+                                onClick={() => ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -429,7 +393,7 @@ export class MobileInterface extends React.Component {
 
         let workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
         if (this._child) {
-            workspaces = this._child
+            workspaces = this._child;
         }
 
         let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
@@ -468,6 +432,10 @@ export class MobileInterface extends React.Component {
                             </> :
                             <>
                                 {buttons}
+                                <div
+                                    className="item"
+                                    onClick={() => ScriptField.MakeScript("createNewWorkspace()")}>Create New Workspace
+                                </div>
                             </>
                         }
                     </div>
@@ -627,100 +595,12 @@ export class MobileInterface extends React.Component {
         // this.recordAudio();
     }
 
-    // renderActiveCollection = (userDoc: Doc) => {
-    //     if (this.activeContainer) {
-    //         const active = Cast(this.activeContainer.data, listSpec(Doc));
-    //         if (active) {
-    //             return (
-    //                 <div className="mobileInterface-background">HELLO!</div>
-    //             );
-    //         }
-    //     }
-    // }
-
-    onBack = (e: React.MouseEvent) => {
-        this.switchCurrentView((userDoc: Doc) => this.mainDoc);
-        Doc.SetSelectedTool(InkTool.None); // TODO: switch to previous tool
-
-        DocServer.Mobile.dispatchOverlayTrigger({
-            enableOverlay: false,
-            width: window.innerWidth,
-            height: window.innerHeight
-        });
-
-        // this.inkDoc = undefined;
-        this.drawingInk = false;
-    }
-
-    shiftLeft = (e: React.MouseEvent) => {
-        DocServer.Mobile.dispatchOverlayPositionUpdate({
-            dx: -10
-        });
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
-    shiftRight = (e: React.MouseEvent) => {
-        DocServer.Mobile.dispatchOverlayPositionUpdate({
-            dx: 10
-        });
-        e.preventDefault();
-        e.stopPropagation();
-    }
-
     panelHeight = () => window.innerHeight;
     panelWidth = () => window.innerWidth;
     //WAS 3
 
     //WAS 1
 
-    upload = async (e: React.MouseEvent) => {
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const collectionDoc = await data[1]; //this should be the collection doc since the positions should be locked
-                const children = DocListCast(collectionDoc.data);
-                const uploadDoc = children.length === 1 ? children[0] : Docs.Create.StackingDocument(children, {
-                    title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true, _width: 300, _height: 300
-                });
-                if (uploadDoc) {
-                    DocServer.Mobile.dispatchMobileDocumentUpload({
-                        docId: uploadDoc[Id],
-                    });
-                }
-            }
-        }
-        e.stopPropagation();
-        e.preventDefault();
-    }
-
-    addWebToCollection = async () => {
-        let url = "https://en.wikipedia.org/wiki/Hedgehog";
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const webDoc = await data[0];
-                const urlField: FieldResult<WebField> = Cast(webDoc.data, WebField);
-                url = urlField ? urlField.url.toString() : "https://en.wikipedia.org/wiki/Hedgehog";
-
-            }
-        }
-        Docs.Create.WebDocument(url, { _width: 300, _height: 300, title: "Mobile Upload Web Doc" });
-    }
-
-    clearUpload = async () => {
-        if (this.mainContainer) {
-            const data = Cast(this.mainContainer.data, listSpec(Doc));
-            if (data) {
-                const collectionDoc = await data[1];
-                const children = DocListCast(collectionDoc.data);
-                children.forEach(doc => {
-                });
-                // collectionDoc[data] = new List<Doc>();
-            }
-        }
-    }
-
     pinToPresentation = () => {
         // Only making button available if it is an image
         if (this._activeDoc.type === "image") {
@@ -845,7 +725,6 @@ export class MobileInterface extends React.Component {
                     {this.uploadAudioButton()}
                     {/* {this.colorTool()} */}
                     {this.inkMenu()}
-                    <InkOptionsMenu />
                 </div>
                 <GestureOverlay>
                     {this.displayWorkspaces()}
@@ -879,14 +758,6 @@ export class MobileInterface extends React.Component {
         this.imageUploadActive = false;
     }
 
-    // toggleUpload = () => {
-    //     if (this.imageUploadActive === true) {
-    //         this.imageUploadActive = false;
-    //     } else {
-    //         this.imageUploadActive = true;
-    //     }
-    // }
-
     uploadImage = () => {
         if (this.imageUploadActive) {
             console.log("active");
@@ -905,11 +776,6 @@ export class MobileInterface extends React.Component {
     }
 }
 
-
-
-const inputRef = React.createRef<HTMLInputElement>();
-
-
 Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
 Scripting.addGlobal(function openMobilePresentation() { return MobileInterface.Instance.setupDefaultPresentation(); });
 Scripting.addGlobal(function toggleMobileSidebar() { return MobileInterface.Instance.toggleSidebar(); });
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index da1e9d951..44d3acb6f 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -96,7 +96,7 @@ body {
 }
 
 .sidebar {
-    position: absolute;
+    position: fixed;
     top: 120px;
     opacity: 0;
     right: -100%;
@@ -212,7 +212,7 @@ body {
 }
 
 .pathbar {
-    position: absolute;
+    position: fixed;
     top: 118px;
     left: 0px;
     background: #1a1a1a;
@@ -373,7 +373,7 @@ body {
 }
 
 .homeSwitch {
-    position: absolute;
+    position: fixed;
     top: 212;
     right: 36px;
     display: inline-flex;
@@ -401,4 +401,4 @@ body {
 .list.active {
     color: darkred;
     border-color: darkred;
-}
+}
\ No newline at end of file