Friday, September 22, 2023
HomeCSScss - how you can repair a messy sidebar merchandise

css – how you can repair a messy sidebar merchandise


I’ve tried a number of occasions, akin to
justify content material begin, aligment merchandise begin
however nothing works

  return (
    <>
      <div
        className="bars"
        model={expanded ? { left: "60%" } : { left: "5%" }}
        onClick={() => setExpanded(!expanded)}
      >
        <UilBars />
      </div>
      <movement.div
        className="sidebar"
        variants={sidebarVariants}
        animate={window.innerWidth <= 768 ? `${expanded}` : ""}
      >
        <div className="emblem">
          <img src={Brand} alt="emblem" />
          <span model={{ colour: "white" }}>
            Hello Adm<span>I</span>n
          </span>
        </div>
        <div className="menu">
          {SidebarData.map((merchandise, index) => (
            <div key={index}>
              {merchandise.dropdown ? (
                <div className="menuItem">
                  <div
                    className={
                      chosen === index ? "menuItem lively" : "menuItem"
                    }
                    onClick={() => setSelected(index)}
                  >
                    <merchandise.icon />
                    <span>{merchandise.heading}</span>
                    <UilAngleDown />
                  </div>
                  <div className="dropdown">
                    {merchandise.dropdown.map((dropdownItem, dropdownIndex) => (
                      <Hyperlink
                        to={dropdownItem.path}
                        className="dropdownItem"
                        key={dropdownIndex}
                        onClick={() => setSelected(index)}
                      >
                        <span>{dropdownItem.heading}</span>
                      </Hyperlink>
                    ))}
                  </div>
                </div>
              ) : (
                <Hyperlink
                  to={merchandise.path}
                  className={
                    chosen === index ? "menuItem lively" : "menuItem"
                  }
                  key={index}
                  onClick={() => setSelected(index)}
                >
                  <merchandise.icon />
                  <span>{merchandise.heading}</span>
                </Hyperlink>
              )}
            </div>
          ))}
        </div>
      </movement.div>
    </>
  );
};
export default Sidebar;
//mycss
.sidebar {
  show: flex;
  flex-direction: column;
  place: relative;
  padding-top: 2.5rem;
  transition: all 300ms ease;
  background-color: #3B5E33;
  
}

.bars {
  show: none;
}

.emblem {
  show: flex;
  font-weight: daring;
  font-size: 22px;
  hole: 1rem;
  align-items: heart;
  justify-content: heart;
  peak: 1.7%;
  colour: white;
  margin-bottom: 2rem;
}

.emblem>span>span {
  colour: var(--pink);
}

.emblem>img {
  width: 2rem;
  peak: 2rem;
}

.menu {
  show: flex;
  flex-direction: column;
  hole: 1rem;
}

.menuItem {
  show: flex;
  align-items: heart;
  hole: 1rem;
  margin: 0 0 0 32px;
  peak: 2.3rem;
  transition: all 300ms ease;
  border-radius: 0.7rem;
  font-size: 14px;
  text-decoration: none;
  colour: white;
}
.menuItem:hover {
  cursor: pointer;
}

.lively {
  background: var(--activeItem);
  margin-left: 0;
}

.lively::earlier than {
  content material: "";
  width: 8px;
  peak: 100%;
  background: var(--utama2);
  margin-right: calc(1rem - 8px);
}


.dropdown {
  show: none;
  flex-direction: column;
  hole: 0.5rem;
  padding: 0.9rem;
  background-color: var(--utama2);
  border-radius: 0.7rem;
  place: absolute;
  margin: 201px 0 0 0px;
}

.menuItem:hover .dropdown {
  show: flex;
}

.dropdownItem {
  show: flex;
  align-items: heart;
  hole: 1rem;
  peak: 2.3rem;
  border-radius: 0.7rem;
  font-size: 14px;
  text-decoration: none;
  colour: white;
}

.dropdownItem:hover {
  cursor: pointer;
  background-color: var(--activeItem);
  padding: 7px;
}

I do not know why solely the cuti merchandise is within the heart.
ought to observe the objects above
anybody repair my drawback?

I’ve tried a number of occasions, akin to
justify content material begin, aligment merchandise begin
however nothing works

RELATED ARTICLES

Most Popular

Recent Comments