@st1myl/entrl-react - npm Package Compare versions

Comparing version 1.2.17 to 1.2.18

lib/components/Header/Header.js

@@ -42,3 +42,3 @@ "use strict";
     render() {
-        return (react_1.default.createElement("div", { className: classnames_1.default("header", { active: !this.state.hidden }, this.props.className) },
+        return (react_1.default.createElement("div", { className: classnames_1.default(this.props.className, { active: !this.state.hidden }) },
             react_1.default.createElement(Hamburger, { onClick: this.menuToggle }),
@@ -89,2 +89,6 @@ react_1.default.createElement(GenericPortal_1.default, { container: "header-out-menu" },
         react_1.default.createElement("span", null))));
+const hamburgerValues = (idx) => {
+    const list = [0, 4, 8];
+    return list[idx];
+};
 exports.default = styled_components_1.default(Header) `
@@ -97,3 +101,3 @@ position: fixed;
   width: 100%;
-  background-color: ${theme_1.themeColors.blue};
+  background-color: ${theme_1.themeColors.white};
   height: 124px;
@@ -104,3 +108,178 @@ padding: 24px 20px 0 24px;
   align-items: flex-start;
+  &.active {
+  	padding-bottom: 24px;
+    height: auto;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
+  }
+  .header-menu {
+  	display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6px 3px;
+    cursor: pointer;
+    &-ham {
+      width: 18px;
+      height: 12px;
+      transform: rotate(0);
+
+      span {
+        position: absolute;
+        left: 0;
+        display: block;
+        width: 100%;
+        height: 2px;
+        border-radius: 4px;
+        background-color: ${theme_1.themeColors.text};
+
+        &:nth-child(1) {
+          top: ${hamburgerValues(0)}px;
+        }
+
+        &:nth-child(2) {
+          top: ${hamburgerValues(1)}px;
+        }
+
+        &:nth-child(3) {
+          top: ${hamburgerValues(2)}px;
+        }
+      }
+
+      &-close {
+        span:nth-child(1),
+        span:nth-child(2) {
+          top: 4px;
+        }
+        span:nth-child(1) {
+          transform: rotate(45deg);
+        }
+        span:nth-child(2) {
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+  .header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    width: 100%;
+    max-width: calc(954px - 84px);
+    height: calc(124px - 24px);
+    transition: margin-left 250ms;
+  }
+  .header-title {
+    h1 {
+      color: ${theme_1.themeColors.text};
+      font-size: ${theme_1.themeTitles.fontSize.h1};
+      font-weight: normal;
+    }
+  }
+  .header-submenu {
+    &-list {
+      display: flex;
+      list-style-type: none;
+
+      &-item {
+        position: relative;
+
+        &.active a {
+          font-weight: 500;
+          color: ${theme_1.themeColors.text};
+
+          &::after {
+            opacity: 1;
+          }
+        }
+      }
+
+      a {
+        display: block;
+        font-size: ${theme_1.themeTitles.fontSize.h3};
+        padding: 8px 16px 10px 16px;
+        text-decoration: none;
+        color: #a1a4af;
+
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: 2px;
+          border-radius: 4px 4px 0 0;
+          background-color: #5A8CF6;
+          opacity: 0;
+          transition: opacity 250ms;
+        }
+      }
+    }
+  }
+  .header-right {
+    display: flex;
+    align-items: center;
+
+    &-item {
+      &:not(:first-child) {
+        margin-left: 16px;
+      }
+      a {
+        font-size: 0;
+        display: block;
+      }
+    }
+
+    .pc-bg {
+      position: relative;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background-color: #29AFA5;
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
+
+      &-lt {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        display: block;
+        color: #ffffff;
+        pointer-events: none;
+        font-size: ${theme_1.themeTitles.fontSize.h2};
+      }
+    }
+  }
+  .header-sidebar-menu {
+    position: fixed;
+    top: 0;
+    transform: translateX(-105%);
+    width: 240px;
+    height: 100%;
+    z-index: 999;
+    transition: 250ms ease-in-out;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
+    &.opened {
+      transform: translateY(0);
+    }
+  }
+  
+  .header-sidebar-wrapper {
+    padding: 24px 0 24px 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background-color: #ffffff;
+  }
+
+  .header-sidebar-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    z-index: 998;
+  }
 `;
 //# sourceMappingURL=Header.js.map

lib/components/Nav/Nav.d.ts

@@ -18,3 +18,4 @@ import { Component } from "react";
 }
-export default Nav;
+declare const _default: import("styled-components").StyledComponent<typeof Nav, any, {}, never>;
+export default _default;
 //# sourceMappingURL=Nav.d.ts.map

lib/components/Nav/Nav.js

@@ -15,2 +15,4 @@ "use strict";
 const classnames_1 = __importDefault(require("classnames"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const theme_1 = require("../../theme");
 class Nav extends react_1.Component {
@@ -40,3 +42,3 @@ constructor() {
     render() {
-        return (react_1.default.createElement("div", { className: classnames_1.default("nav", { active: !this.state.hidden }) },
+        return (react_1.default.createElement("div", { className: classnames_1.default(this.props.className, { active: !this.state.hidden }) },
             react_1.default.createElement("div", { className: classnames_1.default("nav-wrapper", { closed: this.state.isClicked }) },
@@ -51,3 +53,102 @@ react_1.default.createElement("div", { className: "nav-head" },
 }
-exports.default = Nav;
+exports.default = styled_components_1.default(Nav) `
+	position: sticky;
+  top: 150px;
+  z-index: 2;
+  min-width: 256px;
+  will-change: top;
+  margin-left: 42px;
+
+  &.active {
+    top: 104px;
+    transition: top 100ms ease-in-out;
+  }
+
+  .nav-wrapper {
+    background-color: ${theme_1.themeColors.sectionBg};
+    border-radius: 8px;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+    max-height: 300px;
+    transition: all 250ms;
+    overflow: hidden;
+    margin-top: -77px;
+    &.closed {
+      background-color: ${theme_1.themeColors.white};
+      max-height: 53px;
+      box-shadow: none;
+      .nav-head::before {
+        opacity: 0;
+      }
+    }
+  }
+
+  .nav-head {
+    position: relative;
+    text-align: center;
+    user-select: none;
+
+    &::before {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      width: calc(100% - 32px);
+      height: 1px;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: ${theme_1.themeColors.sectionBorderBg};
+      transition: opacity 250ms;
+    }
+
+    h2 {
+      padding: 16px;
+      font-size: 18px;
+      color: ${theme_1.themeColors.text};
+      font-weight: normal;
+    }
+  }
+
+  .nav-body {
+    ul {
+      padding: 22px 16px 16px 16px;
+      list-style-type: none;
+
+      li {
+        position: relative;
+        vertical-align: middle;
+        font-size: 14px;
+        color: ${theme_1.themeColors.secondaryText};
+        cursor: pointer;
+        transition: all 250ms;
+
+        &:not(:first-child) {
+          margin-top: 12px;
+        }
+
+        &::before {
+          opacity: 0;
+          position: absolute;
+          left: -24px;
+          top: 50%;
+          transform: translateY(-50%);
+          content: '';
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          transition: 250ms;
+          background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0001 6L8.59009 7.41L13.1701 12L8.59009 16.59L10.0001 18L16.0001 12L10.0001 6Z' fill='%23424242'/%3E%3C/svg%3E%0A");
+        }
+
+        &.active {
+          color: ${theme_1.themeColors.text};
+          font-weight: 500;
+          margin-left: 24px;
+
+          &::before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+`;
 //# sourceMappingURL=Nav.js.map

lib/theme/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.themeColors = {
-    blue: "#598CF5",
-    red: "#F46363",
-    yellow: "#FED570",
-    green: "#22CE8B",
+    blue: "#598cf5",
+    red: "#f46363",
+    yellow: "#fed570",
+    green: "#22ce8b",
     text: "#424242",
-    secondaryText: "#A1A4AF",
-    white: "#fff"
+    secondaryText: "#a1a4af",
+    white: "#fff",
+    sectionBg: "#f9fafc",
+    sectionBorderBg: "#f1efee"
 };
@@ -12,0 +14,0 @@ exports.themeTitles = {

package.json

 {
   "name": "@st1myl/entrl-react",
   "author": "St1myL",
-  "version": "1.2.17",
+  "version": "1.2.18",
   "repository": "st1myl/entrl-react",
@@ -6,0 +6,0 @@ "main": "./lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

89566

increased by10.15%

Lines of code

880

increased by41.25%

No dependency changes