@cc-dev-kit-test/console-components-app-layout/lib/styles/Nav.js

React component for Alibaba Cloud.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavCollapseTriggerWrapper = exports.NavCollapseTriggerContainer = exports.NavCollapseTrigger = exports.NavCollapseTriggerIcon = exports.default = exports.NavChildenWrapper = void 0;

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _consoleComponents = require("@alicloud/console-components");

var _styledComponents = _interopRequireDefault(require("styled-components"));

function _templateObject6() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  order: 0;\n  flex: 0 1 auto;\n  height: 100%;\n  width: 0px;\n  position: relative;\n  /* border: 1px solid red; */\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 0;\n  width: 24px;\n  height: 34px;\n  cursor: pointer;\n  &:hover {\n    ", " {\n      border-left: ", "px solid #ebebeb;\n      /* left: 2px; */\n      border-left-color: #eff3f8;\n    }\n  }\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  width: 0;\n  height: ", "px;\n  position: absolute;\n  top: calc(50% - ", "px);\n  left: 0;\n  z-index: 99;\n  line-height: ", "px;\n  border: 1px solid #c0c6cc;\n  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);\n  border-left: ", "px solid #fff;\n  cursor: pointer;\n  color: #bfbfbf;\n  transition: left 0.1s ease-in-out, border 0.1s ease;\n  ", " {\n    top: 8px;\n    width: ", "px;\n    position: relative;\n    left: ", "px;\n    color: #c1c1c1;\n    transform: rotate(", "deg);\n    transition: transform 0.5s ease-in-out, left 0.1s ease-in-out;\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2.default)([""]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  order: 0;\n  flex: 0 1 auto;\n  height: 100%;\n  background-color: var(--console-menu-bg, #fff);\n  box-shadow: var(\n    --console-menu-box-shadow,\n    2px 0 4px 0 rgba(0, 0, 0, 0.16),\n    1px 0 0 0 #c0c6cc\n  );\n  overflow-x: hidden;\n  overflow-y: ", ";\n  width: ", "px;\n  min-width: ", "px;\n  transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;\n  position: relative;\n  z-index: 100;\n\n  ", " {\n    position: relative;\n    left: ", "px;\n    transition: left 0.3s ease-in-out;\n  }\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  min-width: ", "px;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var navWidth = 208;
var navCollapsedWidth = 8;
var triggerHeight = 34;
var triggerWidth = 16;
var iconWidth = 12;
var evulsedWidth = 2;

var calcWidth = function calcWidth(props) {
  return props.collapsed ? navCollapsedWidth : navWidth;
};

var calcOverflow = function calcOverflow(props) {
  return props.collapsed ? 'hidden' : 'auto';
};

var calcLeft = function calcLeft(props) {
  return props.collapsed ? navCollapsedWidth - navWidth : 0;
};

var getRotate = function getRotate(props) {
  return props.collapsed ? 180 : 0;
};

var NavChildenWrapper = _styledComponents.default.div(_templateObject(), navWidth, navWidth);

exports.NavChildenWrapper = NavChildenWrapper;

var Nav = _styledComponents.default.div(_templateObject2(), calcOverflow, calcWidth, calcWidth, NavChildenWrapper, calcLeft);

var _default = Nav;
exports.default = _default;
var NavCollapseTriggerIcon = (0, _styledComponents.default)(_consoleComponents.Icon)(_templateObject3());
exports.NavCollapseTriggerIcon = NavCollapseTriggerIcon;

var NavCollapseTrigger = _styledComponents.default.span(_templateObject4(), triggerHeight, triggerHeight / 2, triggerHeight - 18, triggerWidth, NavCollapseTriggerIcon, iconWidth, -(triggerWidth / 2) - iconWidth / 2, getRotate);

exports.NavCollapseTrigger = NavCollapseTrigger;

var NavCollapseTriggerContainer = _styledComponents.default.div(_templateObject5(), NavCollapseTrigger, triggerWidth + evulsedWidth);

exports.NavCollapseTriggerContainer = NavCollapseTriggerContainer;

var NavCollapseTriggerWrapper = _styledComponents.default.div(_templateObject6());

exports.NavCollapseTriggerWrapper = NavCollapseTriggerWrapper;