@aquera/nile-elements 1.5.0 → 1.5.1-beta-1.1

package/demo/index.html

@@ -30,16 +30,149 @@
 </nile-input>
   -->
  
-
-  <nile-chip
-   autoCompleteOptions='["React", "Angular", "Vue", "Tailwind"]'
-   acceptUserInput
-></nile-chip>
-
-
-<nile-button id="small-btn1">Small tooltip</nile-button>
-<nile-lite-tooltip for="small-btn1" id="small-tooltip1" content="This is a small tooltip." size="small"></nile-lite-tooltip>
-
-
+ 
+  <nile-drawer id="basicDrawer" label="Basic Drawer">
+  
+    <div style="width: 500px;">
+      <nile-side-bar #sidebar>
+        <nile-side-bar-header>
+              <nile-side-bar-logo slot="logo"   collapsedSrc=""></nile-side-bar-logo>
+              <nile-side-bar-expand slot="expand"></nile-side-bar-expand>
+            </nile-side-bar-header> 
+           <nile-side-bar-panel> 
+            <nile-side-bar-group  >
+              <nile-side-bar-group-item>
+                <nile-side-bar-group-item-icon icon="dashboard" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Dashboard </nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="application" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Applications </nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="logs" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Logs</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="agent" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Agent</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="user" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Users</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+          
+              
+            </nile-side-bar-group>
+           
+            <nile-side-bar-group divider>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="flowmap-orchestration" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Integrations</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="persistentdata" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Data Loader</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+              <nile-side-bar-group-item >
+                <nile-side-bar-group-item-icon icon="data-insight" slot="icon"></nile-side-bar-group-item-icon>
+                <nile-side-bar-group-item-text >Data Insights</nile-side-bar-group-item-text>
+              </nile-side-bar-group-item>
+          
+           </nile-side-bar-group>   
+         </nile-side-bar-panel>
+          
+              <nile-side-bar-footer>
+                <nile-side-bar-footer-item  (click)="toggleHelpSupportMenu($event)" type="support">
+                  <span slot="icon"><nile-icon name="helpandsupport"> </nile-icon></span>
+                  <nile-side-bar-footer-text 
+                  text="Help and Support" 
+                  slot="text">
+                </nile-side-bar-footer-text>
+                  <nile-side-bar-action  [open]="enableHelpSupportMenu"(nile-hide)="closeHelpSupportMenu()" slot="action" placement="right" hoist distance="5" skidding="-22"  >
+                    <nile-icon name="arrowright" slot="trigger"></nile-icon>
+              
+                <nile-side-bar-action-menu>
+                    <nile-side-bar-action-menu-item class="menu2">Help Center</nile-side-bar-action-menu-item>
+                    <nile-side-bar-action-menu-item class="menu2">API Documentation</nile-side-bar-action-menu-item>
+                  </nile-side-bar-action-menu>
+                </nile-side-bar-action>
+                </nile-side-bar-footer-item>
+          
+                <nile-side-bar-footer-item (click)="toggleProfileMenu($event)" type="avatar">
+                  <span slot="icon">
+          
+                    <nile-avatar 
+                    name="James Albert" 
+                    variant="text" 
+                    size="lg" 
+                    bg-color="#005EA6" 
+                    text-color="white">
+                  </nile-avatar>
+          
+                  </span>
+                  <nile-side-bar-footer-text 
+                  text="James Albert" 
+                  subtext="Aquera Internals"
+                  slot="text">
+                </nile-side-bar-footer-text>
+                
+                  <nile-side-bar-action  [open]="enableProfileMenu"(nile-hide)="closeProfileMenu()" slot="action" placement="right" hoist distance="2" skidding="-22"  >
+                    <nile-icon name="arrowright" slot="trigger"></nile-icon>
+                  
+                    <nile-side-bar-action-menu searchEnabled>
+                  
+                      <!-- PRE-HEADER (Profile Section) -->
+                      <div slot="menu__pre-header" class="profile">
+                        <nile-avatar 
+                        name="James Albert" 
+                        variant="text" 
+                        size="xl" 
+                        bg-color="#005EA6" 
+                        text-color="white">
+                      </nile-avatar>
+                        <div class="profile-info">
+                          <div class="name">James Albert</div>
+                          <div class="org">Aquera Internals</div>
+                          <div class="email">jamesalbertgmail.com</div>
+                        </div>
+                        <nile-button variant="tertiary" class="settings-button" >      <nile-icon name="settings" class="settings-icon"></nile-icon> </nile-button>
+                  
+                      </div>
+                  
+                      <!-- HEADER (Tenant Accounts label) -->
+                      <!-- <div slot="menu__header" class="tenant-header">Tenant Accounts</div> -->
+                  
+                      <!-- MENU ITEMS -->
+                      <nile-side-bar-action-menu-item>Acme</nile-side-bar-action-menu-item>
+                      <nile-side-bar-action-menu-item class="active-item" active>
+                        Aquera Internals
+          
+                        
+                        <nile-icon name="tick" slot="suffix"></nile-icon>
+                      </nile-side-bar-action-menu-item>
+                      <nile-side-bar-action-menu-item>Dayforce to Okta Saas</nile-side-bar-action-menu-item>
+                      <nile-side-bar-action-menu-item>Andrew Wells</nile-side-bar-action-menu-item>
+                      <nile-side-bar-action-menu-item>Villa Groups</nile-side-bar-action-menu-item>
+                  
+                      <!-- FOOTER -->
+                      <div slot="menu__footer" class="footer">
+                        <nile-button variant="tertiary" class="sign-out">Sign Out</nile-button>
+                      </div>
+                  
+                    </nile-side-bar-action-menu>
+                  </nile-side-bar-action>
+                  
+                </nile-side-bar-footer-item>
+              </nile-side-bar-footer>
+            
+            
+          </nile-side-bar>
+          </div>
+        </nile-drawer>
+        <nile-button onclick="document.getElementById('basicDrawer').show()">
+          Open Drawer
+        </nile-button>
+         
   </body>
 </html>