Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import {css, html, LitElement} from "https://unpkg.com/lit-element@2.0.1/lit-element.js?module";
- class LeftSideBarCard extends LitElement {
- static get properties() {
- return {
- hass: {},
- config: {},
- _showoption: {}
- };
- }
- constructor() {
- super();
- this._showoption = false
- }
- render() {
- const url = window.location.href.split("/").pop()
- return html`
- <div class="main">
- <aside style="width: ${this._showoption == true ? '50px' : '90px'}" ;>
- <div class="empty"></div>
- ${this.config.entities.map(ent => {
- return html`
- <a href="${ent.url}" class="${ent.url === url ? 'active' : 'deactive'}">
- <i aria-hidden="true">
- <ha-icon icon="${ent.icon}"/>
- </i>
- </a>
- `;
- })}
- ${this.config.option_menu ? html`
- <a style="border-right: 1px solid #dad7d7;">
- <i @click=${() => {
- this._showoption = !this._showoption
- }}>
- <ha-icon icon="mdi:cog-outline"/>
- </i>
- </a>
- ` : html``}
- <div class="empty"></div>
- </aside>
- <div class="sub_menu" style="display: ${this._showoption == true ? 'flex' : 'none'}">
- ${this.config.option_menu.map(sub => {
- return html`
- <a class="button_option_menu ${sub.url === url ? 'button_option_menu_active' : ' '}"
- href="${sub.url}">
- <ha-icon class="icon" icon="${sub.icon}"/>
- </ha-icon>
- </a
- `;
- })}
- </div>
- </div>
- `;
- }
- connectedCallback() {
- const url = window.location.href.split("/").pop()
- this._showoption = this.config.option_menu.map(v => v["url"]).includes(url);
- super.connectedCallback()
- }
- disconnectedCallback() {
- super.disconnectedCallback()
- }
- setConfig(config) {
- if (!config.entities) {
- throw new Error("You need to define entities");
- }
- this.config = config;
- }
- getCardSize() {
- return this.config.entities.length + 1;
- }
- static get styles() {
- return css`
- :host {
- --layout-margin: 4px 4px 0px 4px;
- }
- .main {
- // width: 80px;
- height: 99.6vh;
- display: flex;
- flex-direction:rows;
- justify-content: center;
- text-align: center;
- vertical-align: middle;
- // margin: 2vh 0 2vh 10px;
- }
- .empty {
- background-color: transparent;
- height: 100%;
- border-right: 1px solid #dad7d7;
- }
- aside {
- color: #fff;
- height: 100%;
- background-image: linear-gradient(270deg, #f6f5fa, transparent);
- // background-image: linear-gradient(30deg, #0048bd, #44a7fd);
- // background-color: var(--deactive-background-button-color);
- // border-radius: 15px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- text-align: center;
- vertical-align: middle;
- }
- aside a {
- // color: #fff;
- color: var(--sidebar-icon-color);
- display: block;
- padding: 20px 0px 20px 5px;
- margin-left: 10px;
- text-decoration: none;
- -webkit-tap-highlight-color: transparent;
- // border-right: 1px solid rgba(128, 128, 128, 0.2);
- }
- .deactive {
- border-right: 1px solid #dad7d7;
- }
- .active {
- color: #3f5efb;
- background: #fff;
- outline: none;
- position: relative;
- background-color: #fff;
- border-top-left-radius: 15px;
- border-bottom-left-radius: 15px;
- border-left: 1px solid #dad7d7;
- border-top: 1px solid #dad7d7;
- border-bottom: 1px solid #dad7d7;
- border-right-color: #dad7d7;
- border-right-width: 1px;
- // box-shadow: 0 -4px 3px -4px, 0 4px 3px -4px, -4px 0px 3px -4px;
- }
- aside a i {
- margin-right: 15px;
- }
- .active:after{
- content: "";
- position: absolute;
- background-color: transparent;
- bottom: 100%;
- right: 0px;
- height: 100%;
- width: 25px;
- border-bottom-right-radius: 15px;
- border-right-color: #dad7d7;
- border-bottom: 1px solid #dad7d7;
- box-shadow: rgb(255 255 255) 0px 15px 0px 0px;
- }
- .active:before {
- content: "";
- position: absolute;
- background-color: transparent;
- top: 64px;
- right: 0px;
- height: 100%;
- width: 25px;
- border-top-right-radius: 15px;
- border-right: 1px solid #dad7d7;
- border-top: 1px solid #dad7d7;
- box-shadow: 0 -15px 0 0 #fff;
- }
- aside p {
- margin: 0;
- padding: 40px 0;
- }
- body {
- font-family: "Roboto";
- width: 100%;
- height: 100vh;
- margin: 0;
- }
- i:before {
- width: 14px;
- height: 14px;
- font-size: 14px;
- position: fixed;
- color: #fff;
- background: #0077b5;
- padding: 10px;
- border-radius: 50%;
- top: 5px;
- right: 5px;
- }
- .sub_menu {
- flex-direction: column;
- justify-content: center;
- text-align: center;
- vertical-align: middle;
- cursor: pointer;
- width: 45px;
- }
- .button_option_menu {
- padding: 15px;
- border-right: 2px solid var(--sidebar-border-color);
- background-color: transparent;
- }
- .button_option_menu_active {
- border-right: 4px solid var(--state-icon-active-color);
- }
- .icon {
- color: var(--sidebar-icon-color)
- }
- `;
- }
- }
- customElements.define('leftside-card', LeftSideBarCard);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement