contentoh-components-library 21.2.25 → 21.2.26

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

@@ -24,7 +24,8 @@ var _reactRouterDom = require("react-router-dom");
 var _jsxRuntime = require("react/jsx-runtime");
 
 var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
-  var menuoption = _ref.menuoption;
+  var _ref$menuoption = _ref.menuoption,
+      menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -32,7 +33,6 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
       setTrueBar = _useState2[1];
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: trueBar,
     bar: trueBar,
     onMouseOver: function onMouseOver() {
       return setTrueBar(true);
@@ -51,7 +51,7 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
         children: menuoption.map(function (item, index) {
           var _item$suboption;
 
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.RouterComponent, {
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
               to: item.path,
               className: "option-link",

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

@@ -5,23 +5,25 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.RouterComponent = exports.Container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _templateObject;
+var _reactRouterDom = require("react-router-dom");
+
+var _templateObject, _templateObject2;
 
 var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: auto;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      a {\n        height: ", "px;\n        display: flex;\n        justify-content: ", ";\n        border-radius: ", "px;\n        align-items: center;\n        font-family: sans-serif;\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 21px;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        text-decoration: none;\n        &.option-link {\n          cursor: pointer;\n          width: ", "px;\n          margin: 5px 0;\n          padding-left: ", "px;\n        }\n        p {\n          cursor: pointer;\n          margin: 0%;\n          pointer-events: none;\n        }\n        img {\n          width: 22px;\n          & + * {\n            margin-left: 12px;\n          }\n        }\n      }\n      .option-link:hover {\n        background: #e33aa9;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n        a {\n          display: flex;\n          justify-content: flex-start;\n          text-decoration: none;\n          position: relative;\n          font-size: 13px;\n          border-left: 1px solid #f0eef2;\n          border-radius: 0;\n          color: #f0eef2;\n          padding-top: 14px;\n          padding-left: 12px;\n          height: 25px;\n          &::before {\n            border-left: 1px solid #e33aa9;\n            width: 10px;\n            content: \"\";\n            border-radius: 50%;\n            height: 10px;\n            background-color: white;\n            position: absolute;\n            bottom: 0;\n            left: ", "%;\n          }\n          &.active {\n            background: none;\n            &::before {\n              background-color: #e33aa9;\n            }\n          }\n        }\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
-  return bar ? 270 : 58;
+  return bar ? 260 : 58;
 }, function (_ref2) {
   var bar = _ref2.bar;
   return bar ? 20 : 50;
 }, function (_ref3) {
   var bar = _ref3.bar;
-  return bar === "" ? 145 : 50;
+  return bar === "" ? 145 : 40;
 }, function (_ref4) {
   var bar = _ref4.bar;
   return bar ? 5 : 0;
@@ -45,7 +47,9 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
   return bar ? 28 : 20;
 }, function (_ref11) {
   var bar = _ref11.bar;
-  return bar ? -4 : -34;
+  return bar ? -9 : -40;
 });
 
-exports.Container = Container;
+exports.Container = Container;
+var RouterComponent = (0, _styledComponents.default)(_reactRouterDom.BrowserRouter)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+exports.RouterComponent = RouterComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.25",
+  "version": "21.2.26",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -1,17 +1,19 @@
-import { Container } from "./styles";
+import {
+  Container,
+  RouterComponent
+} from "./styles";
 import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
 import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
 import React, { useState } from "react";
 import { NavLink } from "react-router-dom";
 
-export const VerticalSideMenuMainPage = ({ menuoption }) => {
+export const VerticalSideMenuMainPage = ({ menuoption = []}) => {
   const [trueBar, setTrueBar] = useState();
   return (
     <Container
-      className={trueBar}
       bar={trueBar}
       onMouseOver={() => setTrueBar(true)}
-      onMouseOut={() => setTrueBar(false)}
+     onMouseOut={() => setTrueBar(false)}
     >
       <div className="navbar-top">
         <img
@@ -21,7 +23,7 @@ export const VerticalSideMenuMainPage = ({ menuoption }) => {
         ></img>
         <div className="option">
           {menuoption.map((item, index) => (
-            <div key={index}>
+            <RouterComponent key={index}>
               <NavLink to={item.path} className="option-link">
                 <img src={item.icon} alt={item.title}></img>
                 {trueBar && <p>{item.title}</p>}
@@ -30,14 +32,17 @@ export const VerticalSideMenuMainPage = ({ menuoption }) => {
                 <>
                   {item?.suboption?.map((subitem) => (
                     <div className="sub-option">
-                      <NavLink to={subitem.path} className="sub-option-link">
+                      <NavLink
+                        to={subitem.path}
+                        className="sub-option-link"
+                      >
                         {trueBar && <p>{subitem.title}</p>}
                       </NavLink>
                     </div>
                   ))}
                 </>
               )}
-            </div>
+            </RouterComponent>
           ))}
         </div>
       </div>

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

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { BrowserRouter as Router } from "react-router-dom";
 
 export const Container = styled.div`
   height: 98%;
@@ -7,7 +8,7 @@ export const Container = styled.div`
   flex-direction: column;
   justify-content: space-between;
   overflow: auto;
-  width: ${({ bar }) => (bar ? 270 : 58)}px;
+  width: ${({ bar }) => (bar ? 260 : 58)}px;
   border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
   background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
   scrollbar-width: none;
@@ -24,7 +25,7 @@ export const Container = styled.div`
       display: flex;
       flex-direction: column;
       align-items: flex-start;
-      margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
+      margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
       padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
       .active {
         background: #e33aa9;
@@ -94,7 +95,7 @@ export const Container = styled.div`
             background-color: white;
             position: absolute;
             bottom: 0;
-            left: ${({ bar }) => (bar ? -4 : -34)}%;
+            left: ${({ bar }) => (bar ? -9 : -40)}%;
           }
           &.active {
             background: none;
@@ -107,3 +108,5 @@ export const Container = styled.div`
     }
   }
 `;
+
+export const RouterComponent = styled(Router)``;