imbric-theme 0.2.8 → 0.3.1

package/layout/Sidebar/Sidebar.module.css

@@ -1,3 +1,396 @@
+.divider {
+  height: auto;
+}
+
 .is-home {
   display: none;
+}
+
+@keyframes swing {
+
+  0%,
+  30%,
+  50%,
+  70%,
+  100% {
+    transform: rotate(0deg);
+  }
+
+  10% {
+    transform: rotate(10deg);
+  }
+
+  40% {
+    transform: rotate(-10deg);
+  }
+
+  60% {
+    transform: rotate(5deg);
+  }
+
+  80% {
+    transform: rotate(-5deg);
+  }
+}
+
+.header {
+  width: 220px;
+  /* position: fixed;
+  padding-top: 43px; */
+}
+
+.pro-sidebar {
+  width: 100%;
+  min-width: 100%;
+  color: #adadad;
+  height: 100vh;
+  text-align: left;
+  transition: width, left, right, 0.3s;
+  position: relative;
+  z-index: 1009;
+}
+
+.pro-sidebar-inner {
+  background-color: var(--color-base-white);
+  box-shadow: 0.5px 0.866px 2px 0px rgba(0, 0, 0, 0.15);
+  height: 100%;
+  position: relative;
+  z-index: 101;
+}
+
+.pro-sidebar-layout::-webkit-scrollbar {
+  display: none;
+}
+
+.collapsed {
+  width: 80px;
+  min-width: 80px;
+}
+
+.logotext {
+  padding: 13px 20px;
+}
+
+.closemenu {
+  color: var(--color-primary);
+  position: absolute;
+  right: -7px;
+  z-index: 9999;
+  line-height: 20px;
+  border-radius: 50%;
+  font-weight: bold;
+  font-size: 22px;
+  top: 4px;
+  cursor: pointer;
+}
+
+.pro-sub-menu>.pro-inner-list-item {
+  position: relative;
+  background-color: var(--color-brand-hint-of-red);
+  padding-left: 44px;
+  padding-bottom: 4px;
+  padding-top: 4px;
+}
+
+.pro-sidebar-content {
+  flex-grow: 1;
+  margin-top: 38px;
+}
+
+.pro-sidebar-inner .pro-sidebar-layout ul {
+  padding: 0 5px;
+}
+
+.pro-sidebar-inner .pro-sidebar-layout .active {
+  background-image: linear-gradient(0deg, #fece00 0%, #ffe172 100%);
+}
+
+.logo {
+  padding: 20px;
+}
+
+/* @media only screen and (max-width: 720px) {
+  html {
+    overflow: hidden;
+  }
+} */
+
+/* /////////// */
+
+.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  z-index: 101;
+}
+
+.pro-sidebar-header {
+  border-bottom: 1px solid rgba(173, 173, 173, 0.2);
+  position: fixed;
+  background-color: #fff;
+  width: 220px;
+  z-index: 1;
+}
+
+.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout .pro-sidebar-footer {
+  border-top: 1px solid rgba(173, 173, 173, 0.2);
+}
+
+.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pro-sidebar .overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 100;
+  display: none;
+}
+
+.header.collapsed>.pro-sidebar>.pro-sidebar-inner>.pro-sidebar-layout >.pro-sidebar-header {
+  width: 80px;
+  min-width: 80px;
+}
+
+.pro-sidebar.collapsed {
+  width: 80px;
+  min-width: 80px;
+}
+
+
+.pro-menu {
+  padding-top: 10px;
+  padding-bottom: 40px;
+}
+
+.pro-menu a {
+  text-decoration: none;
+  color: #adadad;
+}
+
+.pro-menu a:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: transparent;
+}
+
+.pro-menu a:hover {
+  color: #d8d8d8;
+}
+
+@media (max-width: 480px) {
+  .pro-sidebar.xs {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xs.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xs.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xs.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xs.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xs.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xs.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 576px) {
+  .pro-sidebar.sm {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.sm.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.sm.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.sm.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.sm.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.sm.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.sm.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .pro-sidebar.md {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.md.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.md.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.md.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.md.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.md.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.md.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 992px) {
+  .pro-sidebar.lg {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.lg.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.lg.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.lg.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.lg.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.lg.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.lg.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 1200px) {
+  .pro-sidebar.xl {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xl.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xl.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xl.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xl.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xl.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xl.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media (max-width: 1600px) {
+  .pro-sidebar.xxl {
+    position: fixed;
+    left: -270px;
+  }
+
+  .pro-sidebar.xxl.collapsed {
+    left: -80px;
+  }
+
+  .pro-sidebar.xxl.toggled {
+    left: 0;
+  }
+
+  .pro-sidebar.xxl.toggled .overlay {
+    display: block;
+  }
+
+  .pro-sidebar.xxl.rtl {
+    left: auto;
+    right: -270px;
+  }
+
+  .pro-sidebar.xxl.rtl.collapsed {
+    left: auto;
+    right: -80px;
+  }
+
+  .pro-sidebar.xxl.rtl.toggled {
+    left: auto;
+    right: 0;
+  }
 }

package/layout/Sidebar/Sidebar.stories.js

@@ -1,4 +1,5 @@
 import { Sidebar, styles } from '.'
+import { options } from './constants'
 
 import { getTemplate } from '../../helpers/storybook'
 
@@ -8,64 +9,8 @@ export default {
   title: 'Layout/Sidebar',
   component: Sidebar,
   args: {
-    options: {
-      isHome: {
-        text: "Home",
-        view: true
-      },
-      isActivity: {
-        text: "Activity",
-        view: true
-      },
-      isStaff: {
-        text: "Staff",
-        view: true
-      },
-      isServices: {
-        text: "Services",
-        view: true
-      },
-      isBilling: {
-        text: "Billing",
-        view: true
-      },
-      isSetting: {
-        text: "Setting",
-        view: true
-      },
-      isOrderTaxi: {
-        text: "Order Taxi",
-        view: true
-      },
-      isDashboards: {
-        text: "Dashboards",
-        view: true
-      },
-      isProjects: {
-        text: "Projects",
-        view: true
-      },
-      isPermissions: {
-        text: "Permissions",
-        view: true
-      },
-      isAnalytics: {
-        text: "Analytics",
-        view: true
-      },
-      isLegal: {
-        text: "Legal",
-        view: true
-      },
-      isUserGuide: {
-        text: "User Guide",
-        view: true
-      },
-      isMyProfile: {
-        text: "My profile",
-        view: true
-      },
-    },
+    options: options.itemsMenu,
+    menuCollapseView: false,
   },
   argTypes: {
     options: {
@@ -73,7 +18,7 @@ export default {
       table: {
         type: {
           summary: 'object',
-          detail: "{ text: 'string', view: 'bool'}",
+          detail: "{ text: 'string', icon: 'string', href: 'string', view: 'bool', viewSubMenu: 'bool'}",
         },
       },
     },