sidebar-minimal-changes

import {css, html, LitElement} from "https://unpkg.com/[email protected]/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);