finpro
Version:
85 lines (82 loc) • 6.82 kB
JavaScript
import{a as l}from"./chunk-JA3VZI2D.js";import{a as n,b as t,g as s,h as r}from"./chunk-GBPY57YZ.js";import{a as o}from"./chunk-NZ3RGSR6.js";var p=n`.sidebar{position:relative;background:var(--fp-color-primary-background);border:solid 1px var(--fp-color-secondary);border-radius:var(--fp-border-radius-s);width:var(--fp-sidebar-width);height:var(--fp-sidebar-height);transition:width .2s ease;overflow-x:hidden;z-index:var(--fp-sidebar-z-index)}.sidebar.open{width:var(--fp-sidebar-opened-width)}.sidebar ul{padding-top:20px;list-style-type:none;display:flex;flex-direction:column;align-items:center;margin:0;padding:0}.sidebar.open ul{list-style-type:none;display:flex;flex-direction:column;align-items:start;margin:0;padding:0}.sidebar li{display:flex;padding:10px;justify-content:center;align-items:center;font-size:var(--fp-font-size-m);font-family:var(--fp-font-family);border-radius:var(--fp-border-radius-m);border:1px solid transparent}.sidebar.open li{justify-content:flex-start;gap:10px;margin:5px;cursor:pointer}.sidebar li:hover,.sidebar li.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{border:1px solid var(--fp-color-primary);color:var(--fp-color-primary)}.sidebar a{color:inherit;text-decoration:none}.sidebar .icon{display:inline-block}.logo-section{list-style-type:none;display:flex;align-items:center;margin:5px}.logo{width:var(--fp-sidebar-logo-width);height:var(--fp-sidebar-logo-height)}.logo-text{font-family:var(--fp-font-family);font-size:var(--fp-font-size-xl);margin-left:6px}.sidebar-action{margin:15px 0}.sidebar-toggle{cursor:pointer;display:flex;justify-content:center;align-items:center;padding:10px;border-top:1px solid var(--fp-color-content-tertiary);border-bottom:1px solid var(--fp-color-content-tertiary)}.sidebar-toggle:hover,.sidebar-toggle.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__{border-top:1px solid var(--fp-color-primary);border-bottom:1px solid var(--fp-color-primary)}`,a=p;var i=class extends l{constructor(){super(...arguments);this.items=[];this.open=!1;this.logoSrc="https://user-images.githubusercontent.com/57464067/226365631-a6b645e5-e2b1-4d74-855a-dc871eef8e8a.png";this.logoText="Finpro";this.height="600px";this.width="50px";this.openedWidth="200px";this.logoWidth="100%";this.logoHeight="40px";this.zIndex=1}static get styles(){return[a]}_toggleSidebar(){this.open=!this.open}render(){return t`
<style>
.sidebar {
--fp-sidebar-width: ${this.width};
--fp-sidebar-height: ${this.height};
--fp-sidebar-opened-width: ${this.openedWidth};
--fp-sidebar-z-index: ${this.zIndex};
--fp-sidebar-logo-width: ${this.logoWidth};
--fp-sidebar-logo-height: ${this.logoHeight};
}
</style>
<div class="sidebar ${this.open?"open":""}">
<div class="sidebar-header">
<div class="logo-section">
<img class="logo" src="${this.logoSrc}" />
${this.open?t`<span class="logo-text">${this.logoText}</span>`:t`${""}`}
</div>
<div class="sidebar-action">
<div class="sidebar-toggle" ="${this._toggleSidebar}">
${this.open?t`<fp-icon name="chevrons-left" style></fp-icon>`:t`<fp-icon name="chevrons-right" style></fp-icon>`}
</div>
</div>
</div>
<div class="sidebar-items">
<ul>
${this.items.map(e=>e.link?t`
${this.open?t`
<a href=${e.link}>
<li>
<span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span>${e.label}
</li>
</a>
`:t`
<a href=${e.link}>
<fp-tooltip placement="right">
<li slot="tooltip-trigger">
<span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span>
</li>
${e.label}
</fp-tooltip>
</a>
`}
`:t`
${this.open?typeof e.link<"u"?t`
<a href=${e.link}>
<li><span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span>${e.label}
</li>
</a>
`:t`
<li ="${e.action}"><span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span>${e.label}
</li>
`:typeof e.link<"u"?t`
<a href=${e.link}>
<fp-tooltip placement="right">
<li slot="tooltip-trigger"><span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span></li>
${e.label}
</fp-tooltip>
</a>
`:t`
<fp-tooltip placement="right">
<li ="${e.action}" slot="tooltip-trigger"><span class="icon">
<fp-icon style="font-size: var(--fp-font-size-xl)" name="${e.icon}"/>
</span></li>
${e.label}
</fp-tooltip>
`}
`)}
</ul>
</div>
</div>
`}};o([r({reflect:!0})],i.prototype,"items",2),o([r({reflect:!0,type:Boolean})],i.prototype,"open",2),o([r({type:String})],i.prototype,"logoSrc",2),o([r({type:String})],i.prototype,"logoText",2),o([r({type:String})],i.prototype,"height",2),o([r({type:String})],i.prototype,"width",2),o([r({type:String})],i.prototype,"openedWidth",2),o([r({type:String})],i.prototype,"logoWidth",2),o([r({type:String})],i.prototype,"logoHeight",2),o([r({type:Number})],i.prototype,"zIndex",2),i=o([s("fp-sidebar")],i);export{i as a};
//# sourceMappingURL=chunk-C6WRS2W4.js.map