pull current work in

10 files changed, 1915 insertions, 380 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 496099557..8ed275efc 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -386,25 +386,56 @@ export class CurrentUserUtils {
         return doc.myItemCreators as Doc;
     }
 
-    static setupMobileButtons(doc: Doc, buttons?: string[]) {
+    // static setupMobileButtons(doc: Doc, buttons?: string[]) {
+    //     const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
+    //         { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
+    //         { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen,  this)`, activePen: doc },
+    //         { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc },
+    //         { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc },
+    //         { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc },
+    //         // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc },
+    //         { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
+    //         // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
+    //     ];
+    //     return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
+    //         _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
+    //         onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+    //         ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen,
+    //         backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+    //     }));
+    // }
+
+    static setupMobileButtons(doc?: Doc, buttons?: string[]) {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
-            { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
-            { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen,  this)`, activePen: doc },
-            { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.inkPen, this)`, activePen: doc },
-            { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.inkPen = sameDocs(this.activePen.inkPen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "pink", activePen: doc },
-            { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.inkPen = this;', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "white", activePen: doc },
-            // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.inkPen, this)`, backgroundColor: "red", activePen: doc },
-            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
-            // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
+            { title: "library", icon: "bars", click: 'switchToLibrary()', backgroundColor: "lightgrey" },
+            { title: "record", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "lightgrey" },
+            { title: "upload", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "lightgrey" },
+            { title: "presentation", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "lightgrey" },
+            { title: "ink", icon: "pen-nib", backgroundColor: "lightgrey" },
+            { title: "settings", icon: "cog", click: 'openMobileSettings()', backgroundColor: "lightgrey" }
         ];
         return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
-            _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
-            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
-            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen,
-            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+            _nativeWidth: 150, _nativeHeight: 150, _width: 150, _height: 150,
+            dropAction: undefined,
+            title: data.title,
+            icon: data.icon,
+            ignoreClick: data.ignoreClick,
+            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
+            onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined,
+            activePen: data.activePen,
+            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]),
+            dragFactory: data.dragFactory,
         }));
     }
 
+    static setupMobileMenu() {
+        const menu = Cast(Docs.Create.StackingDocument(CurrentUserUtils.setupMobileButtons(), {
+            _width: 980, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "home", _autoHeight: true, _yMargin: 80
+        }), Doc) as Doc;
+        return menu;
+    }
+
     static setupThumbButtons(doc: Doc) {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.inkPen,  this)`, activePen: doc },
@@ -438,16 +469,20 @@ export class CurrentUserUtils {
         return Cast(userDoc.thumbDoc, Doc);
     }
 
-    static setupMobileDoc(userDoc: Doc) {
-        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
-            columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5
-        });
+    static setupLibrary(userDoc: Doc) {
+        return CurrentUserUtils.setupWorkspaces(userDoc);
     }
 
     static setupMobileInkingDoc(userDoc: Doc) {
         return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
     }
 
+    static setupMobileDoc(userDoc: Doc) {
+        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons2(userDoc), {
+            columnWidth: 100, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", _autoHeight: true, _yMargin: 5
+        });
+    }
+
     static setupMobileUploadDoc(userDoc: Doc) {
         // const addButton = Docs.Create.FontIconDocument({ onDragStart: ScriptField.MakeScript('addWebToMobileUpload()'), title: "Add Web Doc to Upload Collection", icon: "plus", backgroundColor: "black" })
         const webDoc = Docs.Create.WebDocument("https://www.britannica.com/biography/Miles-Davis", {
@@ -608,6 +643,42 @@ export class CurrentUserUtils {
         dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100
     })) as any as Doc
 
+    static setupMobileButtons2(doc?: Doc, buttons?: string[]) {
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, info: string, dragFactory?: Doc }[] = [
+            { title: "LIBRARY", icon: "bars", click: 'switchToLibrary()', backgroundColor: "#ffd6d6", info: "Navigate and access all of your documents within their respective collections" },
+            { title: "RECORD", icon: "microphone", click: 'openMobileAudio()', backgroundColor: "#ffbfbf", info: "Use your mobile to record audio and access it on Dash Web." },
+            { title: "UPLOAD", icon: "upload", click: 'uploadMobileImage()', backgroundColor: "#ff9e9e", info: "Upload an image from your mobile device so it can be accessed on Dash Web" },
+            { title: "PRESENTATION", icon: "desktop", click: 'openMobilePresentation()', backgroundColor: "#ff8080", info: "Use your phone as a remote for you presentation." },
+            // { title: "INK", icon: "pen-nib", backgroundColor: "lightgrey", info: "Doodle and draw with ink on your mobile and have it directly available on Dash Web" },
+            { title: "SETTINGS", icon: "cog", click: 'openMobileSettings()', backgroundColor: "#ff5e5e", info: "Change your password, log out, or manage your account security" }
+        ];
+        return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => this.mobileButton({ title: data.title, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined, _backgroundColor: data.backgroundColor }, [this.ficon({ ignoreClick: true, icon: data.icon, backgroundColor: "rgba(0,0,0,0)" }), this.mobileTextContainer({}, [this.mobileButtonText({}, data.title), this.mobileButtonInfo({}, data.info)])]));
+    }
+
+    static mobileButton = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MulticolumnDocument(docs, {
+        ...opts,
+        dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 900, _nativeHeight: 250, _width: 900, _height: 250, _yMargin: 15,
+        borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled",
+    })) as any as Doc
+
+    static mobileTextContainer = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.MultirowDocument(docs, {
+        ...opts,
+        dropAction: "alias", removeDropProperties: new List<string>(["dropAction"]), _nativeWidth: 450, _nativeHeight: 250, _width: 450, _height: 250, _yMargin: 25,
+        backgroundColor: "rgba(0,0,0,0)", borderRounding: "0", boxShadow: "0 0", _chromeStatus: "disabled",
+    })) as any as Doc
+
+
+    static mobileButtonText = (opts: DocumentOptions, buttonTitle: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonTitle, {
+        ...opts,
+        title: buttonTitle, _fontSize: 37, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)"
+    })) as any as Doc
+
+    static mobileButtonInfo = (opts: DocumentOptions, buttonInfo: string) => new PrefetchProxy(Docs.Create.TextDocument(buttonInfo, {
+        ...opts,
+        title: "info", _fontSize: 25, _xMargin: 0, _yMargin: 0, ignoreClick: true, _chromeStatus: "disabled", backgroundColor: "rgba(0,0,0,0)", _dimMagnitude: 2,
+    })) as any as Doc
+
+
     /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window
     static setupDockedButtons(doc: Doc) {
         if (doc["dockedBtn-pen"] === undefined) {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 4352ac52c..a11c97b09 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -27,7 +27,7 @@ import { listSpec } from "../../fields/Schema";
 import { List } from "../../fields/List";
 import { CollectionViewType } from "./collections/CollectionView";
 import TouchScrollableMenu, { TouchScrollableMenuItem } from "./TouchScrollableMenu";
-import MobileInterface from "../../mobile/MobileInterface";
+import { MobileInterface } from "../../mobile/MobileInterface";
 import { MobileInkOverlayContent } from "../../server/Message";
 import MobileInkOverlay from "../../mobile/MobileInkOverlay";
 import { RadialMenu } from "./nodes/RadialMenu";
@@ -115,12 +115,12 @@ export default class GestureOverlay extends Touchable {
     onReactTouchStart = (te: React.TouchEvent) => {
         document.removeEventListener("touchmove", this.onReactHoldTouchMove);
         document.removeEventListener("touchend", this.onReactHoldTouchEnd);
-        if (RadialMenu.Instance._display === true) {
-            te.preventDefault();
-            te.stopPropagation();
-            RadialMenu.Instance.closeMenu();
-            return;
-        }
+        // if (RadialMenu.Instance._display === true) {
+        //     te.preventDefault();
+        //     te.stopPropagation();
+        //     RadialMenu.Instance.closeMenu();
+        //     return;
+        // }
 
         // this chunk adds new touch targets to a map of pointer events; this helps us keep track of individual fingers
         // so that we can know, for example, if two fingers are pinching out or in.
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 80ee2a65d..8b0c72f5e 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -597,7 +597,7 @@ export class CollectionFreeFormView extends CollectionSubView<PanZoomDocument, P
     pan = (e: PointerEvent | React.Touch | { clientX: number, clientY: number }): void => {
         // bcz: theres should be a better way of doing these than referencing these static instances directly
         MarqueeOptionsMenu.Instance?.fadeOut(true);// I think it makes sense for the marquee menu to go away when panned. -syip2
-        PDFMenu.Instance.fadeOut(true);
+        // PDFMenu.Instance.fadeOut(true);
 
         const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
         this.setPan((this.Document._panX || 0) - dx, (this.Document._panY || 0) - dy, undefined, true);
diff --git a/src/mobile/MobileHome.scss b/src/mobile/MobileHome.scss
new file mode 100644
index 000000000..e1566b622
--- /dev/null
+++ b/src/mobile/MobileHome.scss
@@ -0,0 +1,101 @@
+$navbar-height: 120px;
+$pathbar-height: 50px;
+
+* {
+    margin: 0px;
+    padding: 0px;
+    box-sizing: border-box;
+    font-family: "Open Sans";
+}
+
+.homeContainer {
+    position: relative;
+    top: 200px;
+    overflow: scroll;
+    width: 100%;
+    left: 0;
+    height: calc(100% - 120px);
+    overflow-y: scroll;
+}
+
+.homeButton {
+    width: 96%;
+    margin-left: 2.5%;
+    height: 250px;
+    border-radius: 30px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.iconRight {
+    position: absolute;
+    width: 50%;
+    height: 80px;
+    transform: translate(0, 50%);
+    right: 0px;
+    text-align: center;
+    font-size: 80;
+}
+
+.iconLeft {
+    position: absolute;
+    width: 50%;
+    height: 80px;
+    transform: translate(0%, 50%);
+    left: 0px;
+    text-align: center;
+    font-size: 80;
+}
+
+.textLeft {
+    position: absolute;
+    width: 50%;
+    left: 0px;
+    font-size: 40px;
+    text-align: left;
+    margin-left: 110px;
+    margin-top: 40px;
+    font-family: sans-serif;
+    font-weight: bold;
+}
+
+.textRight {
+    position: absolute;
+    width: 50%;
+    right: 0px;
+    font-size: 40px;
+    text-align: right;
+    margin-right: 110px;
+    margin-top: 40px;
+    font-family: sans-serif;
+    font-weight: bold;
+}
+
+.menuView {
+    position: absolute;
+    top: 135px;
+    left: 50%;
+    transform: translate(-50%, 0%);
+    display: flex;
+}
+
+.iconView {
+    height: 60px;
+    width: 60px;
+    background-color: darkgray;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: black;
+}
+
+.listView {
+    height: 60px;
+    width: 60px;
+    margin-left: 20;
+    background-color: darkgray;
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 2px;
+    border-color: black;
+}
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 052c8975a..6b75ce07d 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -6,7 +6,7 @@ import {
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft
+    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
@@ -25,6 +25,7 @@ import { Transform } from '../client/util/Transform';
 import { InkingControl } from '../client/views/InkingControl';
 import "./MobileInterface.scss";
 import "./MobileMenu.scss";
+import "./MobileHome.scss";
 import { DocumentManager } from '../client/util/DocumentManager';
 import SettingsManager from '../client/util/SettingsManager';
 import { Uploader } from "./ImageUpload";
@@ -32,26 +33,1056 @@ import { DockedFrameRenderer } from '../client/views/collections/CollectionDocki
 import { InkTool } from '../fields/InkField';
 import { listSpec } from '../fields/Schema';
 import { nullAudio, WebField } from '../fields/URLField';
+import GestureOverlay from "../client/views/GestureOverlay";
 
 library.add(faTasks, faEdit, faTrashAlt, faPalette, faAngleRight, faBell, faTrash, faCamera, faExpand, faCaretDown, faCaretLeft, faCaretRight, faCaretSquareDown, faCaretSquareRight, faArrowsAltH, faPlus, faMinus,
     faTerminal, faToggleOn, fileSolid, faExternalLinkAlt, faLocationArrow, faSearch, faFileDownload, faStop, faCalculator, faWindowMaximize, faAddressCard,
     faQuestionCircle, faArrowLeft, faArrowRight, faArrowDown, faArrowUp, faBolt, faBullseye, faCaretUp, faCat, faCheck, faChevronRight, faClipboard, faClone, faCloudUploadAlt,
     faCommentAlt, faCompressArrowsAlt, faCut, faEllipsisV, faEraser, faExclamation, faFileAlt, faFileAudio, faFilePdf, faFilm, faFilter, faFont, faGlobeAsia, faHighlighter,
     faLongArrowAltRight, faMicrophone, faMousePointer, faMusic, faObjectGroup, faPause, faPen, faPenNib, faPhone, faPlay, faPortrait, faRedoAlt, faStamp, faStickyNote,
-    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft);
+    faThumbtack, faTree, faTv, faUndoAlt, faVideo, faAsterisk, faBrain, faImage, faPaintBrush, faTimes, faEye, faHome, faLongArrowAltLeft, faBars, faTh, faChevronLeft);
+
+// @observer
+// 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; }
+//     // @observable private currentView: "main" | "ink" | "upload" = "main";
+//     @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc);
+//     @observable private renderView?: () => JSX.Element;
+//     @observable private sidebarActive = true;
+
+//     public _activeDoc: Doc = this.mainDoc;
+//     public _homeDoc: Doc = this.mainDoc;
+//     private _homeMenu: boolean = true;
+
+//     // private inkDoc?: Doc;
+//     public drawingInk: boolean = false;
+//     private _ink: boolean = false;
+
+//     // private _uploadDoc: Doc = this.userDoc;
+//     private _child: Doc | null = null;
+//     private _parents: Array<Doc> = [];
+//     private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc);
+//     private _open: boolean = false;
+
+//     constructor(props: Readonly<{}>) {
+//         super(props);
+//         MobileInterface.Instance = this;
+//     }
+
+//     @action
+//     componentDidMount = () => {
+//         library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer, faThumbtack]);
+
+//         if (this.userDoc && !this.mainContainer) {
+//             this.userDoc.activeMobile = this._homeDoc;
+//         }
+
+//         InkingControl.Instance.switchTool(InkTool.None);
+//         MobileInterface.Instance.drawingInk = false;
+//         InkingControl.Instance.updateSelectedColor("#FF0000");
+//         InkingControl.Instance.switchWidth("2");
+//         this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+//     }
+
+//     @action
+//     switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
+//         if (!this.userDoc) return;
+
+//         this.userDoc.activeMobile = doc(this.userDoc);
+//         onSwitch && onSwitch();
+
+//         this.renderView = renderView;
+//     }
+
+//     onSwitchInking = () => {
+//         const button = document.getElementById("inkButton") as HTMLElement;
+//         const color = InkingControl.Instance.selectedColor;
+//         button.style.backgroundColor = this._ink ? "white" : color;
+//         button.style.color = this._ink ? "black" : "white";
+
+//         if (!this._ink) {
+//             console.log("INK IS ACTIVE");
+//             InkingControl.Instance.switchTool(InkTool.Pen);
+//             MobileInterface.Instance.drawingInk = true;
+//             this._ink = true;
+//         } else {
+//             console.log("INK IS INACTIVE");
+//             InkingControl.Instance.switchTool(InkTool.None);
+//             MobileInterface.Instance.drawingInk = false;
+//             this._ink = false;
+//         }
+//     }
+
+//     onSwitchUpload = async () => {
+//         let width = 300;
+//         let height = 300;
+//         const res = await rp.get(Utils.prepend("/getUserDocumentId"));
+
+//         // get width and height of the collection doc
+//         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 docView = DocumentManager.Instance.getDocumentView(collectionDoc);
+//                 if (docView) {
+//                     width = docView.nativeWidth ? docView.nativeWidth : 300;
+//                     height = docView.nativeHeight ? docView.nativeHeight : 300;
+//                 }
+//             }
+//         }
+//         DocServer.Mobile.dispatchOverlayTrigger({
+//             enableOverlay: true,
+//             width: width,
+//             height: height,
+//             text: "Documents uploaded from mobile will show here",
+//         });
+//     }
+
+//     back = () => {
+//         let header = document.getElementById("header") as HTMLElement;
+//         let doc = Cast(this._parents.pop(), Doc) as Doc;
+//         if (doc === Cast(this._library, Doc) as Doc) {
+//             this._child = null;
+//             this.userDoc.activeMobile = this._library;
+//         } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
+//             this._homeMenu = true;
+//             this._parents = [];
+//             this._activeDoc = this._homeDoc;
+//             this._child = null;
+//             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+//         } else {
+//             if (doc) {
+//                 this._child = doc;
+//                 this.switchCurrentView((userDoc: Doc) => doc);
+//                 this._homeMenu = false;
+//                 header.textContent = String(doc.title);
+//             }
+//         }
+//         if (doc) {
+//             this._activeDoc = doc;
+//         }
+//         this._ink = false;
+//     }
+
+//     returnHome = () => {
+//         if (this._homeMenu === false || this._open === true) {
+//             this._homeMenu = true;
+//             this._parents = [];
+//             this._activeDoc = this._homeDoc;
+//             this._child = null;
+//             this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+//         }
+//         if (this._open) {
+//             this.toggleSidebar();
+//         }
+//     }
+
+//     returnMain = () => {
+//         this._parents = [];
+//         // this.toggleSidebar();
+//         this._activeDoc = this._library;
+//         this.switchCurrentView((userDoc: Doc) => this._library);
+//         this._homeMenu = false;
+//         this._child = null;
+//     }
+
+//     displayWorkspaces = () => {
+//         if (this.mainContainer) {
+//             const backgroundColor = () => "white";
+//             if (this._activeDoc.title === "mobile audio") {
+//                 return (
+//                     <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}>
+//                         <DocumentView
+//                             Document={this.mainContainer}
+//                             DataDoc={undefined}
+//                             LibraryPath={emptyPath}
+//                             addDocument={returnFalse}
+//                             addDocTab={returnFalse}
+//                             pinToPres={emptyFunction}
+//                             rootSelected={returnFalse}
+//                             removeDocument={undefined}
+//                             onClick={undefined}
+//                             ScreenToLocalTransform={Transform.Identity}
+//                             ContentScaling={returnOne}
+//                             NativeHeight={returnZero}
+//                             NativeWidth={returnZero}
+//                             PanelWidth={() => window.screen.width}
+//                             PanelHeight={() => window.screen.height}
+//                             renderDepth={0}
+//                             focus={emptyFunction}
+//                             backgroundColor={backgroundColor}
+//                             parentActive={returnTrue}
+//                             whenActiveChanged={emptyFunction}
+//                             bringToFront={emptyFunction}
+//                             ContainingCollectionView={undefined}
+//                             ContainingCollectionDoc={undefined}
+//                         />
+//                     </div>
+//                 );
+//             } else {
+//                 return (
+//                     <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
+//                         <DocumentView
+//                             Document={this.mainContainer}
+//                             DataDoc={undefined}
+//                             LibraryPath={emptyPath}
+//                             addDocument={returnFalse}
+//                             addDocTab={returnFalse}
+//                             pinToPres={emptyFunction}
+//                             rootSelected={returnFalse}
+//                             removeDocument={undefined}
+//                             onClick={undefined}
+//                             ScreenToLocalTransform={Transform.Identity}
+//                             ContentScaling={returnOne}
+//                             PanelWidth={this.returnWidth}
+//                             PanelHeight={this.returnHeight}
+//                             NativeHeight={returnZero}
+//                             NativeWidth={returnZero}
+//                             renderDepth={0}
+//                             focus={emptyFunction}
+//                             backgroundColor={backgroundColor}
+//                             parentActive={returnTrue}
+//                             whenActiveChanged={emptyFunction}
+//                             bringToFront={emptyFunction}
+//                             ContainingCollectionView={undefined}
+//                             ContainingCollectionDoc={undefined}
+//                         // mobile={true}
+//                         />
+//                     </div>
+//                 );
+//             }
+//         }
+//     }
+
+//     returnWidth = () => 2000;
+//     returnHeight = () => 2000;
+
+//     handleClick(doc: Doc) {
+//         let children = DocListCast(doc.data);
+//         if (doc.type !== "collection") {
+//             this._parents.push(this._activeDoc);
+//             this._activeDoc = doc;
+//             this.switchCurrentView((userDoc: Doc) => doc);
+//             this._homeMenu = false;
+//             this.toggleSidebar();
+//         } else if (doc.type === "collection" && children.length === 0) {
+//             console.log("This collection has no children");
+//         } else {
+//             this._parents.push(this._activeDoc);
+//             this._activeDoc = doc;
+//             this.switchCurrentView((userDoc: Doc) => doc);
+//             this._homeMenu = false;
+//             this._child = doc;
+//         }
+
+//         // let sidebar = document.getElementById("sidebar") as HTMLElement;
+//         // sidebar.classList.toggle('active');
+//     }
+
+//     createPathname = () => {
+//         let docArray = [];
+//         this._parents.map((doc: Doc, index: any) => {
+//             // if (doc === this.mainDoc) {
+//             //     pathname = pathname;
+//             // } else if (doc.type === "audio" || doc.type === "presentation") {
+//             //     pathname = pathname;
+//             // } else if (doc.type !== "collection") {
+//             //     pathname = pathname;
+//             // } else {
+//             //     pathname = pathname + " > " + doc.title;
+//             //     titleArray.push(doc.title);
+//             //     docArray.push(doc);
+//             // }
+//             docArray.push(doc);
+//         });
+//         docArray.push(this._activeDoc);
+//         // if (this._activeDoc.title === "mobile audio") {
+//         //     pathname = this._activeDoc.title;
+//         // } else if (this._activeDoc.title === "Presentation") {
+//         //     pathname = this._activeDoc.title;
+//         // } else if (this._activeDoc === this.mainDoc) {
+//         //     pathname = pathname;
+//         // } else {
+//         //     pathname = pathname + " > " + this._activeDoc.title;
+//         //     docArray.push(this._activeDoc);
+//         //     titleArray.push(this._activeDoc.title);
+//         // }
+
+//         return docArray;
+//     }
+
+//     renderPathbar = () => {
+//         // if (this._homeMenu == false) {
+//         let docArray = this.createPathname();
+//         let items = docArray.map((doc: Doc, index: any) => {
+//             if (index == 0) {
+//                 return (
+//                     <div className="pathbarItem">
+//                         <div className="pathbarText"
+//                             key={index}
+//                             onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+//                         </div>
+//                     </div>);
+//             } else if (doc === this._activeDoc) {
+//                 return (
+//                     <div className="pathbarItem">
+//                         <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
+//                         <div className="pathbarText"
+//                             style={{ backgroundColor: "rgb(119, 37, 37)" }}
+//                             key={index}
+//                             onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+//                         </div>
+//                     </div>);
+//             } else {
+//                 return (
+//                     <div className="pathbarItem">
+//                         <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
+//                         <div className="pathbarText"
+//                             key={index}
+//                             onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+//                         </div>
+//                     </div>);
+//             }
+
+//         });
+//         if (this._parents.length !== 0) {
+//             return (<div className="pathbar">
+//                 <div className="scrollmenu">
+//                     {items}
+//                 </div>
+//                 <div className="back" >
+//                     <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} />
+//                 </div>
+//                 <div className="hidePath" />
+//             </div>);
+//         } else {
+//             return (<div className="pathbar">
+//                 <div className="scrollmenu">
+//                     {items}
+//                 </div>
+//                 <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>
+//         //     );
+//         // }
+
+//         // }
+//     }
+
+//     handlePathClick = (doc: Doc, index: number) => {
+//         if (doc === this._library) {
+//             this._activeDoc = doc;
+//             this._child = null;
+//             this.switchCurrentView((userDoc: Doc) => doc);
+//             this._parents.length = index;
+//         } else if (doc === this._homeDoc) {
+//             this.returnHome();
+//         } else {
+//             console.log(index);
+//             this._activeDoc = doc;
+//             this._child = doc;
+//             this.switchCurrentView((userDoc: Doc) => doc);
+//             this._parents.length = index;
+//         }
+//     }
+
+//     @action
+//     toggleSidebar = () => this.sidebarActive = !this.sidebarActive
+
+//     switchToLibrary = () => {
+//         this._parents.push(this._activeDoc);
+//         this.switchCurrentView((userDoc: Doc) => this._library);
+//         this._activeDoc = this._library;
+//         this._homeMenu = false;
+//         this.toggleSidebar();
+//     }
+
+//     // renderDefaultContent = () => {
+//     //     let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
+//     //         if (doc.type !== "ink") {
+//     //             return (
+//     //                 <div
+//     //                     className="item"
+//     //                     key={index}
+//     //                     onClick={() => doc.click}>{doc.title}
+//     //                 </div>);
+//     //         }
+//     //     });
+
+//     //     if (this._homeMenu === true) {
+//     //         return (
+//     //             <div>
+//     //                 <div className="navbar">
+//     //                     <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+//     //                     <div className="header" id="header">{this._homeDoc.title}</div>
+//     //                     <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+//     //                         <span></span>
+//     //                         <span></span>
+//     //                         <span></span>
+//     //                     </div>
+//     //                 </div>
+//     //                 {this.renderPathbar()}
+//     //                 <div className="sidebar" id="sidebar">
+//     //                     <div className="sidebarButtons">
+//     //                         {menuButtons}
+//     //                     </div>
+//     //                 </div>
+//     //             </div>
+//     //         );
+//     //     }
+
+//     //     const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+//     //     const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => {
+//     //         return (
+//     //             <div
+//     //                 className="item"
+//     //                 key={index}
+//     //                 onClick={() => this.handleClick(doc)}>{doc.title}
+//     //                 <div className="type">{doc.type}</div>
+//     //                 <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+//     //             </div>);
+//     //     });
+//     //     return (
+//     //         <>
+//     //             <div className="navbar">
+//     //                 <div className={"header"}>{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}</div>
+//     //                 <div
+//     //                     className={`toggle-btn ${this.sidebarActive ? "active" : ""}`}
+//     //                     onClick={this.toggleSidebar}
+//     //                 />
+//     //             </div>
+//     //             <div className="pathbar">
+//     //                 <div className="pathname">{this.createPathname()}</div>
+//     //             </div>
+//     //             <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
+//     //                 <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+//     //                 {this._child ?
+//     //                     <>
+//     //                         <div className="back" onClick={this.back}>&#8592;</div>
+//     //                         <div>{buttons}</div>
+//     //                         <div className="item" key="home" onClick={this.returnHome}>Home</div>
+//     //                     </> :
+//     //                     <>
+//     //                         {buttons}
+//     //                         {/* <div className="item" key="library" onClick={this.openLibrary}>
+//     //                             Library
+//     //                             </div> */}
+//     //                         <Uploader Document={workspaces} />
+//     //                         <div className="item" key="audio" onClick={this.recordAudio}>Record Audio</div>
+//     //                         <div className="item" key="presentation" onClick={this.setupDefaultPresentation}>Presentation</div>
+//     //                         <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>Settings</div>
+//     //                     </>
+//     //                 }
+//     //             </div>
+//     //             {this._child ? null : <div>{this.renderView}</div>}
+//     //         </>
+//     //     );
+//     // }
+
+//     renderDefaultContent = () => {
+//         let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
+//             if (doc.type !== "ink") {
+//                 return (
+//                     <div
+//                         className="item"
+//                         key={index}
+//                         onClick={() => doc.click}>{doc.title}
+//                     </div>);
+//             }
+//         });
+
+//         if (this._homeMenu === true) {
+//             return (
+//                 <div>
+//                     <div className="navbar">
+//                         <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+//                         <div className="header" id="header">{this._homeDoc.title}</div>
+//                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+//                             <span></span>
+//                             <span></span>
+//                             <span></span>
+//                         </div>
+//                     </div>
+//                     {this.renderPathbar()}
+//                     <div className="sidebar" id="sidebar">
+//                         <div className="sidebarButtons">
+//                             {menuButtons}
+//                         </div>
+//                     </div>
+//                 </div>
+//             );
+//         }
+//         const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+//         let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+//             if (doc.type !== "ink") {
+//                 return (
+//                     <div
+//                         className="item"
+//                         key={index}
+//                         onClick={() => this.handleClick(doc)}>{doc.title}
+//                         <div className="type">{doc.type}</div>
+//                         <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+//                     </div>);
+//             }
+//         });
+
+//         if (this._child) {
+//             buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
+//                 if (doc.type !== "ink") {
+//                     return (
+//                         <div
+//                             className="item"
+//                             key={index}
+//                             onClick={() => this.handleClick(doc)}>{doc.title}
+//                             <div className="type">{doc.type}</div>
+//                             <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+//                         </div>);
+//                 }
+//             });
+//         }
+
+//         if (!this._child) {
+//             return (
+//                 <div>
+//                     <div className="navbar">
+//                         <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+//                         <div className="header" id="header">{this._homeDoc.title}</div>
+//                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+//                             <span></span>
+//                             <span></span>
+//                             <span></span>
+//                         </div>
+//                     </div>
+//                     {this.renderPathbar()}
+//                     <div className="sidebar" id="sidebar">
+//                         <div className="sidebarButtons">
+//                             {buttons}
+//                             {/* <div className="item" key="library" onClick={this.openLibrary}>
+//                                 Library
+//                             </div> */}
+//                             {/* <Uploader Document={workspaces} />
+//                             <div className="item" key="audio" onClick={this.recordAudio}>
+//                                 Record Audio
+//                             </div>
+//                             <div className="item" key="presentation" onClick={this.openDefaultPresentation}>
+//                                 Presentation
+//                             </div> */}
+//                             {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
+//                                 Settings
+//                             </div> */}
+//                             <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
+//                                 Ink On
+//                             </div>
+//                         </div>
+//                     </div>
+//                     {/* <div>
+//                         {this.renderView}
+//                     </div> */}
+//                 </div>
+//             );
+//         }
+//         else {
+//             return (
+//                 <div>
+//                     <div className="navbar">
+//                         <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+//                         <div className="header" id="header">library</div>
+//                         <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+//                             <span></span>
+//                             <span></span>
+//                             <span></span>
+//                         </div>
+//                     </div>
+//                     {this.renderPathbar()}
+//                     <div className="sidebar" id="sidebar">
+//                         <div className="sidebarButtons">
+//                             {buttons}
+//                             <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
+//                                 Ink On
+//                             </div>
+//                             <div className="item" key="home" onClick={this.returnMain}>
+//                                 Home
+//                             </div>
+//                         </div>
+//                     </div>
+//                 </div>
+//             );
+//         }
+//     }
+
+//     recordAudio = async () => {
+//         // upload to server with known URL
+//         if (this._activeDoc.title !== "mobile audio") {
+//             this._parents.push(this._activeDoc);
+//         }
+//         const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
+//         console.log(audioDoc);
+//         if (audioDoc) {
+//             console.log("audioClicked: " + audioDoc.title);
+//             this._activeDoc = audioDoc;
+//             this.switchCurrentView((userDoc: Doc) => audioDoc);
+//             this._homeMenu = false;
+//             // this.toggleSidebar();
+//         }
+//         // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+//         // this.audioState = await audioDoc.getProto;
+//         // if (this.audioState) {
+//         //     console.log(this.audioState);
+//         //     const data = Cast(audioRightSidebar.data, listSpec(Doc));
+//         //     if (data) {
+//         //         data.push(audioDoc);
+//         //     }
+//         // }
+//     }
+
+//     uploadAudio = () => {
+//         const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+//         const audioDoc = this._activeDoc;
+//         const data = Cast(audioRightSidebar.data, listSpec(Doc));
+//         console.log(audioDoc.proto);
+//         if (data) {
+//             data.push(audioDoc);
+//         }
+//         // this.recordAudio();
+//     }
+
+//     uploadAudioButton = () => {
+//         if (this._activeDoc.type === "audio") {
+//             return <div className="docButton"
+//                 title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+//                 style={{ backgroundColor: "black", color: "white" }}
+//                 onClick={this.uploadAudio}
+//             >
+//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload"
+//                 />
+//             </div>;
+//         }
+//     }
+
+//     toggleSelector = () => {
+//         console.log("toggle selector!");
+//         let toolbar = document.getElementById("toolbar") as HTMLElement;
+//         toolbar.classList.toggle('active');
+//     }
+
+//     colorTool = () => {
+//         if (this._activeDoc._viewType === "docking") {
+//             const color = InkingControl.Instance.selectedColor;
+//             console.log(color);
+//             return (
+//                 <div
+//                     className="docButton"
+//                     style={{ backgroundColor: color }}
+//                     onClick={this.toggleSelector}
+//                 >
+//                     <div className="toolbar" id="toolbar">
+//                         <div className="colorSelector">
+//                             <div className="colorButton"
+//                                 style={{ backgroundColor: "red" }}
+//                                 onClick={() => {
+//                                     InkingControl.Instance.updateSelectedColor("rgb(255,0,0)");
+//                                     Doc.UserDoc().inkColor = "rgb(255,0,0)";
+//                                     console.log(InkingControl.Instance.selectedColor);
+//                                 }}>
+//                             </div>
+//                             <div className="colorButton"
+//                                 style={{ backgroundColor: "green" }}
+//                                 onClick={e => {
+//                                     InkingControl.Instance.updateSelectedColor("rgb(0,128,0)");
+//                                     Doc.UserDoc().inkColor = "rgb(0,128,0)";
+//                                     console.log(InkingControl.Instance.selectedColor);
+//                                 }}>
+//                             </div>
+//                             <div className="colorButton"
+//                                 style={{ backgroundColor: "blue" }}
+//                                 onClick={e => {
+//                                     InkingControl.Instance.updateSelectedColor("rgb(0,0,255)");
+//                                     Doc.UserDoc().inkColor = "rgb(0,0,255)";
+//                                     console.log(InkingControl.Instance.selectedColor);
+//                                 }}>
+//                             </div>
+//                         </div>
+//                         <div className="widthSelector">
+//                             <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} />
+//                         </div>
+//                     </div>
+//                 </div>
+//             );
+//         }
+//     }
+
+//     drawInk = () => {
+//         if (this._activeDoc._viewType === "docking") {
+//             const inkIsOn = this._ink;
+//             return <div className="docButton"
+//                 id="inkButton"
+//                 title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+//                 onClick={this.onSwitchInking}>
+//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
+//                 />
+//             </div>;
+//         }
+//     }
+
+//     downloadDocument = () => {
+//         if (this._activeDoc.type === "image") {
+//             const url = this._activeDoc["data-path"]?.toString();
+//             return <div className="docButton"
+//                 title={"Download Image"}
+//                 style={{ backgroundColor: "white", color: "black" }}
+//                 onClick={e => {
+//                     window.open(url);
+//                     console.log(url);
+//                 }}>
+//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download"
+//                 />
+//             </div>;
+//         }
+//     }
+
+//     pinToPresentation = () => {
+//         // Only making button available if it is an image
+//         if (this._activeDoc.type === "image") {
+//             const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
+//             return <div className="docButton"
+//                 title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
+//                 style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+//                 onClick={e => {
+//                     if (isPinned) {
+//                         DockedFrameRenderer.UnpinDoc(this._activeDoc);
+//                     }
+//                     else {
+//                         DockedFrameRenderer.PinDoc(this._activeDoc);
+//                     }
+//                 }}>
+//                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
+//                 />
+//             </div>;
+//         }
+//     }
+
+//     setupDefaultPresentation = () => {
+//         if (this._activeDoc.title !== "Presentation") {
+//             this._parents.push(this._activeDoc);
+//         }
+
+//         const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+
+//         if (presentation) {
+//             console.log(this._activeDoc.mobile);
+//             console.log("presentation clicked: " + presentation.title);
+//             this._activeDoc = presentation;
+//             this.switchCurrentView((userDoc: Doc) => presentation);
+//             this._homeMenu = false;
+//             // this.toggleSidebar();
+//         }
+//     }
+
+//     // mobileHome = () => {
+//     //     return (
+//     //         <div className="homeContainer">
+//     //             <div className="uploadButton">
+
+//     //             </div>
+//     //             <div className="presentationButton">
+
+//     //             </div>
+//     //             <div className="recordAudioButton">
+
+//     //             </div>
+//     //             <div className="inkButton">
+
+//     //             </div>
+//     //             <div className="settingsButton">
+
+//     //             </div>
+//     //         </div>
+//     //     );
+//     // }
+
+//     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);
+//         InkingControl.Instance.switchTool(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>();
+//             }
+//         }
+//     }
+
+//     onDragOver = (e: React.DragEvent) => {
+//         e.preventDefault();
+//         e.stopPropagation();
+//     }
+
+//     render() {
+//         // const content = this.currentView === "main" ? this.mainContent :
+//         //     this.currentView === "ink" ? this.inkContent :
+//         //         this.currentView === "upload" ? this.uploadContent : <></>;
+//         return (
+//             <div className="mobileInterface-container" onDragOver={this.onDragOver}>
+//                 {/* <DocumentDecorations />
+//                 <GestureOverlay>
+//                     {this.renderView ? this.renderView() : this.renderDefaultContent()}
+//                 </GestureOverlay> */}
+//                 {/* <GestureOverlay> */}
+//                 <SettingsManager />
+//                 {/* {this.menuOptions()} */}
+//                 {/* {this.displayHome()} */}
+//                 <div className="docButtonContainer">
+//                     {this.pinToPresentation()}
+//                     {this.downloadDocument()}
+//                     {this.drawInk()}
+//                     {this.uploadAudioButton()}
+//                     {this.colorTool()}
+//                 </div>
+//                 <GestureOverlay>
+
+//                 </GestureOverlay>
+//                 {this.renderDefaultContent()}
+//                 {this.displayWorkspaces()}
+//                 {/* </GestureOverlay> */}
+//                 {/* <DictationOverlay />
+//                 <SharingManager />
+//                 <GoogleAuthenticationManager /> */}
+//                 {/* <DocumentDecorations /> */}
+//                 {/* <div>
+//                     {this.renderDefaultContent()}
+//                 </div> */}
+//                 {/* <PreviewCursor /> */}
+//                 {/* <ContextMenu /> */}
+//                 {/* <RadialMenu />
+//                 <RichTextMenu /> */}
+//                 {/* <PDFMenu />
+//                 <MarqueeOptionsMenu />
+//                 <OverlayView /> */}
+//             </div>
+//         );
+//     }
+// }
+
+// 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(); });
+// Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
+// Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
+// Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
+// // WAS 2
+
+// // 1
+// // renderUploadContent() {
+// //     if (this.mainContainer) {
+// //         return (
+// //             <div className="mobileInterface" onDragOver={this.onDragOver}>
+// //                 <div className="mobileInterface-inkInterfaceButtons">
+// //                     <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
+// //                     {/* <button className="mobileInterface-button" onClick={this.clearUpload} title="Clear Upload">CLEAR</button> */}
+// //                     {/* <button className="mobileInterface-button" onClick={this.addWeb} title="Add Web Doc to Upload Collection"></button> */}
+// //                     <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
+// //                 </div>
+// //                 <DocumentView
+// //                     Document={this.mainContainer}
+// //                     DataDoc={undefined}
+// //                     LibraryPath={emptyPath}
+// //                     addDocument={returnFalse}
+// //                     addDocTab={returnFalse}
+// //                     pinToPres={emptyFunction}
+// //                     rootSelected={returnFalse}
+// //                     removeDocument={undefined}
+// //                     onClick={undefined}
+// //                     ScreenToLocalTransform={Transform.Identity}
+// //                     ContentScaling={returnOne}
+// //                     NativeHeight={returnZero}
+// //                     NativeWidth={returnZero}
+// //                     PanelWidth={() => window.screen.width}
+// //                     PanelHeight={() => window.screen.height}
+// //                     renderDepth={0}
+// //                     focus={emptyFunction}
+// //                     backgroundColor={returnEmptyString}
+// //                     parentActive={returnTrue}
+// //                     whenActiveChanged={emptyFunction}
+// //                     bringToFront={emptyFunction}
+// //                     ContainingCollectionView={undefined}
+// //                     ContainingCollectionDoc={undefined} />
+// //             </div>
+// //         );
+// //     }
+// // }
+
+// // 2
+// // Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
+// // Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
+// // Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
+// // Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
+//     // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
+
+
+// // 3   
+//     // renderInkingContent = () => {
+//         //     console.log("rendering inking content");
+//         //     // TODO: support panning and zooming
+//         //     // TODO: handle moving of ink strokes
+//         //     if (this.mainContainer) {
+//         //         return (
+//         //             <div className="mobileInterface">
+//         //                 <div className="mobileInterface-inkInterfaceButtons">
+//         //                     <div className="navButtons">
+//         //                         <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button>
+//         //                     </div>
+//         //                     <div className="inkSettingButtons">
+//         //                         <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+//         //                     </div>
+//         //                     <div className="navButtons">
+//         //                         <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button>
+//         //                         <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
+//         //                     </div>
+//         //                 </div>
+//         //                 <CollectionView
+//         //                     Document={this.mainContainer}
+//         //                     DataDoc={undefined}
+//         //                     LibraryPath={emptyPath}
+//         //                     fieldKey={""}
+//         //                     dropAction={"alias"}
+//         //                     bringToFront={emptyFunction}
+//         //                     addDocTab={returnFalse}
+//         //                     pinToPres={emptyFunction}
+//         //                     PanelWidth={this.panelWidth}
+//         //                     PanelHeight={this.panelHeight}
+//         //                     NativeHeight={returnZero}
+//         //                     NativeWidth={returnZero}
+//         //                     focus={emptyFunction}
+//         //                     isSelected={returnFalse}
+//         //                     select={emptyFunction}
+//         //                     active={returnFalse}
+//         //                     ContentScaling={returnOne}
+//         //                     whenActiveChanged={returnFalse}
+//         //                     ScreenToLocalTransform={Transform.Identity}
+//         //                     renderDepth={0}
+//         //                     ContainingCollectionView={undefined}
+//         //                     ContainingCollectionDoc={undefined}
+//         //                     rootSelected={returnTrue}>
+//         //                 </CollectionView>
+//         //             </div>
+//         //         );
+//         //     }
+//         // }
 
 @observer
 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; }
-    // @observable private currentView: "main" | "ink" | "upload" = "main";
-    @observable private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc);
+    // @computed private get activeContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
+    @observable private mainDoc: any = CurrentUserUtils.setupMobileMenu();
     @observable private renderView?: () => JSX.Element;
-    @observable private sidebarActive = true;
+    @observable private audioState: any;
 
     public _activeDoc: Doc = this.mainDoc;
+    public _homeDoc: Doc = this.mainDoc;
+    private _homeMenu: boolean = true;
 
     // private inkDoc?: Doc;
     public drawingInk: boolean = false;
@@ -59,9 +1090,11 @@ export class MobileInterface extends React.Component {
     // private _uploadDoc: Doc = this.userDoc;
     private _child: Doc | null = null;
     private _parents: Array<Doc> = [];
-    private _menu: Doc = this.mainDoc;
+    private _library: Doc = CurrentUserUtils.setupLibrary(this.userDoc);
     private _open: boolean = false;
-    private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+
+    // private _library: Doc = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+    private _ink: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -71,33 +1104,31 @@ 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.mainDoc;
+            this.userDoc.activeMobile = this._homeDoc;
         }
+        InkingControl.Instance.switchTool(InkTool.None);
+        MobileInterface.Instance.drawingInk = false;
+        InkingControl.Instance.updateSelectedColor("#FF0000");
+        console.log(this.userDoc.inkColor);
+        console.log(InkingControl.Instance.selectedColor);
+        InkingControl.Instance.switchWidth("2");
+        this.switchCurrentView((userDoc: Doc) => this._homeDoc);
     }
 
     @action
     switchCurrentView = (doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) => {
         if (!this.userDoc) return;
 
-        this.userDoc.activeMobile = doc(this.userDoc);
+        Doc.UserDoc().activeMobile = doc(this.userDoc);
         onSwitch && onSwitch();
 
         this.renderView = renderView;
     }
 
-    onSwitchInking = () => {
-        InkingControl.Instance.switchTool(InkTool.Pen);
-        MobileInterface.Instance.drawingInk = true;
-
-        DocServer.Mobile.dispatchOverlayTrigger({
-            enableOverlay: true,
-            width: window.innerWidth,
-            height: window.innerHeight
-        });
-    }
-
     onSwitchUpload = async () => {
         let width = 300;
         let height = 300;
@@ -123,70 +1154,167 @@ export class MobileInterface extends React.Component {
         });
     }
 
+    toggleSidebar = () => {
+        if (this._open === false) {
+            this._open = true;
+        } else {
+            this._open = false;
+        }
+        console.log("clicked");
+        let menuButton = document.getElementById("menuButton") as HTMLElement;
+        menuButton.classList.toggle('active');
+
+        let sidebar = document.getElementById("sidebar") as HTMLElement;
+        sidebar.classList.toggle('active');
+
+        let header = document.getElementById("header") as HTMLElement;
+
+        if (!sidebar.classList.contains('active')) {
+            header.textContent = String(this._activeDoc.title);
+        } else {
+            header.textContent = "library";
+        }
+    }
+
+    switchToLibrary = () => {
+        this._parents.push(this._activeDoc);
+        this.switchCurrentView((userDoc: Doc) => this._library);
+        this._activeDoc = this._library;
+        this._homeMenu = false;
+        this.toggleSidebar();
+    }
+
     back = () => {
-        const doc = Cast(this._parents.pop(), Doc) as Doc;
-        if (doc === Cast(this._menu, Doc) as Doc) {
+        let header = document.getElementById("header") as HTMLElement;
+        let doc = Cast(this._parents.pop(), Doc) as Doc;
+        if (doc === Cast(this._library, Doc) as Doc) {
+            this._child = null;
+            this.userDoc.activeMobile = this._library;
+        } else if (doc === Cast(this._homeDoc, Doc) as Doc) {
+            this._homeMenu = true;
+            this._parents = [];
+            this._activeDoc = this._homeDoc;
             this._child = null;
-            this.userDoc.activeMobile = this.mainDoc;
+            this.switchCurrentView((userDoc: Doc) => this._homeDoc);
         } else {
             if (doc) {
                 this._child = doc;
                 this.switchCurrentView((userDoc: Doc) => doc);
+                this._homeMenu = false;
+                header.textContent = String(doc.title);
             }
         }
         if (doc) {
             this._activeDoc = doc;
         }
+        this._ink = false;
     }
 
     returnHome = () => {
+        if (this._homeMenu === false || this._open === true) {
+            this._homeMenu = true;
+            this._parents = [];
+            this._activeDoc = this._homeDoc;
+            this._child = null;
+            this.switchCurrentView((userDoc: Doc) => this._homeDoc);
+        }
+        if (this._open) {
+            this.toggleSidebar();
+        }
+    }
+
+    returnMain = () => {
+        console.log("home");
         this._parents = [];
-        this._activeDoc = this._menu;
-        this.switchCurrentView((userDoc: Doc) => this._menu);
+        // this.toggleSidebar();
+        this._activeDoc = this._library;
+        this.switchCurrentView((userDoc: Doc) => this._library);
+        this._homeMenu = false;
         this._child = null;
     }
 
+    // @computed get onChildClickHandler() { return ScriptCast(Doc.UserDoc.onClick); }
+
     displayWorkspaces = () => {
         if (this.mainContainer) {
             const backgroundColor = () => "white";
-            return (
-                <div style={{ position: "relative", top: '200px', height: `calc(100% - 250px)`, width: "100%", overflow: "hidden" }}>
-                    <DocumentView
-                        Document={this.mainContainer}
-                        DataDoc={undefined}
-                        LibraryPath={emptyPath}
-                        addDocument={returnFalse}
-                        addDocTab={returnFalse}
-                        pinToPres={emptyFunction}
-                        rootSelected={returnFalse}
-                        removeDocument={undefined}
-                        onClick={undefined}
-                        ScreenToLocalTransform={Transform.Identity}
-                        ContentScaling={returnOne}
-                        NativeHeight={returnZero}
-                        NativeWidth={returnZero}
-                        PanelWidth={() => window.screen.width}
-                        PanelHeight={() => window.screen.height}
-                        renderDepth={0}
-                        focus={emptyFunction}
-                        backgroundColor={backgroundColor}
-                        parentActive={returnTrue}
-                        whenActiveChanged={emptyFunction}
-                        bringToFront={emptyFunction}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined}
-                    />
-                </div>
-            );
+            if (this._activeDoc.title === "mobile audio") {
+                return (
+                    <div style={{ position: "relative", top: '600px', height: `calc(50% - 450px)`, width: "80%", overflow: "hidden", left: "10%", cursor: "pointer" }}>
+                        <DocumentView
+                            Document={this.mainContainer}
+                            DataDoc={undefined}
+                            LibraryPath={emptyPath}
+                            addDocument={returnFalse}
+                            addDocTab={returnFalse}
+                            pinToPres={emptyFunction}
+                            rootSelected={returnFalse}
+                            removeDocument={undefined}
+                            onClick={undefined}
+                            ScreenToLocalTransform={Transform.Identity}
+                            ContentScaling={returnOne}
+                            NativeHeight={returnZero}
+                            NativeWidth={returnZero}
+                            PanelWidth={() => window.screen.width}
+                            PanelHeight={() => window.screen.height}
+                            renderDepth={0}
+                            focus={emptyFunction}
+                            backgroundColor={backgroundColor}
+                            parentActive={returnTrue}
+                            whenActiveChanged={emptyFunction}
+                            bringToFront={emptyFunction}
+                            ContainingCollectionView={undefined}
+                            ContainingCollectionDoc={undefined}
+                        />
+                    </div>
+                );
+            } else {
+                return (
+                    <div style={{ position: "relative", top: '200px', height: `calc(100% - 200px)`, width: "100%", overflow: "hidden", left: "0%" }}>
+                        <DocumentView
+                            Document={this.mainContainer}
+                            DataDoc={undefined}
+                            LibraryPath={emptyPath}
+                            addDocument={returnFalse}
+                            addDocTab={returnFalse}
+                            pinToPres={emptyFunction}
+                            rootSelected={returnFalse}
+                            removeDocument={undefined}
+                            onClick={undefined}
+                            ScreenToLocalTransform={Transform.Identity}
+                            ContentScaling={returnOne}
+                            PanelWidth={this.returnWidth}
+                            PanelHeight={this.returnHeight}
+                            NativeHeight={returnZero}
+                            NativeWidth={returnZero}
+                            renderDepth={0}
+                            focus={emptyFunction}
+                            backgroundColor={backgroundColor}
+                            parentActive={returnTrue}
+                            whenActiveChanged={emptyFunction}
+                            bringToFront={emptyFunction}
+                            ContainingCollectionView={undefined}
+                            ContainingCollectionDoc={undefined}
+                        // mobile={true}
+                        />
+                    </div>
+                );
+            }
         }
     }
 
+    returnWidth = () => 2000;
+    returnHeight = () => 2000;
+
     handleClick(doc: Doc) {
-        const children = DocListCast(doc.data);
+        console.log(screen.height)
+        console.log(screen.width)
+        let children = DocListCast(doc.data);
         if (doc.type !== "collection") {
             this._parents.push(this._activeDoc);
             this._activeDoc = doc;
             this.switchCurrentView((userDoc: Doc) => doc);
+            this._homeMenu = false;
             this.toggleSidebar();
         } else if (doc.type === "collection" && children.length === 0) {
             console.log("This collection has no children");
@@ -194,6 +1322,7 @@ export class MobileInterface extends React.Component {
             this._parents.push(this._activeDoc);
             this._activeDoc = doc;
             this.switchCurrentView((userDoc: Doc) => doc);
+            this._homeMenu = false;
             this._child = doc;
         }
 
@@ -201,167 +1330,426 @@ export class MobileInterface extends React.Component {
         // sidebar.classList.toggle('active');
     }
 
+    /**
+     * Handles creation of array which is then rendered in renderPathbar()
+     */
     createPathname = () => {
-        let pathname = "";
+        // let pathname = 'workspaces';
+        // let titleArray = [];
+        let docArray = [];
         this._parents.map((doc: Doc, index: any) => {
-            if (doc === this.mainDoc) {
-                pathname = pathname + doc.title;
+            // if (doc === this.mainDoc) {
+            //     pathname = pathname;
+            // } else if (doc.type === "audio" || doc.type === "presentation") {
+            //     pathname = pathname;
+            // } else if (doc.type !== "collection") {
+            //     pathname = pathname;
+            // } else {
+            //     pathname = pathname + " > " + doc.title;
+            //     titleArray.push(doc.title);
+            //     docArray.push(doc);
+            // }
+            docArray.push(doc);
+        });
+        docArray.push(this._activeDoc);
+        // if (this._activeDoc.title === "mobile audio") {
+        //     pathname = this._activeDoc.title;
+        // } else if (this._activeDoc.title === "Presentation") {
+        //     pathname = this._activeDoc.title;
+        // } else if (this._activeDoc === this.mainDoc) {
+        //     pathname = pathname;
+        // } else {
+        //     pathname = pathname + " > " + this._activeDoc.title;
+        //     docArray.push(this._activeDoc);
+        //     titleArray.push(this._activeDoc.title);
+        // }
+
+        return docArray;
+    }
+
+    // Renders the graphical pathbar
+    renderPathbar = () => {
+        // if (this._homeMenu == false) {
+        let docArray = this.createPathname();
+        let items = docArray.map((doc: Doc, index: any) => {
+            if (index == 0) {
+                return (
+                    <div className="pathbarItem">
+                        <div className="pathbarText"
+                            key={index}
+                            onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                        </div>
+                    </div>);
+            } else if (doc === this._activeDoc) {
+                return (
+                    <div className="pathbarItem">
+                        <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
+                        <div className="pathbarText"
+                            style={{ backgroundColor: "rgb(119, 37, 37)" }}
+                            key={index}
+                            onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                        </div>
+                    </div>);
             } else {
-                pathname = pathname + " > " + doc.title;
+                return (
+                    <div className="pathbarItem">
+                        <FontAwesomeIcon className="pathIcon" icon="angle-right" size="lg" />
+                        <div className="pathbarText"
+                            key={index}
+                            onClick={() => this.handlePathClick(doc, index)}>{doc.title}
+                        </div>
+                    </div>);
             }
+
         });
-        if (this._activeDoc === this.mainDoc) {
-            pathname = pathname + this._activeDoc.title;
+        if (this._parents.length !== 0) {
+            return (<div className="pathbar">
+                <div className="scrollmenu">
+                    {items}
+                </div>
+                <div className="back" >
+                    <FontAwesomeIcon onClick={this.back} icon={"chevron-left"} color="white" size={"2x"} />
+                </div>
+                <div className="hidePath" />
+            </div>);
         } else {
-            pathname = pathname + " > " + this._activeDoc.title;
+            return (<div className="pathbar">
+                <div className="scrollmenu">
+                    {items}
+                </div>
+                <div className="hidePath" />
+            </div>);
         }
-        return pathname;
-    }
+        //     }
+        // } else {
 
-    @action
-    toggleSidebar = () => this.sidebarActive = !this.sidebarActive
+        //     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>
+        //     );
+        // }
 
-    openLibrary() {
-        this._activeDoc = this.mainDoc;
-        this.switchCurrentView(() => this.mainDoc);
-        this._child = this._library;
+        // }
+    }
+
+    handlePathClick = (doc: Doc, index: number) => {
+        if (doc === this._library) {
+            this._activeDoc = doc;
+            this._child = null;
+            this.switchCurrentView((userDoc: Doc) => doc);
+            this._parents.length = index;
+        } else if (doc === this._homeDoc) {
+            this.returnHome();
+        } else {
+            console.log(index);
+            this._activeDoc = doc;
+            this._child = doc;
+            this.switchCurrentView((userDoc: Doc) => doc);
+            this._parents.length = index;
+        }
     }
 
     renderDefaultContent = () => {
-        const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
-        const buttons = DocListCast(this._child ? this._child.data : workspaces.data).map((doc: Doc, index: any) => {
-            return (
-                <div
-                    className="item"
-                    key={index}
-                    onClick={() => this.handleClick(doc)}>{doc.title}
-                    <div className="type">{doc.type}</div>
-                    <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
-                </div>);
-        });
-        return (
-            <>
-                <div className="navbar">
-                    <div className={"header"}>{this.sidebarActive ? StrCast(this._activeDoc.title) : "Menu"}</div>
+        let menuButtons = DocListCast(this._homeDoc.data).map((doc: Doc, index: any) => {
+            if (doc.type !== "ink") {
+                return (
                     <div
-                        className={`toggle-btn ${this.sidebarActive ? "active" : ""}`}
-                        onClick={this.toggleSidebar}
-                    />
-                </div>
-                <div className="pathbar">
-                    <div className="pathname">{this.createPathname()}</div>
+                        className="item"
+                        key={index}
+                        onClick={() => doc.click}>{doc.title}
+                    </div>);
+            }
+        });
+
+        if (this._homeMenu === true) {
+            return (
+                <div>
+                    <div className="navbar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                        <div className="header" id="header">{this._homeDoc.title}</div>
+                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    {this.renderPathbar()}
+                    <div className="sidebar" id="sidebar">
+                        <div className="sidebarButtons">
+                            {menuButtons}
+                        </div>
+                    </div>
                 </div>
-                <div className={`sidebar ${this.sidebarActive ? "active" : ""}`}>
-                    <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
-                    {this._child ?
-                        <>
-                            <div className="back" onClick={this.back}>&#8592;</div>
-                            <div>{buttons}</div>
-                            <div className="item" key="home" onClick={this.returnHome}>Home</div>
-                        </> :
-                        <>
+            );
+        }
+        const workspaces = Cast(this.userDoc.myWorkspaces, Doc) as Doc;
+        let buttons = DocListCast(workspaces.data).map((doc: Doc, index: any) => {
+            if (doc.type !== "ink") {
+                return (
+                    <div
+                        className="item"
+                        key={index}
+                        onClick={() => this.handleClick(doc)}>{doc.title}
+                        <div className="type">{doc.type}</div>
+                        <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+                    </div>);
+            }
+        });
+
+        if (this._child) {
+            buttons = DocListCast(this._child.data).map((doc: Doc, index: any) => {
+                if (doc.type !== "ink") {
+                    return (
+                        <div
+                            className="item"
+                            key={index}
+                            onClick={() => this.handleClick(doc)}>{doc.title}
+                            <div className="type">{doc.type}</div>
+                            <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
+                        </div>);
+                }
+            });
+        }
+
+        if (!this._child) {
+            return (
+                <div>
+                    <div className="navbar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                        <div className="header" id="header">{this._homeDoc.title}</div>
+                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    {this.renderPathbar()}
+                    <div className="sidebar" id="sidebar">
+                        <div className="sidebarButtons">
                             {buttons}
                             {/* <div className="item" key="library" onClick={this.openLibrary}>
                                 Library
-                                </div> */}
-                            <Uploader Document={workspaces} />
-                            <div className="item" key="audio" onClick={this.recordAudio}>Record Audio</div>
-                            <div className="item" key="presentation" onClick={this.openDefaultPresentation}>Presentation</div>
-                            <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>Settings</div>
-                        </>
-                    }
+                            </div> */}
+                            {/* <Uploader Document={workspaces} />
+                            <div className="item" key="audio" onClick={this.recordAudio}>
+                                Record Audio
+                            </div>
+                            <div className="item" key="presentation" onClick={this.openDefaultPresentation}>
+                                Presentation
+                            </div> */}
+                            {/* <div className="item" key="settings" onClick={() => SettingsManager.Instance.open()}>
+                                Settings
+                            </div> */}
+                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
+                                Ink On
+                            </div>
+                        </div>
+                    </div>
+                    {/* <div>
+                        {this.renderView}
+                    </div> */}
                 </div>
-                {this._child ? null : <div>{this.renderView}</div>}
-            </>
-        );
+            );
+        }
+        else {
+            return (
+                <div>
+                    <div className="navbar">
+                        <FontAwesomeIcon className="home" icon="home" onClick={this.returnHome} />
+                        <div className="header" id="header">library</div>
+                        <div className="toggle-btn" id="menuButton" onClick={this.toggleSidebar}>
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                    {this.renderPathbar()}
+                    <div className="sidebar" id="sidebar">
+                        <div className="sidebarButtons">
+                            {buttons}
+                            <div className="item" key="ink" id="ink" onClick={() => this.onSwitchInking()}>
+                                Ink On
+                            </div>
+                            <div className="item" key="home" onClick={this.returnMain}>
+                                Home
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            );
+        }
     }
 
-    pinToPresentation = () => {
-        // Only making button available if it is an image
+    uploadAudioButton = () => {
+        if (this._activeDoc.type === "audio") {
+            return <div className="docButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+                style={{ backgroundColor: "black", color: "white" }}
+                onClick={this.uploadAudio}
+            >
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="upload"
+                />
+            </div>;
+        }
+    }
+
+    toggleSelector = () => {
+        console.log("toggle selector!");
+        let toolbar = document.getElementById("toolbar") as HTMLElement;
+        toolbar.classList.toggle('active');
+    }
+
+    colorTool = () => {
+        if (this._activeDoc._viewType === "docking") {
+            const color = InkingControl.Instance.selectedColor;
+            console.log(color);
+            return (
+                <div
+                    className="docButton"
+                    style={{ backgroundColor: color }}
+                    onClick={this.toggleSelector}
+                >
+                    <div className="toolbar" id="toolbar">
+                        <div className="colorSelector">
+                            <div className="colorButton"
+                                style={{ backgroundColor: "red" }}
+                                onClick={() => {
+                                    InkingControl.Instance.updateSelectedColor("rgb(255,0,0)");
+                                    Doc.UserDoc().inkColor = "rgb(255,0,0)";
+                                    console.log(InkingControl.Instance.selectedColor);
+                                }}>
+                            </div>
+                            <div className="colorButton"
+                                style={{ backgroundColor: "green" }}
+                                onClick={e => {
+                                    InkingControl.Instance.updateSelectedColor("rgb(0,128,0)");
+                                    Doc.UserDoc().inkColor = "rgb(0,128,0)";
+                                    console.log(InkingControl.Instance.selectedColor);
+                                }}>
+                            </div>
+                            <div className="colorButton"
+                                style={{ backgroundColor: "blue" }}
+                                onClick={e => {
+                                    InkingControl.Instance.updateSelectedColor("rgb(0,0,255)");
+                                    Doc.UserDoc().inkColor = "rgb(0,0,255)";
+                                    console.log(InkingControl.Instance.selectedColor);
+                                }}>
+                            </div>
+                        </div>
+                        <div className="widthSelector">
+                            <input type="range" min="1" max="100" defaultValue="2" id="myRange" onChange={(e: React.ChangeEvent<HTMLInputElement>) => InkingControl.Instance.switchWidth(e.target.value)} />
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+    }
+
+    onSwitchInking = () => {
+        const button = document.getElementById("inkButton") as HTMLElement;
+        const color = InkingControl.Instance.selectedColor;
+        button.style.backgroundColor = this._ink ? "white" : color;
+        button.style.color = this._ink ? "black" : "white";
+
+        if (!this._ink) {
+            console.log("INK IS ACTIVE");
+            InkingControl.Instance.switchTool(InkTool.Pen);
+            MobileInterface.Instance.drawingInk = true;
+            this._ink = true;
+        } else {
+            console.log("INK IS INACTIVE");
+            InkingControl.Instance.switchTool(InkTool.None);
+            MobileInterface.Instance.drawingInk = false;
+            this._ink = false;
+        }
+    }
+
+    drawInk = () => {
+        if (this._activeDoc._viewType === "docking") {
+            const inkIsOn = this._ink;
+            return <div className="docButton"
+                id="inkButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Pen on" : "Pen off"}
+                onClick={this.onSwitchInking}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="pen-nib"
+                />
+            </div>;
+        }
+    }
+
+    downloadDocument = () => {
         if (this._activeDoc.type === "image") {
-            const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
-            return <div className="pinButton"
-                title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
-                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+            const url = this._activeDoc["data-path"]?.toString();
+            return <div className="docButton"
+                title={"Download Image"}
+                style={{ backgroundColor: "white", color: "black" }}
                 onClick={e => {
-                    if (isPinned) {
-                        DockedFrameRenderer.UnpinDoc(this._activeDoc);
-                    }
-                    else {
-                        DockedFrameRenderer.PinDoc(this._activeDoc);
-                    }
+                    window.open(url);
+                    console.log(url);
                 }}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="download"
                 />
             </div>;
         }
     }
 
     recordAudio = async () => {
-        // upload to server with known URL 
-        this._parents.push(this._activeDoc);
+        // upload to server with known URL
+        if (this._activeDoc.title !== "mobile audio") {
+            this._parents.push(this._activeDoc);
+        }
         const audioDoc = Cast(Docs.Create.AudioDocument(nullAudio, { _width: 200, _height: 100, title: "mobile audio" }), Doc) as Doc;
+        console.log(audioDoc);
         if (audioDoc) {
             console.log("audioClicked: " + audioDoc.title);
             this._activeDoc = audioDoc;
             this.switchCurrentView((userDoc: Doc) => audioDoc);
-            this.toggleSidebar();
-        }
-        const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
-        if (audioRightSidebar) {
-            console.log(audioRightSidebar.title);
-            const data = Cast(audioRightSidebar.data, listSpec(Doc));
-            if (data) {
-                data.push(audioDoc);
-            }
+            this._homeMenu = false;
+            // this.toggleSidebar();
         }
+        // const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        // this.audioState = await audioDoc.getProto;
+        // if (this.audioState) {
+        //     console.log(this.audioState);
+        //     const data = Cast(audioRightSidebar.data, listSpec(Doc));
+        //     if (data) {
+        //         data.push(audioDoc);
+        //     }
+        // }
     }
 
-    openDefaultPresentation = () => {
-        this._parents.push(this._activeDoc);
-        const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
-
-        if (presentation) {
-            console.log("presentation clicked: " + presentation.title);
-            this._activeDoc = presentation;
-            this.switchCurrentView((userDoc: Doc) => presentation);
-            this.toggleSidebar();
+    uploadAudio = () => {
+        const audioRightSidebar = Cast(Doc.UserDoc().rightSidebarCollection, Doc) as Doc;
+        const audioDoc = this._activeDoc;
+        const data = Cast(audioRightSidebar.data, listSpec(Doc));
+        console.log(audioDoc.proto);
+        if (data) {
+            data.push(audioDoc);
         }
+        // this.recordAudio();
     }
 
-    // mobileHome = () => {
-    //     return (
-    //         <div className="homeContainer">
-    //             <div className="uploadButton">
-
-    //             </div>
-    //             <div className="presentationButton">
-
-    //             </div>
-    //             <div className="recordAudioButton">
-
-    //             </div>
-    //             <div className="inkButton">
-
-    //             </div>
-    //             <div className="settingsButton">
-
-    //             </div>
-    //         </div>
-    //     );
+    // renderActiveCollection = (userDoc: Doc) => {
+    //     if (this.activeContainer) {
+    //         const active = Cast(this.activeContainer.data, listSpec(Doc));
+    //         if (active) {
+    //             return (
+    //                 <div className="mobileInterface-background">HELLO!</div>
+    //             );
+    //         }
+    //     }
     // }
 
-    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);
         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
@@ -445,6 +1833,44 @@ export class MobileInterface extends React.Component {
         }
     }
 
+    pinToPresentation = () => {
+        // Only making button available if it is an image
+        if (this._activeDoc.type === "image") {
+            const isPinned = this._activeDoc && Doc.isDocPinned(this._activeDoc);
+            return <div className="docButton"
+                title={Doc.isDocPinned(this._activeDoc) ? "Unpin from presentation" : "Pin to presentation"}
+                style={{ backgroundColor: isPinned ? "black" : "white", color: isPinned ? "white" : "black" }}
+                onClick={e => {
+                    if (isPinned) {
+                        DockedFrameRenderer.UnpinDoc(this._activeDoc);
+                    }
+                    else {
+                        DockedFrameRenderer.PinDoc(this._activeDoc);
+                    }
+                }}>
+                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin"
+                />
+            </div>;
+        }
+    }
+
+    setupDefaultPresentation = () => {
+        if (this._activeDoc.title !== "Presentation") {
+            this._parents.push(this._activeDoc);
+        }
+
+        const presentation = Cast(Doc.UserDoc().activePresentation, Doc) as Doc;
+
+        if (presentation) {
+            console.log(this._activeDoc.mobile);
+            console.log("presentation clicked: " + presentation.title);
+            this._activeDoc = presentation;
+            this.switchCurrentView((userDoc: Doc) => presentation);
+            this._homeMenu = false;
+            // this.toggleSidebar();
+        }
+    }
+
     onDragOver = (e: React.DragEvent) => {
         e.preventDefault();
         e.stopPropagation();
@@ -453,7 +1879,7 @@ export class MobileInterface extends React.Component {
     render() {
         // const content = this.currentView === "main" ? this.mainContent :
         //     this.currentView === "ink" ? this.inkContent :
-        //         this.currentView === "upload" ? this.uploadContent : <></>;
+        //         this.currentView === "upload" ? this.uploadContent : <></>;onDragOver={this.onDragOver}
         return (
             <div className="mobileInterface-container" onDragOver={this.onDragOver}>
                 {/* <DocumentDecorations />
@@ -462,16 +1888,28 @@ export class MobileInterface extends React.Component {
                 </GestureOverlay> */}
                 {/* <GestureOverlay> */}
                 <SettingsManager />
-                {this.displayWorkspaces()}
-                {this.pinToPresentation()}
+                {/* {this.menuOptions()} */}
+                {/* {this.displayHome()} */}
+                <div className="docButtonContainer">
+                    {this.pinToPresentation()}
+                    {this.downloadDocument()}
+                    {this.drawInk()}
+                    {this.uploadAudioButton()}
+                    {this.colorTool()}
+                </div>
+                <GestureOverlay>
+                    {this.displayWorkspaces()}
+                    {this.renderDefaultContent()}
+                </GestureOverlay>
+
                 {/* </GestureOverlay> */}
                 {/* <DictationOverlay />
                 <SharingManager />
                 <GoogleAuthenticationManager /> */}
                 {/* <DocumentDecorations /> */}
-                <div>
+                {/* <div>
                     {this.renderDefaultContent()}
-                </div>
+                </div> */}
                 {/* <PreviewCursor /> */}
                 {/* <ContextMenu /> */}
                 {/* <RadialMenu />
@@ -485,6 +1923,13 @@ export class MobileInterface extends React.Component {
 }
 
 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(); });
+Scripting.addGlobal(function openMobileAudio() { return MobileInterface.Instance.recordAudio(); });
+Scripting.addGlobal(function openMobileSettings() { return SettingsManager.Instance.open(); });
+Scripting.addGlobal(function switchToLibrary() { return MobileInterface.Instance.switchToLibrary(); });
+
+
 // WAS 2
 
 // 1
@@ -527,15 +1972,7 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render
 //     }
 // }
 
-// 2
-// Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
-// Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
-// Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
-// Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
-    // Scripting.addGlobal(function addWebToMobileUpload() { return MobileInterface.Instance.addWebToCollection(); });
-
-
-// 3   
+// 3
     // renderInkingContent = () => {
         //     console.log("rendering inking content");
         //     // TODO: support panning and zooming
@@ -583,4 +2020,4 @@ Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, render
         //             </div>
         //         );
         //     }
-        // }
+        // }
\ No newline at end of file
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 250340e36..f600ff637 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -83,15 +83,17 @@ body {
 
 .sidebar {
     position: absolute;
-    top: 200px;
+    top: 120px;
     opacity: 0;
     right: -100%;
     width: 100%;
-    height: calc(100% - (200px));
-    z-index: 5;
+    height: calc(100% - (120px));
+    z-index: 101;
     background-color: whitesmoke;
     transition: all 400ms ease 50ms;
     padding: 20px;
+    // overflow-y: auto;
+    // -webkit-overflow-scrolling: touch;
     // border-right: 5px solid black;
 }
 
@@ -106,14 +108,23 @@ body {
     font-size: 35px;
     text-transform: uppercase;
     color: black;
+    
 }
 
-.sidebar .home {
+.sidebar .ink:focus {
+    outline: 1px solid blue;
+}
+
+.sidebarButtons {
+    top: 80px;
+    position: relative;
+}
+
+.home {
     position: absolute;
-    top: -135px;
-    right: calc(50% + 80px);
-    transform: translate(0%, -50%);
-    font-size: 40;
+    top: 30px;
+    left: 30px;
+    font-size: 60;
     user-select: none;
     text-transform: uppercase;
     font-family: Arial, Helvetica, sans-serif;
@@ -173,23 +184,26 @@ body {
 
 .back {
     position: absolute;
-    top: -140px;
-    left: 50px;
-    transform: translate(0%, -50%);
-    color: black;
-    font-size: 60;
+    top: 44%;
+    left: 42px;
+    background-color: black;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    border-radius: 10px;
+    transform: translate(0, -50%);
+    font-size: 25px;
     user-select: none;
-    text-transform: uppercase;
     z-index: 100;
-    font-family: Arial, Helvetica, sans-serif;
 }
 
 
 .pathbar {
     position: absolute;
     top: 118px;
+    left: 0px;
     background: #1a1a1a;
-    z-index: 20;
+    z-index: 120;
     border-radius: 0px;
     width: 100%;
     height: 80px;
@@ -200,8 +214,8 @@ body {
     position: relative;
     font-size: 25;
     top: 50%;
-    width: 90%;
-    left: 3%;
+    width: 86%;
+    left: 12%;
     color: whitesmoke;
     transform: translate(0%, -50%);
     z-index: 20;
@@ -214,27 +228,71 @@ body {
     text-transform: uppercase;
 }
 
-.homeContainer {
-    position: relative;
-    top: 200px;
-    height: calc(100% - 250px);
-    width: 90%;
-    overflow: scroll;
-    left: 5%;
-    background-color: lightpink;
-}
-
-.pinButton {
+.docButton {
     position: relative;
     width: 100px;
     height: 100px;
     font-size: 90px;
     text-align: center;
-    left: 50%;
-    transform: translate(-50%, 0);
     border-style: solid;
     border-radius: 50px;
     border-width: medium;
-    background-color: pink;
+    margin: 10px;
     z-index: 100;
+}
+
+.docButtonContainer {
+    top: 90%;
+    position: absolute;
+    display: flex;
+    transform: translate(-50%, 0);
+    left: 50%;
+    z-index: 100;
+}
+
+.scrollmenu {
+    overflow: auto;
+    white-space: nowrap;
+}
+
+.pathbarItem {
+    position: relative;
+    display: inline-flex;
+    color: whitesmoke;
+    text-align: center;
+    transform: translate(100px, 0px);
+    font-size: 30px;
+    padding: 10px;
+    text-transform: uppercase;
+}
+
+.pathbarText {
+    font-family: sans-serif;
+    text-align: center;
+    height: 50px;
+    padding: 10px;
+    background-color: rgb(48, 40, 40);
+    font-size: 30px;
+    border-radius: 10px;
+    text-transform: uppercase;
+    margin-left: 20px;
+    position: relative;
+}
+
+
+.pathIcon {
+    transform: translate(0px, 8px);
+    position: relative;
+}
+
+.hidePath {
+    position: absolute;
+    height: 100%;
+    width: 200px;
+    left: 0px;
+    top: 0px;
+    background-image: linear-gradient(to right, #1a1a1a, rgba(255, 0, 0, 0));
+    text-align: center;
+    user-select: none;
+    z-index: 99;
 }
\ No newline at end of file
diff --git a/src/mobile/SideBar.scss b/src/mobile/SideBar.scss
deleted file mode 100644
index fb6d13a2b..000000000
--- a/src/mobile/SideBar.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-* {
-    margin:0px;
-    padding:0px;
-    box-sizing:border-box;
-    font-family:"Open Sans";
-}
-body {
-    overflow:hidden;
-}
-.navbar {
-    position:fixed;
-    top:0px;
-    left:0px;
-    width:100vw;
-    height:50px;
-    background:rgba(0,0,0,0.95);
-}
-.navbar .toggle-btn {
-    position:absolute;
-    right:20px;
-    height:50px;
-    width:50px;
-    transition:all 300ms ease-in-out 200ms;
-}
-.navbar .toggle-btn span {
-    position:absolute;
-    top:50%;
-    left:50%;
-    transform:translate(-50%,-50%);
-    width:70%;
-    height:4px;
-    background:#eee;
-    transition:all 200ms ease;
-}
-.navbar .toggle-btn span:nth-child(1) {
-    transition:top 200ms ease-in-out;
-    top:30%;
-}
-.navbar .toggle-btn span:nth-child(3) {
-    transition:top 200ms ease-in-out;
-    top:70%;
-}
-.navbar .toggle-btn.active {
-    transition:transform 200ms ease-in-out 200ms;
-    transform:rotate(135deg);
-}
-.navbar .toggle-btn.active span:nth-child(1) {
-    top:50%;
-}
-.navbar .toggle-btn.active span:nth-child(2) {
-    transform:translate(-50%,-50%) rotate(90deg);
-}
-.navbar .toggle-btn.active span:nth-child(3) {
-    top:50%;
-}
-.sidebar {
-    position:absolute;
-    top:50px;
-    opacity:0;
-    right:-100%;
-    width:100vw;
-    height:calc(100vh - 45px);
-    z-index:5;
-    background:rgba(40,40,40,1);
-    transition:all 400ms ease 50ms;
-    padding:15px;
-}
-.sidebar .item {
-    width:100%;
-    padding:13px 6px;
-    border-bottom:1px solid rgba(200,200,200,0.7);
-    font-size:18px;
-    text-transform:uppercase;
-    color:rgba(250,250,250,0.95);
-}
-.sidebar.active {
-    right:0%;
-    opacity:1;
-}
\ No newline at end of file
diff --git a/src/mobile/SideBar.tsx b/src/mobile/SideBar.tsx
deleted file mode 100644
index a06069ed8..000000000
--- a/src/mobile/SideBar.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import "./SideBar.scss";
-import { computed } from "mobx";
-import { DocumentView } from '../client/views/nodes/DocumentView';
-
-@observer
-export class SideBar extends React.Component<{ views: (DocumentView | undefined)[], stack?: any }, {}>{
-
-    constructor(props: { views: (DocumentView | undefined)[] }) {
-        super(props);
-    }
-
-    @computed
-    onClick() {
-        document.getElementsByClassName('sidebar')
-        [0].classList.toggle('active');
-    }
-
-    render() {
-        return (
-            <>
-                <div className="navbar">
-                    <div className="toggle-btn" onClick={this.onClick}>
-                        <span></span>
-                        <span></span>
-                        <span></span>
-                    </div>
-                </div>
-                <div className="sidebar">
-                    <div className="item">Workspace1</div>
-                    <div className="item">Workspace2</div>
-                    <div className="item">Workspace3</div>
-                </div>
-            </>
-        );
-    }
-
-}
\ No newline at end of file
diff --git a/src/mobile/WorkSpaceButton.scss b/src/mobile/WorkSpaceButton.scss
deleted file mode 100644
index e69de29bb..000000000
--- a/src/mobile/WorkSpaceButton.scss
+++ /dev/null
diff --git a/src/mobile/WorkSpaceButton.tsx b/src/mobile/WorkSpaceButton.tsx
deleted file mode 100644
index 70c3e6edc..000000000
--- a/src/mobile/WorkSpaceButton.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React = require('react');
-import { observer } from "mobx-react";
-import { observable } from 'mobx';
-
-interface IProps {
-    open: boolean;
-}
-
-@observer
-export class MenuButton extends React.Component<IProps> {
-    @observable static Instance: MenuButton;
-
-
-}
\ No newline at end of file