From 97985de8278da12e5576a2511437a7a5981b731c Mon Sep 17 00:00:00 2001 From: D3visionNL Date: Fri, 25 Nov 2022 18:56:01 +0100 Subject: [PATCH] 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 | 13 ++++-- src/css/components/Sidebar.css | 77 +++++++++++++++++++++++++++++++--- src/css/index.css | 6 +-- src/css/pages/Users.css | 5 ++- src/pages/Users.js | 14 ++++--- 5 files changed, 97 insertions(+), 18 deletions(-) diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index e377039..1834a1e 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -10,6 +10,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 {label}; + return {label}; }); elements.push(
- {label} -
+ {label}{subElements && } + {subElements &&
{subElements} -
+
}
); } diff --git a/src/css/components/Sidebar.css b/src/css/components/Sidebar.css index dd9258e..d1d9cd7 100644 --- a/src/css/components/Sidebar.css +++ b/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; - padding: 10px 0px 10px 35px; + margin: 0px 0px 0px -20px; + 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; } \ No newline at end of file diff --git a/src/css/index.css b/src/css/index.css index 8da4635..1c82b2a 100644 --- a/src/css/index.css +++ b/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; - left: -43px; + top: -40px; } .tooltip .tooltiptext::before{ diff --git a/src/css/pages/Users.css b/src/css/pages/Users.css index 06883cf..e3fba41 100644 --- a/src/css/pages/Users.css +++ b/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; diff --git a/src/pages/Users.js b/src/pages/Users.js index 38bccb4..5f1cfab 100644 --- a/src/pages/Users.js +++ b/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 text = registerCode.current.innerText; - navigator.clipboard.writeText(text); + const copyToClipboard = (event) => { + const {parentElement} = event.target; + navigator.clipboard.writeText(event.target.innerText); + parentElement.childNodes[parentElement.childNodes.length-1].style.visibility = "visible"; + }; + + const closeToolTip = (event) => { + event.target.style.visibility = "hidden"; }; return

One-Click Sign-Up

{link ? -

{link}

: +

{link}

Code copied!
: }

Create User