End my suffering

- Completely redid the sidebar, it now supports dropdowns
- Changed the One-Click Sign-Up copy behavior cause mister Navy didn't like it

src/components/Sidebar.js

@@ -11,6 +11,11 @@ const Sidebar = ({children}) => {
 
 };
 
+const expandMenu = (event) => {
+    event.preventDefault();
+    event.target.parentElement.classList.toggle("open");
+};
+ 
 // Nav menu
 const SidebarMenu = ({menuItems = [], children}) => {
 
@@ -20,13 +25,13 @@ const SidebarMenu = ({menuItems = [], children}) => {
         let subElements = null;
         if (subItems.length) subElements = subItems.map(({ label, to, relative }) => {
             if(relative) to = `${menuItem.to}${to}`;
-            return <NavLink className='sidebar-menu-child-item' activeClassName='active' to={to} key={label}>{label}</NavLink>;
+            return <NavLink className='sidebar-menu-item sidebar-menu-child-item' activeClassName='active' to={to} key={label}>{label}</NavLink>;
         });
         elements.push(<div key={label} className='parent-menu'>
-            <NavLink className='sidebar-menu-item' activeClassName='active' {...rest} key={label}>{label}</NavLink>
+            <NavLink className={`sidebar-menu-item ${subElements?.length ? 'has-children' : ''}`} activeClassName='active' {...rest} key={label}>{label}{subElements && <i className="sidebar-menu-item-carrot" onClick={expandMenu}></i>}</NavLink>
-            <div>
+            {subElements && <div className='sidebar-menu-child-wrapper'>
                 {subElements}
-            </div>
+            </div>}
         </div>);
     }
 

src/css/components/Sidebar.css

@@ -2,21 +2,72 @@
     height: 100%;
     position: fixed;
     width: 230px;
+    padding: 1rem 0;
 }
 
 .sidebar-menu {
     display: flex;
     flex-direction: column;
 }
+.parent-menu{
+    display: flex;
+    flex-direction: column;
+}
 
 .sidebar-logo{
-    margin: 1rem;
+    margin: auto;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
     max-width: 170px;
 }
 
+.sidebar-menu-item-carrot{
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath fill='%23f5f5f5' d='M441.751,475.584L222.166,256L441.75,36.416c6.101-6.101,7.936-15.275,4.629-23.253C443.094,5.184,435.286,0,426.667,0 H320.001c-5.675,0-11.093,2.24-15.083,6.251L70.251,240.917c-8.341,8.341-8.341,21.824,0,30.165l234.667,234.667 c3.989,4.011,9.408,6.251,15.083,6.251h106.667c8.619,0,16.427-5.184,19.712-13.163 C449.687,490.858,447.852,481.685,441.751,475.584z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
+    width: 30px;
+    height: 30px;
+    margin-right: 8px;
+    transition: transform ease-in-out 0.25s;
+    background-size: 10px;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.sidebar-menu-item.has-children.open .sidebar-menu-item-carrot{
+    transform: rotate(-90deg);
+    transition: transform ease-in-out 0.15s;
+}
+.sidebar-menu-item.has-children.active .sidebar-menu-item-carrot{
+    margin-right: 5px;
+}
+.sidebar-menu-item.has-children.open + .sidebar-menu-child-wrapper{
+    height: 100%; 
+    opacity: 1; 
+    transition: max-height 0.5s ease-in-out, opacity 0.25s ease-in-out;
+    max-height: 600px;
+}
+.sidebar-menu-item.sidebar-menu-item.has-children{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.sidebar-menu-child-wrapper{
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-color);
+    padding-left: 35px;
+    z-index: -1;
+    z-index: 0;
+    overflow: hidden;
+    max-height: 0; 
+    opacity: 0;
+    transition: max-height 0.25s ease-in-out, opacity 0.25s ease-in-out;
+}
+.sidebar hr{
+    margin-left: 2rem;
+    margin-right: 2rem;
+}
 .sidebar-menu-item {
-    margin: 5px 0px 5px -20px;
+    margin: 0px 0px 0px -20px;
-    padding: 10px 0px 10px 35px;
+    padding: 14px 0px 14px calc(35px + 2rem);
     background-color: var(--dark-blue);
     color: var(--text-primary);
     border-radius: 6px;
@@ -24,15 +75,31 @@
     font-weight: bold;
     border-radius: 0;
     border-color: var(--color-primary);
-    width: calc(100% + 40px);
+    width: auto;
+    z-index: 1;
 }
 .sidebar-menu-item.active {
     border-right: solid 3px var(--color-primary);
     border-radius: 0;
     box-shadow: 0px 0px 12px #00000070;
-    transition: ease-in-out 0.05s;
+    /* transition: ease-in-out 0.05s; */
     font-size: 1.61rem;
+    color: #C4C4C4;
+}
+.sidebar-menu-child-item.active {
+    border-right: solid 3px var(--color-primary);
+    border-radius: 0;
+    /* transition: ease-in-out 0.05s; */
+    font-size: 1.61rem;
+    box-shadow: none;
+    color: #C4C4C4;
 }
 .active {
     background-color: var(--light-blue);
 }
+.sidebar-menu-child-item{
+    z-index: unset;
+    padding-left: 35px !important;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}

src/css/index.css

@@ -606,16 +606,16 @@ tbody tr:hover {
   visibility: hidden;
   width: 120px;
   background-color: black;
-  color: #fff;
+  color: #fff !important;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
+  opacity: 1 !important;
  
   /* Position the tooltip text - see examples below! */
   position: absolute;
   z-index: 1;
-  top: -35px;
+  top: -40px;
-  left: -43px;
 }
 
 .tooltip .tooltiptext::before{

src/css/pages/Users.css

@@ -66,7 +66,10 @@ li input {
     display: flex;
     align-items: center;
     align-content: center;
-    gap: 5px;
+    width: -moz-fit-content;
+    width: fit-content;
+    justify-content: center;
+    cursor: pointer;
 }
 .registerCodeWrapper p{
     margin-bottom: 0;

src/pages/Users.js

@@ -164,7 +164,6 @@ const User = ({ user }) => {
 const CreateUserField = () => {
 
     const [link, setLink] = useState(null);
-    const registerCode = useRef();
     const getSignupCode = async () => {
         const response = await get('/api/register/code');
         if (response.status === 200) {
@@ -173,15 +172,20 @@ const CreateUserField = () => {
         }
     };
 
-    const copyToClipboard = () => {
+    const copyToClipboard = (event) => {
-        const text = registerCode.current.innerText;
+        const {parentElement} = event.target;
-        navigator.clipboard.writeText(text);
+        navigator.clipboard.writeText(event.target.innerText);
+        parentElement.childNodes[parentElement.childNodes.length-1].style.visibility = "visible";
+    };
+
+    const closeToolTip = (event) => {
+        event.target.style.visibility = "hidden";
     };
 
     return <div>
         <h4>One-Click Sign-Up</h4>
         {link ?
-            <div className="registerCodeWrapper"><p ref={registerCode}>{link}</p><button className="button iconButton tooltip" onClick={copyToClipboard}><img src="https://www.svgrepo.com/show/256783/copy.svg"></img><span className="tooltiptext">Code copied!</span></button></div> :
+            <div className="registerCodeWrapper tooltip"><p onClick={copyToClipboard}>{link}</p><span onClick={closeToolTip} className="tooltiptext">Code copied!</span></div> :
             <button onClick={getSignupCode} className="button primary is-center">Create sign-up link</button>}
         <hr/>
         <h4>Create User</h4>