navbar and support button

src/App.tsx

@@ -9,6 +9,7 @@ import Navbar from "./components/navbar/Navbar";
 import {FakeStateProps} from "./joiner/types";
 import Dashboard from "./pages/Dashboard";
 import Editor from "./pages/Editor";
+import Helper from "./components/helper/Helper";
 
 function App(props: AllProps) {
     const debug = props.debug;
@@ -19,6 +20,7 @@ function App(props: AllProps) {
                 onClick={e => statehistory.globalcanundostate = true}>
         {isLoading && <Loader />}
         <Navbar />
+        <Helper />
         {user.project ? <Editor /> : <Dashboard />}
     </div>);
 

src/components/helper/Helper.tsx

@@ -0,0 +1,23 @@
+import './style.scss'
+import React from "react";
+import {useStateIfMounted} from "use-state-if-mounted";
+
+interface Props {}
+function Helper(props: Props) {
+    const [flag, setFlag] = useStateIfMounted(false);
+
+    return(<section className={'helper'} >
+        {flag && <div className={'helper-menu border'}>
+            <div tabIndex={-1} onClick={e => alert('ok1')} className={'helper-item'}>Test 1</div>
+            <div tabIndex={-1} onClick={e => alert('ok2')} className={'helper-item'}>Test 2</div>
+            <hr />
+            <div tabIndex={-1} onClick={e => setFlag(false)} className={'text-danger helper-item'}>Close</div>
+        </div>}
+        <div tabIndex={-1} onClick={e => setFlag(!flag)}
+             className={'helper-icon bg-dark circle border d-flex justify-content-center align-items-center'}>
+            <label style={{cursor: 'pointer'}} className={'text-white'}>?</label>
+        </div>
+    </section>)
+}
+
+export default Helper;

src/components/helper/style.scss

@@ -0,0 +1,36 @@
+.helper {
+  position: absolute;
+  z-index: 999;
+  bottom: 0; right: 0;
+  margin: 1rem;
+}
+
+.helper-menu {
+  display: block;
+  background-color: white;
+  margin-bottom: 2rem;
+}
+
+.helper-item {
+  cursor: pointer;
+  display: block;
+  width: 100%;
+  clear: both;
+  font-weight: 400;
+  text-align: inherit;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+  padding: 0.25rem 3rem 0.25rem 1rem;
+}
+.helper-item:hover {
+  background-color: #F1F1F1;
+}
+
+.helper-icon {
+  cursor: pointer;
+  width: 1.5rem; height: 1.5rem;
+  position: absolute;
+  bottom: 0; right: 0;
+}

src/components/navbar/Navbar.tsx

@@ -1,5 +1,5 @@
 import './style.scss';
-import {Dispatch, ReactElement} from 'react';
+import React, {Dispatch, ReactElement} from 'react';
 import {connect} from 'react-redux';
 import {DState, DUser, LUser} from '../../joiner';
 import File from './tabs/File';
@@ -17,26 +17,53 @@ function NavbarComponent(props: AllProps) {
     return(<nav className={'navbar navbar-expand-lg'}>
         <ul className={'navbar-nav'}>
             {(project) ?
-                <>
-                    <File />
-                    <Edit />
-                    <Share />
-                </> :
-                <>
-
-                </>
+                <li className={'nav-item dropdown'}>
+                    <i tabIndex={-1} className={'fs-3 dropdown-toggle bi bi-list'} data-bs-toggle={'dropdown'} />
+                    <ul className={'dropdown-menu'}>
+                        <li tabIndex={-1} className={'dropdown-item'}>
+                            Test
+                        </li>
+                        <hr />
+                        <File />
+                        <Edit />
+                        <Share />
+                        <hr />
+                        <li tabIndex={-1} onClick={e => user.project = null} className={'text-danger dropdown-item'}>
+                            Close Project
+                        </li>
+                    </ul>
+                </li> :
+                <li className={'nav-item dropdown'}>
+                    <i tabIndex={-1} className={'fs-3 dropdown-toggle bi bi-list'} data-bs-toggle={'dropdown'} />
+                    <ul className={'dropdown-menu'}>
+                        <li tabIndex={-1} className={'dropdown-item'}>
+                            Test
+                        </li>
+                    </ul>
+                </li>
             }
-            {debug && <li className={'d-block ms-1 m-auto'}>
-                <img width={30} height={30} src={Debug} />
-            </li>}
         </ul>
         <ul className={'navbar-nav ms-auto'}>
-            <li className={'d-flex'}>
-                <b className={'my-auto me-5'}>{user.username}</b>
-                <img width={80} height={40} src={Logo} />
+            <li className={'nav-item dropdown'}>
+                <div tabIndex={-1} style={{cursor: 'pointer', width: '2rem', height: '2rem'}} data-bs-toggle={'dropdown'}
+                     className={'dropdown-toggle bg-primary circle border d-flex justify-content-center align-items-center'}>
+                    <label style={{cursor: 'pointer'}} className={'text-white'}>A</label>
+                </div>
+                <ul className={'dropdown-menu'}>
+                    <li tabIndex={-1} className={'dropdown-item'}>
+                        Test
+                    </li>
+                </ul>
+            </li>
+            <li className={'nav-item'}>
+                <button style={{backgroundColor: '#9746fd', fontSize: '0.85rem'}} className={'text-white btn p-1'}>
+                    Share
+                </button>
             </li>
+            {debug && <li className={'nav-item'}>
+                <img alt={'debug'} width={25} height={25} src={Debug} />
+            </li>}
         </ul>
-
     </nav>);
 
 }

src/components/navbar/style.scss

@@ -4,17 +4,18 @@
 }
 
 .nav-item {
-  padding: 0.25rem 0.75rem;
+  padding: 0 0.75rem;
   border-radius: 3px;
   font-size: 0.9rem;
   cursor: pointer;
   margin: auto;
 }
 .nav-item:hover, .nav-item:focus-within {
-  color: #ED474A;
+  color: black;
 }
 
 .dropdown-item {
+  display: flex;
   font-size: 0.8rem;
   cursor: pointer;
 }
@@ -28,19 +29,20 @@
 .nav-item .submenu {
   display: none;
   position: absolute;
-  left:100%; top:-7px;
+  left: 100%; top: 0;
 }
 .nav-item .submenu-left {
-  right:100%; left:auto;
+  right: 100%; left: auto;
 }
 .dropdown-menu > li:hover {
   background-color: #F1F1F1
 }
-.dropdown-menu > li:hover > .submenu{
+.dropdown-menu > li:hover > .submenu {
   display: block;
 }
 
 .dropdown-menu {
+  padding: 0;
   border-radius: 0;
 }
 

src/components/navbar/tabs/Edit.tsx

@@ -15,9 +15,9 @@ function EditComponent(props: AllProps) {
         RedoAction.new(index + 1);
     }
 
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>Edit</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>Edit
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             <li tabIndex={-1} onClick={e => doUndo(0)} className={'dropdown-item'}>Undo ({undo.length})</li>
             <li tabIndex={-1} onClick={e => doRedo(0)} className={'dropdown-item'}>Redo ({redo.length})</li>
         </ul>

src/components/navbar/tabs/File.tsx

@@ -58,15 +58,15 @@ function FileComponent(props: AllProps) {
     const exportLayout = () => {SaveManager.exportLayout_click(false)}
     const importLayout = () => {SaveManager.importLayout_click(false)}
 
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>File</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>File
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             <li tabIndex={-1} className={'dropdown-item'}>New
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={createM2} className={'dropdown-item'}>Metamodel</li>
                     {metamodels.length > 0 && <li tabIndex={-1} className={'dropdown-item'}>Model
-                        <i className={'ms-1 bi bi-arrow-right'}></i>
+                        <i className={'ms-auto bi bi-caret-right-fill'} />
                         <ul className={'submenu dropdown-menu'}>
                             {metamodels.map((metamodel, index) => {
                                 return(<li key={index} tabIndex={-1} onClick={e => createM1(metamodel)} className={'dropdown-item'}>
@@ -78,7 +78,7 @@ function FileComponent(props: AllProps) {
                 </ul>
             </li>
             {elements.length > 0 && <li tabIndex={-1} className={'dropdown-item'}>Open
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     {elements.map((m, index) => {
                         return(<li key={index} tabIndex={-1} onClick={e => open(m)} className={'dropdown-item'}>
@@ -90,22 +90,21 @@ function FileComponent(props: AllProps) {
             <li tabIndex={-1} onClick={save} className={'dropdown-item'}>Save</li>
             <li tabIndex={-1} onClick={load} className={'dropdown-item'}>Load</li>
             <li tabIndex={-1} className={'dropdown-item'}>Export
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={exportJson} className={'dropdown-item'}>JSON</li>
                     <li tabIndex={-1} onClick={exportXml} className={'dropdown-item'}>XML</li>
                     <li tabIndex={-1} onClick={exportLayout} className={'dropdown-item'}>Layout</li>
                 </ul>
             </li>
             <li tabIndex={-1} className={'dropdown-item'}>Import
-                <i className={'ms-1 bi bi-arrow-right'}></i>
+                <i className={'ms-auto bi bi-caret-right-fill'} />
                 <ul className={'submenu dropdown-menu'}>
                     <li tabIndex={-1} onClick={importJson} className={'dropdown-item'}>JSON</li>
                     <li tabIndex={-1} onClick={importXml} className={'dropdown-item'}>XML</li>
                     <li tabIndex={-1} onClick={importLayout} className={'dropdown-item'}>Layout</li>
                 </ul>
             </li>
-            <li tabIndex={-1} onClick={e => user.project = null} className={'text-danger dropdown-item'}>Close Project</li>
         </ul>
     </li>);
 }

src/components/navbar/tabs/Share.tsx

@@ -16,10 +16,9 @@ function ShareComponent(props: AllProps) {
     const quit = async() => {
         window.location.replace(root);
     }
-
-    return(<li className={'nav-item dropdown'}>
-        <div tabIndex={-1} className={'dropdown-toggle'} data-bs-toggle={'dropdown'}>Share</div>
-        <ul className={'dropdown-menu'}>
+    return(<li className={'dropdown-item'}>Share
+        <i className={'ms-auto bi bi-caret-right-fill'} />
+        <ul className={'submenu dropdown-menu'}>
             {!room && <li tabIndex={-1} onClick={create} className={'dropdown-item'}>Collaborative</li>}
             {room && <li tabIndex={-1} onClick={quit} className={'dropdown-item'}>Quit</li>}
         </ul>

src/pages/Editor.tsx

@@ -1,14 +1,15 @@
-import React, {Dispatch, ReactElement} from 'react';
+import {Dispatch, ReactElement} from 'react';
 import {connect} from 'react-redux';
 import {DState, DUser, LUser} from '../joiner';
 import {FakeStateProps} from '../joiner/types';
 import Dock from '../components/abstract/Dock';
 
+
 function EditorComponent(props: AllProps) {
     const user = props.user;
     const project = user.project;
 
-    return (<Dock />);
+    return(<Dock />);
 }
 interface OwnProps {}
 interface StateProps {user: LUser}