npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@one-platform/opc-menu-drawer

v0.2.2-prerelease

Published

opc-menu-drawer is a customizable drawer web component which shows the menu's and user profile

Downloads

251

Readme

opc-menu-drawer Component 👋

Version Build Status Maintenance

Opc-menu-drawer is a webcomponent developed using Lit elements for Red Hat One Platform. It's a customizable drawer component that contains header, menu buttons, links.

Prerequisites

Opc-menu-drawer is implemented under Red Hat design guidelines. Therefore the component uses Red Hat official font. This can be easily imported with google cdn at the top of HTML document.

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
  rel="stylesheet"
/>
<link
  href="https://fonts.googleapis.com/css2?family=Red+Hat+Text&display=swap"
  rel="stylesheet"
/>

Guidelines

Opc-menu-drawer contains mainly two component. A backdrop and a drawer component expanded from rightside of the screen. The drawer can be controlled using isOpen attribute. Backdrop color can be controlled by --opc-menu-drawer__backdrop-color css variable.

Details

The menu is the bottom element seen on the drawer body. It contains a collapsable box with a title from the attribute menuTitle and an optional slot avatar to provide an avatar of the user. The header also accepts buttons through the slot menu that provide primary actions of the drawer, which is revealed by expanding the header title. The header container could be replaced with the slot header.

Code

<opc-menu-drawer menuTitle="Akhil Mohan">
  <span slot="avatar">AM</span>
  <button slot="menu">Log In</button>
</opc-menu-drawer>
document.querySelector('opc-menu-drawer').open();

Details

The drawer component accepts links grouped into categories for users to navigate easily. Links can be set via the links attribute. When the links are more than 5 for a group, the rest of them will be hidden in a collapsable box. It can be revealed by clicking on the show more button for that category.

The default slot gets passed to the drawer body. It will be shown after the links section if links are provided.

Code

<opc-menu-drawer menuTitle="Akhil Mohan">
  <span slot="avatar">AM</span>
  <div>
    <h6>Main Body</h6>
  </div>
</opc-menu-drawer>
const links = [
  {
    title: 'BUILT-IN SERVICES',
    links: [
      { name: 'Blog', href: '#' },
      { name: 'Documentation', href: '#', isDisabled: true },
      { name: 'Something #1', href: '#' },
      { name: 'Something #2', href: '#' },
      { name: 'Something #3', href: '#' },
      { name: 'Something #4', href: '#' },
      { name: 'Something #5', href: '#' },
      { name: 'Something #6', href: '#' },
    ],
  },
  {
    title: 'BUILT-IN SERVICES',
    links: [
      { name: 'blog', href: '#' },
      { name: 'Documentation', href: '#' },
    ],
  },
];

document.querySelector('opc-menu-drawer').links = links;
document.querySelector('opc-menu-drawer').open();

Details

The footer component will be at the bottom of the drawer body. It can be added using the slot footer. When the contents of the drawer cause overflow, the footer will be at the bottom.

Code

<opc-menu-drawer menuTitle="Akhil Mohan">
  <span slot="avatar">AM</span>
  <span slot="footer">2021 Red Hat </span>
</opc-menu-drawer>
document.querySelector('opc-menu-drawer').open();

Slots

There are total 5 slots available in this component

  • Default slot: Default slot will be component inside body of the drawer componenent.

  • header: Container component that contains the header component.

  • header-body: Body component for the header. Eg: Filter chips can be placed here

  • avatar: The avatar component on drawer header.

  • menu: The menu button on expanding drawer header.

  • footer: Footer component of the drawer body.

Attributes

  • links
    • Type: Array
    • Default value: [ ]
document.querySelector("opc-menu-drawer").links = {
    title: "BUILT-IN SERVICES",
    links: [
      { name: "Blog#2", href: "#", isDisabled: true },
      { name: "Documentation#1", href: "#" },
    ],
  },;
  • title
    • Type: String
    • Default value: Menu
  <opc-menu-drawer title="Menu Drawer"></opc-menu-drawer isOpen>
  • menuTitle
    • Type: String
    • Default value: ''
  <opc-menu-drawer menuTitle="Akhil Mohan"></opc-menu-drawer isOpen>

Methods

  • isOpen
    • Type: Boolean
    • Default value: false
document.querySelector('opc-menu-drawer').isOpen;
  • open
    • Description: To open the drawer.
document.querySelector('opc-menu-drawer').open();
  • close
    • Description: To close the drawer.
document.querySelector('opc-menu-drawer').close();
  • toggle
    • Description: To toggle the drawer states.
document.querySelector('opc-menu-drawer').toggle();

Events

There are two events emitted by opc-menu-drawer emitter when drawer state changes.

  1. opc-menu-drawer:open

Dispatched when drawer opens.

Example:

document
  .querySelector('opc-menu-drawer')
  .addEventListener('opc-menu-drawer:open', function (event) {
    alert('drawer opened');
  });
  1. opc-menu-drawer:close

Dispatched when drawer closed.

Example:

document
  .querySelector('opc-menu-drawer')
  .addEventListener('opc-menu-drawer:close', function (event) {
    alert('drawer closed');
  });

CSS Variables

| CSS Variable name | Value | | ------------------------------------------- | ----------------- | | --opc-menu-drawer__backdrop-color | #00000060 | | --opc-menu-drawer__btn-hover-color | #efefef | | --opc-menu-drawer__z-index | 9 | | --opc-menu-drawer__width | 360px | | --opc-menu-drawer__top | 0px | | --opc-menu-drawer__right | #000 | | --opc-menu-drawer__menu-padding | 8px 21px | | --opc-menu-drawer__link-group-title-color | #6a6e73 | | --opc-menu-drawer__transition--default | 120ms ease-in-out |

Install

npm install

Usage

Install opc-menu-drawer

npm install --save @one-platform/opc-menu-drawer

For VanillaJS

  • Import component
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
  • Add component in html
<opc-menu-drawer> </opc-menu-drawer>

For Angular

  • In your app.module include the CUSTOM_ELEMENTS_SCHEMA and import the component
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
  • Add component in any component html template
<opc-menu-drawer> </opc-menu-drawer>

For React

  • Import the component in App.js
import '@one-platform/opc-menu-drawer/dist/opc-menu-drawer';
  • Add component in any component html render
<opc-menu-drawer> </opc-menu-drawer>

Development server

  • Run development server
npm run dev opc-menu-drawer

Build

npm run build opc-menu-drawer

Run tests

npm run test

🤝 Contributors

👤 akhilmhdh