sbx-crm-menu-ui 1.0.0 → 2.0.1-beta.0

package/dist/components/contentMenuComponent/LanguageDropdown.d.ts

@@ -1,2 +1,9 @@
-import React from "react";
-export default function LanguageDropdown(): React.JSX.Element;
+import React from 'react';
+export interface Language {
+    code: string;
+    label: string;
+    flag: string;
+}
+export default function LanguageDropdown(props: {
+    languages: Language[];
+}): React.JSX.Element;

package/dist/components/dropdown/Dropdown.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export default function Dropdown(): React.JSX.Element;
+export default function Dropdown(props: {
+    startNameWord: string;
+}): React.JSX.Element;

package/dist/components/menu/TopNavBarComponent/TopNavBarComponent.d.ts

@@ -1,2 +1,13 @@
 import React from 'react';
-export default function TopNavBarComponent(): React.JSX.Element;
+import { Language } from '../../contentMenuComponent/LanguageDropdown';
+interface Props {
+    languages: Language[];
+    onChooseLanguage?: (language: Language) => void;
+    user: {
+        name: string;
+        email: string;
+    };
+    logoSrc?: string;
+}
+export default function TopNavBarComponent(props: Props): React.JSX.Element;
+export {};

package/dist/components/menu/sidebar/Sidebar.d.ts

@@ -1,3 +1,13 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { Route } from '../../../types/Common';
 import React from 'react';
-declare const SidebarComponent: () => React.JSX.Element;
+interface RoutesData {
+    label: string;
+    icon: IconDefinition;
+    subRoutes: Route[];
+}
+declare const SidebarComponent: (props: {
+    routesData: RoutesData[];
+    children: React.ReactNode;
+}) => React.JSX.Element;
 export default SidebarComponent;

package/dist/components/menu/sidebar/subMenuComponent/SubMenuComponent.d.ts

@@ -1,13 +1,12 @@
-import { Route } from "../../../../types/Common";
-export declare const generateSubMenuData: (labels: string[]) => Route[];
-declare const subMenuDataHome: Route[];
-declare const subMenuDataAnalytics: Route[];
-declare const subMenuDataProcess: Route[];
-declare const subMenuDataForm: Route[];
-declare const subMenuDataComunications: Route[];
-declare const subMenuDataDataProviders: Route[];
-declare const subMenuData: Route[];
-declare const subMenuDataReports: Route[];
-declare const subMenuDataConfig: Route[];
-declare const subMenuDataMarketing: Route[];
-export { subMenuDataHome, subMenuData, subMenuDataComunications, subMenuDataConfig, subMenuDataDataProviders, subMenuDataForm, subMenuDataReports, subMenuDataMarketing, subMenuDataAnalytics, subMenuDataProcess, };
+import { Route } from '../../../../types/Common';
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+interface View {
+    path: string;
+    name: string;
+    root: string;
+    permission: string;
+    views?: View[];
+}
+export declare const generateSubMenuData: (labels: View[]) => Route[];
+export declare const icons: Record<string, IconDefinition>;
+export {};

package/dist/index.css

@@ -1,16 +1,3 @@
-.crm-class-sidebar {
-  width: 250px;
-  height: 100%;
-  color: white;
-  position: fixed;
-  top: 0;
-  left: 0;
-  overflow-x: hidden;
-  padding-top: 20px;
-  transition: 0.5s;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-}
-
 *,
 ::after,
 ::before {
@@ -19,33 +6,35 @@
 
 .crm-class-sidebar {
   width: 320px;
-  height: 100%;
+  height: 100vh;
   color: white;
-  position: fixed;
-  top: 0;
-  left: 0;
   overflow-x: hidden;
-  padding-top: 20px;
   transition: 0.5s;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
+.crm-class-sidebar-content {
+  padding: 100px 20px;
+}
+
 .crm-class-sidebar-list {
   list-style-type: none;
-  padding: 10px 20px;
+  padding: 100px 20px;
   margin: 0;
   color: #555;
   position: relative;
 }
-.crm-class-sidebar-list .cmr-class-tittle {
+.crm-class-sidebar-list .crm-class-title {
+  text-align: left;
   font-weight: bold;
   margin-bottom: 10px;
   display: block;
   color: #3f6ad8;
+  font-size: 10.8px;
 }
 .crm-class-sidebar-list .crm-class-sidebar-li {
   padding: 10px 15px;
-  font-size: 16px;
+  font-size: 13px;
   transition: 0.3s;
   cursor: pointer;
   display: flex;
@@ -59,14 +48,11 @@
   -o-border-radius: 4px;
 }
 
-.cmr-class-content-sub-menu-items {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.6rem;
-  padding-right: 0.4rem;
+.crm-class-content-sub-menu-items {
+  padding: 0.5rem 0.4rem 0.5rem 0.6rem;
   cursor: pointer;
 }
-.cmr-class-content-sub-menu-items:hover {
+.crm-class-content-sub-menu-items:hover {
   background-color: #e0f3ff;
   border-radius: 4px;
   -webkit-border-radius: 4px;
@@ -95,7 +81,7 @@
   border-radius: 15px;
 }
 
-.cmr-class-top-nav-bar {
+.crm-class-top-nav-bar {
   background-color: white;
   display: flex;
   align-items: center;
@@ -104,18 +90,19 @@
   padding: 0 1.5rem;
   height: 80px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-  position: relative;
+  position: fixed;
+  width: 100%;
   z-index: 20;
 }
 
-.cmr-class-flex-container {
+.crm-class-flex-container {
   display: flex;
   align-items: center;
 }
 
-.cmr-class-icon-container {
-  width: 60px;
-  height: 60px;
+.crm-class-icon-container {
+  width: 40px;
+  height: 40px;
   border: none;
   padding: 0;
   outline: none;
@@ -129,7 +116,7 @@
   justify-content: center;
 }
 
-.cmr-class-top-nav-bar-avatar {
+.crm-class-top-nav-bar-avatar {
   width: 40px;
   height: 40px;
   border: none;
@@ -146,78 +133,78 @@
   color: white;
 }
 
-.cmr-class-top-nav-bar-options {
+.crm-class-top-nav-bar-options {
   display: flex;
   margin-left: auto;
 }
 
-.cmr-class-dropdown {
+.crm-class-dropdown {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
-.cmr-class-top-nav-bar-info-user {
+.crm-class-top-nav-bar-info-user {
   display: flex;
   flex-direction: column;
 }
 
-.cmr-class-dropdown-content {
+.crm-class-dropdown-content {
   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
   padding: 12px 16px;
   z-index: 1;
 }
 
-.cmr-class-cursor-pointer {
+.crm-class-cursor-pointer {
   cursor: pointer;
 }
 
-.cmr-class-font-10 {
+.crm-class-font-10 {
   font-size: 10px;
 }
 
-.cmr-class-slate-gray {
+.crm-class-slate-gray {
   color: #495057;
 }
 
-.cmr-class-ml-20 {
+.crm-class-ml-20 {
   margin-left: 20px;
 }
 
-.cmr-class-mr-10 {
+.crm-class-mr-10 {
   margin-right: 10px;
 }
 
-.cmr-class-color-icon {
+.crm-class-color-icon {
   color: #495057;
 }
 
-.cmr-class-ml-auto {
+.crm-class-ml-auto {
   margin-left: auto;
 }
 
-.cmr-class-list-none {
+.crm-class-list-none {
   list-style-type: none;
 }
 
-.cmr-class-font-bold {
+.crm-class-font-bold {
   font-weight: 900;
 }
 
-.cmr-class-mt-70 {
+.crm-class-mt-70 {
   margin-top: 70px;
 }
 
-.cmr-class-mr-20 {
+.crm-class-mr-20 {
   margin-right: 20px;
 }
 
 /*/*/
-.cmr-class-content-flag {
+.crm-class-content-flag {
   width: 55px;
   height: 55px;
   border: none;
@@ -233,35 +220,35 @@
   justify-content: center;
 }
 
-.cmr-class-flag {
+.crm-class-flag {
   display: inline-block;
   width: 20px;
   height: 15px;
   background-size: cover;
 }
 
-.cmr-class-flag.large {
+.crm-class-flag.large {
   width: 30px;
   height: 20px;
 }
 
-.cmr-class-flag.US {
+.crm-class-flag.US {
   background-image: url("https://flagcdn.com/w20/us.png");
 }
 
-.cmr-class-flag.ES {
+.crm-class-flag.ES {
   background-image: url("https://flagcdn.com/w20/es.png");
 }
 
-.cmr-class-flag.NL {
+.crm-class-flag.NL {
   background-image: url("https://flagcdn.com/w20/nl.png");
 }
 
-.cmr-class-dropdown-flag {
+.crm-class-dropdown-flag {
   position: relative;
 }
 
-.cmr-class-dropdown-toggle {
+.crm-class-dropdown-toggle {
   background: none;
   border: none;
   cursor: pointer;
@@ -269,7 +256,7 @@
   padding: 10px;
 }
 
-.cmr-class-dropdown-menu {
+.crm-class-dropdown-menu {
   display: none;
   position: absolute;
   background-color: white;
@@ -279,16 +266,16 @@
   min-width: 200px;
 }
 
-.cmr-class-dropdown-menu .cmr-class-dropdown-header {
+.crm-class-dropdown-menu .crm-class-dropdown-header {
   font-weight: bold;
   margin-bottom: 8px;
 }
 
-.cmr-class-dropdown-flag:hover .cmr-class-dropdown-menu {
+.crm-class-dropdown-flag:hover .crm-class-dropdown-menu {
   display: block;
 }
 
-.cmr-class-dropdown-item {
+.crm-class-dropdown-item {
   background: none;
   border: none;
   cursor: pointer;
@@ -299,7 +286,7 @@
   text-align: left;
 }
 
-.cmr-class-selected-language {
+.crm-class-selected-language {
   display: flex;
   align-items: center;
   justify-items: center;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import TopNavBarComponent from './components/menu/TopNavBarComponent/TopNavBarComponent';
 import SidebarComponent from './components/menu/sidebar/Sidebar';
 import './styles.module.scss';
-export { TopNavBarComponent, SidebarComponent };
+import { generateSubMenuData, icons } from './components/menu/sidebar/subMenuComponent/SubMenuComponent';
+export { TopNavBarComponent, SidebarComponent, generateSubMenuData, icons };