get the right panel kind of working

3DStreet · Nov 7, 2024 · 43953fa · 43953fa
1 parent 9f4d899
commit 43953fa
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/editor/components/components/Sidebar.js b/src/editor/components/components/Sidebar.js
@@ -70,7 +70,8 @@ export default class Sidebar extends React.Component {
     const visible = this.props.visible;
     const className = classnames({
       outliner: true,
-      hide: this.state.rightBarHide
+      hide: this.state.rightBarHide,
+      'mt-16': true
     });
     if (entity && visible) {
       const entityName = entity.getDOMAttribute('data-layer-name');
@@ -82,7 +83,7 @@ export default class Sidebar extends React.Component {
         <div className={className} tabIndex="0">
           {this.state.rightBarHide ? (
             <>
-              <div onClick={this.toggleRightBar}>
+              <div id="layers-title" onClick={this.toggleRightBar}>
                 <div className={'layersBlock'}>
                   <LayersIcon />
                   <span>{entityName || formattedMixin}</span>
@@ -118,30 +119,34 @@ export default class Sidebar extends React.Component {
             </>
           ) : (
             <>
-              <li onClick={this.toggleRightBar}>
-                <a className="camera" href="#">
-                  <span className="title" title={entityName || formattedMixin}>
+              <div
+                onClick={this.toggleRightBar}
+                className="relative flex items-center justify-end"
+              >
+                <div className="group flex items-center cursor-pointer relative p-2">
+                  <span className="absolute right-12 opacity-0 group-hover:opacity-100 transition-all duration-300 text-white whitespace-nowrap bg-gray-800 px-2 py-1 rounded">
                     {entityName || formattedMixin}
                   </span>
-                  <div className="icon">
+                  <div className="relative z-10">
                     <svg
                       width="24"
                       height="28"
                       viewBox="0 0 24 28"
                       fill="none"
                       xmlns="http://www.w3.org/2000/svg"
+                      className="text-white"
                     >
                       <path
                         d="M1.3335 8.66667L12.0002 2L22.6668 8.66667V19.3333L12.0002 26L1.3335 19.3333V8.66667L12.0002 14.5333V26V14.5333L22.6668 8.66667"
-                        stroke="white"
+                        stroke="currentColor"
                         strokeWidth="2.5"
                         strokeLinecap="round"
                         strokeLinejoin="round"
                       />
                     </svg>
                   </div>
-                </a>
-              </li>
+                </div>
+              </div>
             </>
           )}
           {/* <div id="layers-title" onClick={this.toggleRightBar}> */}

diff --git a/src/editor/components/scenegraph/SceneGraph.js b/src/editor/components/scenegraph/SceneGraph.js
@@ -335,7 +335,8 @@ export default class SceneGraph extends React.Component {
     // Outliner class names.
     const className = classNames({
       outliner: true,
-      hide: this.state.leftBarHide
+      hide: this.state.leftBarHide,
+      'mt-16': true
     });
 
     return (