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
This commit is contained in:
parent
93b83efeb7
commit
97985de827
@ -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>
|
||||
<div>
|
||||
<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>
|
||||
{subElements && <div className='sidebar-menu-child-wrapper'>
|
||||
{subElements}
|
||||
</div>
|
||||
</div>}
|
||||
</div>);
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
@ -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{
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 <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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user