@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.1.3-beta-1.2",
+  "version": "1.1.3-beta-2.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -94,24 +94,7 @@
     "./nile-grid-cell-item": "./dist/src/nile-grid-cell-item/index.js",
     "./nile-grid-head": "./dist/src/nile-grid-head/index.js",
     "./nile-grid-head-item": "./dist/src/nile-grid-head-item/index.js",
-    "./nile-grid-row": "./dist/src/nile-grid-row/index.js",
-    "./nile-side-bar": "./dist/src/nile-side-bar/index.js",
-    "./nile-side-bar-header": "./dist/src/nile-side-bar-header/index.js",
-    "./nile-side-bar-logo": "./dist/src/nile-side-bar-logo/index.js",
-    "./nile-side-bar-expand": "./dist/src/nile-side-bar-expand/index.js",
-    "./nile-side-bar-group": "./dist/src/nile-side-bar-group/index.js",
-    "./nile-side-bar-group-item": "./dist/src/nile-side-bar-group-item/index.js",
-    "./nile-side-bar-group-item-icon": "./dist/src/nile-side-bar-group-item-icon/index.js",
-    "./nile-side-bar-group-item-text": "./dist/src/nile-side-bar-group-item-text/index.js",
-    "./nile-side-bar-group-item-content": "./dist/src/nile-side-bar-group-item-content/index.js",
-    "./nile-side-bar-content": "./dist/src/nile-side-bar-content/index.js",
-    "./nile-side-bar-footer": "./dist/src/nile-side-bar-footer/index.js",
-    "./nile-side-bar-footer-item": "./dist/src/nile-side-bar-footer-item/index.js",
-    "./nile-side-bar-footer-icon": "./dist/src/nile-side-bar-footer-icon/index.js",
-    "./nile-side-bar-action": "./dist/src/nile-side-bar-action/index.js",
-    "./nile-side-bar-footer-text": "./dist/src/nile-side-bar-footer-text/index.js",
-    "./nile-side-bar-action-menu-item": "./dist/src/nile-side-bar-action-menu-item/index.js",
-    "./nile-side-bar-action-menu": "./dist/src/nile-side-bar-action-menu/index.js"
+    "./nile-grid-row": "./dist/src/nile-grid-row/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -215,4 +198,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -2,6 +2,7 @@ export { NileButton } from './nile-button';
 export { NileHeading } from './nile-heading';
 export { NileIcon } from './nile-icon';
 export { NileInput } from './nile-input';
+export { NileSidebar } from './nile-sidebar';
 export { NileMenu } from './nile-menu';
 export { NileBadge } from './nile-badge';
 export { NileDrawer } from './nile-drawer';
@@ -48,6 +49,9 @@ export { NileCard } from './nile-card';
 export { NilePopover } from './nile-popover';
 export { NileButtonFilter } from './nile-button-filter';
 export { NileCircularProgressbar } from './nile-circular-progressbar';
+export { NileSidebarMenu } from './nile-sidebar-menu';
+export { NileSidebarMenuItems } from './nile-sidebar-menu-items';
+export { NileSidebarWrapper } from './nile-sidebar-wrapper';
 export { NileTableCellItem } from './nile-table-cell-item';
 export { NileTableRow } from './nile-table-row';
 export { NileTableBody } from './nile-table-body';
@@ -89,21 +93,3 @@ export { NileRichTextEditor } from './nile-rich-text-editor';
 
 // Import version utility to set nile version in window object
 import './version';
-
-export { NileSideBar } from './nile-side-bar';
-export { NileSideBarHeader } from './nile-side-bar-header';
-export { NileSideBarLogo } from './nile-side-bar-logo';
-export { NileSideBarExpand } from './nile-side-bar-expand';
-export { NileSideBarGroup } from './nile-side-bar-group';
-export { NileSideBarGroupItem } from './nile-side-bar-group-item';
-export { NileSideBarGroupItemIcon } from './nile-side-bar-group-item-icon';
-export { NileSideBarGroupItemText } from './nile-side-bar-group-item-text';
-export { NileSideBarGroupItemContent } from './nile-side-bar-group-item-content';
-export { NileSideBarContent } from './nile-side-bar-content';
-export { NileSideBarFooter } from './nile-side-bar-footer';
-export { NileSideBarFooterItem } from './nile-side-bar-footer-item';
-export { NileSideBarFooterIcon } from './nile-side-bar-footer-icon';
-export { NileSideBarAction } from './nile-side-bar-action';
-export { NileSideBarFooterText } from './nile-side-bar-footer-text';
-export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';
-export { NileSideBarActionMenu } from './nile-side-bar-action-menu';

package/src/nile-button/nile-button.css.ts

@@ -74,14 +74,38 @@ export const styles = css`
 
   /* Primary */
   .button--standard.button--primary {
-    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
-    color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(
-      --nile-textarea-standard-disabled-box-shadow,
-      var(--ng-shadow-xs-skeuomorphic)
-    ); //TODO: fix
-  }
+  position: relative;
+  overflow: hidden; 
+  background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+  color: var(--nile-colors-white-base, var(--ng-colors-text-white));
+  border-color: var(--nile-colors-primary-600);
+  border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+  border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
+  box-shadow: var(--nile-textarea-standard-disabled-box-shadow, var(--ng-shadow-none));
+}
+
+.button--standard.button--primary::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--primary::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
+
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
@@ -121,8 +145,11 @@ export const styles = css`
   /*  Secondary */
   .button--standard.button--secondary {
     background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));
-    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-border-none));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    box-shadow: var(--nile-box-shadow-none,var(--ng-shadow-xs-skeuomorphic));
+    border-width:var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
   }
 
   .button--standard.button--secondary:hover:not(.button--disabled) {
@@ -255,11 +282,38 @@ export const styles = css`
 
   /* destructive */
   .button--standard.button--destructive {
+    position: relative;
+    overflow: hidden; 
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
+    border-color: var(--nile-colors-red-500);
+    border-width: var(--nile-border-width-1, var(--ng-border-width-0));
+    border-style: var(--nile-border-style-solid, var(--ng-border-style-none));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
-    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
-  }
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-none));
+  }
+
+
+  .button--standard.button--destructive::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background:  var(--ng-skeuemorphic-gradient-border);
+  mask: var(--ng-mask-rim);
+  mask-composite: var(--ng-mask-composite-exclude);  
+  padding: var(--ng-spacing-xxs); 
+}
+
+ 
+.button--standard.button--destructive::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: var(--ng-shadow-xs-skeuomorphic)
+}
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));

package/src/nile-sidebar/index.ts

@@ -0,0 +1,133 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * An nile-menu element.
+ */
+
+interface MenuItem {
+  name: string;
+  icon: string;
+  href: string;
+}
+
+interface MenuItemList {
+  [key: string]: MenuItem;
+}
+
+/**
+ * An nile-sidebar element.
+ *
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('nile-sidebar')
+export class NileSidebar extends LitElement {
+  static override styles = css`
+    :host {
+      background-color: var(--nile-alert-color-background-base);
+      border-right: 1px solid var(--nile-colors-neutral-400);
+      min-height: 100vh;
+      background: var(--nile-colors-neutral-100);
+      border: 1px solid var(--nile-colors-neutral-400);
+      -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    }
+    :host([showSidebar=true]) {
+      min-width: 240px;
+    }
+    .nile-logo {
+      margin: var(--nile-spacing-2xl);
+      display: block;
+      margin-bottom: var(--nile-spacing-lg);
+    }
+
+    .menu-group {
+      margin-left: var(--nile-spacing-2xl);
+      margin-right: var(--nile-spacing-2xl);
+    }
+
+    .view-component {
+      background-color: var(--nile-colors-white-base);
+      min-width: 240px;
+    }
+    // padding: 3rem;
+    .view-component__item {
+      background-color: var(--nile-colors-white-base);
+      // padding: 1rem;
+      border-radius: var(--nile-radius-sm);
+      border: solid 1px #eee;
+    }
+
+    .nile-menu__hr {
+      border-bottom: solid 1px var(--nile-colors-dark-100);
+      margin-top: var(--nile-spacing-lg) !important;
+      margin-bottom: var(--nile-spacing-lg) !important;
+      background-color: var(--nile-colors-dark-100);
+    }
+
+    .nds-menu--bottom {
+      position: absolute;
+      bottom: 0;
+    }
+
+    .nds-menu--active .nile-logo {
+      display: none;
+    }
+  `;
+
+  /**
+   * Button Lab
+   */
+  @property()
+  title = '';
+
+  /**
+   * Hide Sidebar
+   */
+  @property()
+  showSidebar = false;
+
+  get buttonClassMap() {
+    return {
+      'nds-menu--active': this.showSidebar
+    };
+  }
+
+  // class="nds-menu ${classMap(this.buttonClassMap)}"
+
+  override render() {
+    return html`
+      <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
+        <div class="nile-menu-group">
+          <a class="nile-logo" href="/">
+            <img
+              src="https://assets.aquera.io/img/aquera-logo-blue.svg"
+              alt="Aquera"
+              width="112.94px"
+              height="31.06px"
+              tabindex="1"
+            />
+          </a>
+          <div class="menu-group">
+            <slot name="menu"></slot>
+          </div>
+        </div>
+        <div class="">
+          <div class="nds-menu--bottom">
+            <slot name="bottom"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar': NileSidebar;
+  }
+}

package/src/nile-sidebar/logo.svg

@@ -0,0 +1 @@
+<svg width="106" height="30" xmlns="http://www.w3.org/2000/svg"><title>Logo/Blue</title><g fill="#215690" fill-rule="evenodd"><path d="m13.828 14.513-3.552-10.5-3.551 10.5h7.103Zm1.057 3.225H5.63L4.005 22.5H0L8.198 0h4.118l8.199 22.5H16.51l-1.625-4.762ZM34.273 14.908c0-2.457-2.004-4.401-4.454-4.401-2.487 0-4.454 1.944-4.454 4.401s1.967 4.401 4.454 4.401c2.45 0 4.454-1.944 4.454-4.4Zm6.756 11.055v2.861c-.482.184-1.15.294-1.819.294-2.71 0-5.048-2.128-5.048-4.842v-3.573a7.044 7.044 0 0 1-4.788 1.834c-4.195 0-7.536-3.375-7.536-7.629S25.18 7.28 29.374 7.28c1.893 0 3.526.697 4.788 1.834v-1.54h3.527v16.3c0 1.284.853 2.09 1.967 2.09h1.373ZM41.691 16.68v-9.4h3.518v8.953c0 1.828 1.16 2.984 2.769 2.984 1.609 0 2.77-1.156 2.77-2.984V7.279h3.517v9.401c0 3.582-2.358 5.82-6.287 5.82-3.93 0-6.287-2.238-6.287-5.82M61.46 13.197h8.11c-.636-1.756-2.019-2.863-3.962-2.863-2.018 0-3.475 1.145-4.148 2.863Zm11.959 2.596H61.16c.187 2.558 1.943 4.353 4.447 4.353 1.906 0 3.4-1.031 4.036-2.635h3.55c-.86 3.322-3.737 5.65-7.586 5.65-4.634 0-8.034-3.359-8.034-7.94 0-4.582 3.437-7.942 7.997-7.942 4.522 0 7.81 3.284 7.885 7.865l-.037.65ZM86.691 7.391v3.32a6.153 6.153 0 0 0-1.26-.149c-2.557 0-4.484 1.754-4.484 4.365V22.5h-3.52V7.578h3.52V9.63c1.038-1.455 2.631-2.35 4.558-2.35.408 0 .815.037 1.186.111M100.331 15.22c0-2.557-1.985-4.58-4.412-4.58-2.463 0-4.411 2.023-4.411 4.58 0 2.558 1.948 4.582 4.411 4.582 2.427 0 4.412-2.024 4.412-4.581Zm5.551 4.658v2.978c-.33.191-.735.306-1.176.306-1.801 0-3.235-1.031-3.97-2.558-1.25 1.565-3.125 2.558-5.258 2.558-4.154 0-7.463-3.513-7.463-7.941 0-4.43 3.309-7.942 7.463-7.942 1.875 0 3.493.726 4.743 1.91V7.584h3.493V18.16c0 1.337.662 1.718 1.36 1.718h.808Z"/></g></svg>

package/src/nile-sidebar-menu/index.ts

@@ -0,0 +1 @@
+export { NileSidebarMenu } from './nile-sidebar-menu';

package/src/nile-sidebar-menu/nile-sidebar-menu.css.ts

@@ -0,0 +1,52 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * SidebarMenu CSS
+ */
+export const styles = css`
+  :host {
+    background-color: var(--nile-sidebar-menu-background-color);
+    --min-width: 80px;
+    min-width: var(--min-width);
+    width: max-content;
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    flex-direction: column;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .submenu__box {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
+    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
+  }
+
+  .sidemenu__items-list {
+    display:flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-md);
+  }
+
+  .footer {
+    display:flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-md);
+  }
+
+`;
+
+export default [styles];

package/src/nile-sidebar-menu/nile-sidebar-menu.ts

@@ -0,0 +1,97 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit';
+import { customElement, query, property } from 'lit/decorators.js';
+import { styles } from './nile-sidebar-menu.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { foreach, log } from '../nile-icon/icons/svg';
+
+/**
+ * Nile sidebar-menu component.
+ *
+ * @tag nile-sidebar-menu
+ *
+ */
+@customElement('nile-sidebar-menu')
+export class NileSidebarMenu extends NileElement {
+  /**
+   * The styles for nile-sidebar-menu
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property({ type: Boolean, reflect: true }) sidemenucollapsed = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleSidebarMenuCollapsed.bind(this));
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleSidebarMenuCollapsed);
+  }
+  firstUpdated() {
+    if (this.sidemenucollapsed) {
+      const items = this.querySelectorAll('nile-sidebar-menu-items');
+      items.forEach(curr_item => {
+        curr_item.collapsed = this.sidemenucollapsed;
+      });
+    }
+  }
+
+  handleSidebarMenuCollapsed() {
+    this.sidemenucollapsed = !this.sidemenucollapsed;
+    const items = this.querySelectorAll('nile-sidebar-menu-items');
+    items.forEach(curr_item => {
+      curr_item.collapsed = this.sidemenucollapsed;
+    });
+  }
+
+
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html`
+      <slot name="header" class="header"></slot>
+      <div class="submenu__box">
+        <slot
+          class=${classMap({
+            'sidemenu__items-list': true,
+          })}
+        >
+        </slot>
+        <slot name="footer" part="footer" class="footer"></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSidebarMenu;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar-menu': NileSidebarMenu;
+  }
+}

package/src/nile-sidebar-menu-items/index.ts

@@ -0,0 +1 @@
+export { NileSidebarMenuItems } from './nile-sidebar-menu-items';

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+
+/**
+ * SidebarMenuItems CSS
+ */
+export const styles = css`
+  :host {
+    --min-width: 280px;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  .nile__sidebar-menu-item {
+    display: flex;
+    align-items: center;
+    padding: var(--nile-spacing-md);
+    gap: var(--nile-spacing-xl);
+    min-width: var(--min-width);
+    width: max-content;
+    box-sizing: border-box;
+
+    font-family: var(--nile-font-family-serif);
+    font-size: var(--nile-type-scale-4);
+    font-weight: var(--nile-font-weight-medium);
+    line-height: var(--nile-line-height-medium);
+  }
+
+  .nile__sidebar-menu-item:hover {
+    background-color: var(--nile-colors-neutral-100);
+    border-radius: var(--nile-radius-sm);
+  }
+
+  .hide-sidebar-menu-items{
+    min-width:48px;
+  }
+
+  .hide-items {
+    display: none;
+  }
+`;
+
+export default [styles];

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.ts

@@ -0,0 +1,81 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {
+  LitElement,
+  html,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit';
+import { customElement, state, property } from 'lit/decorators.js';
+import { styles } from './nile-sidebar-menu-items.css';
+import NileElement from '../internal/nile-element';
+import { classMap } from 'lit/directives/class-map.js';
+
+/**
+ * Nile sidebar-menu-items component.
+ *
+ * @tag nile-sidebar-menu-items
+ *
+ */
+@customElement('nile-sidebar-menu-items')
+export class NileSidebarMenuItems extends NileElement {
+  /**
+   * The styles for nile-sidebar-menu-items
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  @property() iconValue = ''; // name of the icon we are using
+  @property({ type: Boolean, reflect: true }) active = false;
+
+  @state() collapsed = false;
+  /* #endregion */
+
+  /* #region Methods */
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          'nile__sidebar-menu-item': true,
+          'hide-sidebar-menu-items': this.collapsed,
+        })}
+      >
+        ${this.iconValue
+          ? html`<nile-icon
+              name="${this.iconValue}"
+              aria-label="${this.iconValue}"
+              size="24"
+              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+            ></nile-icon>`
+          : ``}
+        <slot
+          class=${classMap({
+            'hide-items': this.collapsed,
+          })}
+        ></slot>
+      </div>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSidebarMenuItems;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-sidebar-menu-items': NileSidebarMenuItems;
+  }
+}

package/src/nile-sidebar-wrapper/index.ts

@@ -0,0 +1 @@
+export { NileSidebarWrapper } from './nile-sidebar-wrapper';