contentoh-components-library 21.2.21 → 21.2.24

package/src/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js

@@ -15,21 +15,26 @@ const Template = (args) => <VerticalSideMenuMainPage {...args} />;
 export const VerticalSideMenuMainPageDefault = Template.bind({});
 
 VerticalSideMenuMainPageDefault.args = {
-  menuoption: [
-    { icon: iconSpeedometer, path: "/Dashboard", title: "Dashborad" },
+   menuoption : [
+    { icon: iconSpeedometer, path: "/Dashboard", title: "Dashboard" },
     {
-      icon: iconProduct,
-      path: "/products",
+      icon: iconGroup,
+      path: "/Products",
       title: "Productos",
-      suboption: [{ path: "/Dashboard", title: "General" },{ path: "/AddProducts", title: "Agregar Producto" }],
     },
-    { icon: iconGroup, path: "/providers", title: "Proovedores" },
-    {  
-      icon: iconLogo,
-      path: "/ContentohProducts",
-      title: "Content Oh!",
-      suboption: { path: "/ContentohProducts", title: "Productos" },
+    {
+      icon: iconProduct,
+      path: "/Orders",
+      title: "Proveedor",
+      suboption: [
+        { path: "/Orders", title: "Ordenes" },
+        { path: "/Entregas", title: "Entregas" },
+      ],
+    },
+    {
+      icon: iconTask,
+      path: "/tasks",
+      title: "Tareas",
     },
-    { icon: iconTask, path: "/tasks/7", title: "Tareas" },
-  ],
+  ]
 };

package/src/components/atoms/VerticalSideMenuMainPage/index.js

@@ -1,15 +1,18 @@
 import { Container } from "./styles";
 import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
 import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
-import openMenu from "../../../assets/images/verticalSideMenuMainPage/openMenu.svg";
-import closeMenu from "../../../assets/images/verticalSideMenuMainPage/closeMenu.svg";
 import React, { useState } from "react";
+import { NavLink } from "react-router-dom";
 
 export const VerticalSideMenuMainPage = ({ menuoption }) => {
-  const [trueBar, setTrueBar] = useState("");
-  let sub;
+  const [trueBar, setTrueBar] = useState();
   return (
-    <Container className={trueBar} bar={trueBar}>
+    <Container
+      className={trueBar}
+      bar={trueBar}
+      onMouseOver={() => setTrueBar(true)}
+      onMouseOut={() => setTrueBar(false)}
+    >
       <div className="navbar-top">
         <img
           src={trueBar ? iconLogoContentoh : iconLogo}
@@ -17,45 +20,27 @@ export const VerticalSideMenuMainPage = ({ menuoption }) => {
           className="logo"
         ></img>
         <div className="option">
-          {menuoption.map((item) => (
-            <>
-              <div
-                className="option-link"
-                exact
-                activeClassName="active"
-                to={item.path}
-              >
-                <img src={item.icon} alt={item.title} width={"25px"}></img>
+          {menuoption.map((item, index) => (
+            <div key={index}>
+              <NavLink to={item.path} className="option-link">
+                <img src={item.icon} alt={item.title}></img>
                 {trueBar && <p>{item.title}</p>}
-              </div>
-              {item.suboption === undefined ? (
-                ""
-              ) : (
+              </NavLink>
+              {item.suboption !== undefined && (
                 <>
-                  {menuoption[1].suboption.map((subitem) => (
+                  {item?.suboption?.map((subitem) => (
                     <div className="sub-option">
-                      <div exact activeClassName="active" to={subitem.path}>
+                      <NavLink to={subitem.path} className="sub-option-link">
                         {trueBar && <p>{subitem.title}</p>}
-                      </div>
+                      </NavLink>
                     </div>
                   ))}
                 </>
               )}
-            </>
+            </div>
           ))}
         </div>
       </div>
-      <div className="menu-bottom">
-        <img
-          src={trueBar ? closeMenu : openMenu}
-          alt="Open Menu"
-          onClick={() => {
-            {
-              trueBar ? setTrueBar("") : setTrueBar("actived");
-            }
-          }}
-        ></img>
-      </div>
     </Container>
   );
 };

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -1,43 +1,44 @@
 import styled from "styled-components";
-import { NavLink } from "react-router-dom"; 
-//styled(NavLink)
+
 export const Container = styled.div`
-  height: 100%;
-  width: 58px;
+  height: 98%;
   box-sizing: border-box;
   padding: 23px 10px 70px 10px;
   flex-direction: column;
   justify-content: space-between;
   overflow: auto;
-  border-radius: 50px;
+  width: ${({ bar }) => (bar ? 210 : 58)}px;
+  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
   display: flex;
   text-align: center;
-  &.actived {
-    width: 200px;
-    padding: 23px 10px 15px 10px;
-    border-radius: 20px;
+  transition: width 0.3s linear;
+  margin: 10px 0 10px 20px;
+  & + * {
+    margin-left: 30px;
   }
   .navbar-top {
-    .logo {
-      & + * {
-        margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
-      }
-    }
+    transition: all 0.3s linear;
     .option {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
+      margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
       padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
-      div {
+      .active {
+        background: #e33aa9;
+      }
+      & + div {
+        margin-top: 5px;
+      }
+      a {
         height: ${({ bar }) => (bar ? 32 : 38)}px;
-        width: ${({ bar }) => (bar ? 165 : 38)}px;
         display: flex;
         justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
         border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
         align-items: center;
-        font-family: "Raleway";
+        font-family: sans-serif;
         font-style: normal;
         font-weight: 400;
         font-size: 18px;
@@ -47,13 +48,17 @@ export const Container = styled.div`
         text-decoration: none;
         &.option-link {
           cursor: pointer;
-          margin-top: 12px;
+          width: ${({ bar }) => (bar ? "160" : "38")}px;
+          margin: 5px 0;
           padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
         }
         p {
           cursor: pointer;
+          margin: 0%;
+          pointer-events: none;
         }
         img {
+          width: 22px;
           & + * {
             margin-left: 12px;
           }
@@ -68,7 +73,7 @@ export const Container = styled.div`
         padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
         height: auto;
         width: auto;
-        div {
+        a {
           display: flex;
           justify-content: flex-start;
           text-decoration: none;
@@ -77,7 +82,7 @@ export const Container = styled.div`
           border-left: 1px solid #f0eef2;
           border-radius: 0;
           color: #f0eef2;
-          padding-top: 20px;
+          padding-top: 14px;
           padding-left: 12px;
           height: 25px;
           &::before {
@@ -88,16 +93,17 @@ export const Container = styled.div`
             height: 10px;
             background-color: white;
             position: absolute;
-            left: ${({ bar }) => (bar ? -4 : -16)}%;
-            bottom: 1%;
+            bottom: 0;
+            left: ${({ bar }) => (bar ? -4 : -34)}%;
+          }
+          &.active {
+            background: none;
+            &::before {
+              background-color: #e33aa9;
+            }
           }
         }
       }
     }
   }
-  .menu-bottom {
-    display: flex;
-    justify-content: ${({ bar }) => (bar ? "flex-end" : "center")};
-    cursor: pointer;
-  }
 `;

package/src/index.js

@@ -22,6 +22,7 @@ export * from "./components/atoms/SliderToolTip/index";
 export * from "./components/atoms/Status/index";
 export * from "./components/atoms/TabSection/index";
 export * from "./components/atoms/ValidationPanel/index";
+export * from "./components/atoms/VerticalSideMenuMainPage/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";