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

side-drawer

v4.2.0

Published

A simple side drawer element with no dependencies and small as possible

Downloads

876

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

wes566wes566

Keywords

web componenthamburgermenudrawerside-drawerapp draweranimatingweb-componentcustom-element

Readme

Build Published on webcomponents.org npm

side-drawer

A simple, animating side drawer built as a Web Component

side-drawer demo

Demo

Breaking Change in v4.x

This custom element now uses a standard dialog under the hood. As of October 2023 there are some browser bugs around dialog ::backdrop not seeing CSS variables. As a result the --side-drawer-backdrop-filter, --side-drawer-overlay-opacity and --side-drawer-overlay-transition variables will not work in some browsers. If you need to support these browsers you can use v3.x of this component until the browser bugs are fixed.

Installation

You can integrate side-drawer via <script> tag or via NPM.

Via <script> tag

In the <head> of your index.html put a script tag like this:

<script
  type="module"
  src="https://unpkg.com/side-drawer/side-drawer.js"
></script>

<!-- Or use the minified version -->
<script
  type="module"
  src="https://unpkg.com/side-drawer/side-drawer.min.js"
></script>

Now you can use the side-drawer element anywhere in your html, JSX, template, etc.

Via NPM

npm install side-drawer --save

And then you need to import the module before you can use it in your html/jsx/template:

import "side-drawer";

Web Component Browser Support

This web component uses HTML templates, the shadow DOM, and custom elements. If you need to polyfill for any of these standards then take a look at the web components polyfill.

API and Customization

Attributes/Properties

  • open
    • Add this attribute to open the drawer.
      • Example: <side-drawer open></side-drawer>
    • Set the property in Javascript to imperatively toggle the drawer
      • Example: drawer.open = true
    • In (p)react you might need to set undefined in your JSX (since false !== undefined for html attribute existence)
      • Example: <side-drawer open={this.state.isDrawerOpen || undefined}></side-drawer>
  • right
    • Add this attribute so the drawer opens from the right instead of the left.
      • Example: <side-drawer right></side-drawer>

Events

  • open
    • Raised when the drawer is opened.
    • Example: drawer.addEventListener("open", handleOpen())
    • When subscribing in html listen for onopen
      • Ex: <side-drawer onopen="handleOpen()">
  • close -Raised when the drawer is closed.
    • Example: drawer.addEventListener("close", handleClose())
    • When subscribing in html listen for onclose
      • Ex: <side-drawer onclose="handleClose()">

Styling

You can style the side-drawer element as you would any regular element, in CSS. A list of supported CSS properties are below, along with the default values.

side-drawer {
  background-color: #ffffff;
  width: 350px;
  max-width: 75vw;
  z-index: 10;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

You can customize styling with the following CSS variables:

| Variable | Default | Description | | ---------------------------------- | -------------------------- | ---------------------------------------------------------------------------------------------------------------- | | --side-drawer-transition | transform 0.25s ease-out | The open/close transition for the drawer (should be "transform") | | --side-drawer-backdrop-filter | none | The backdrop-filter for both the drawer and the overlay that appears to the right of the drawer (when it's open) | | --side-drawer-overlay-transition | opacity linear 0.25s | The transition for the overlay that appears to the right of the drawer (when it's open) | | --side-drawer-overlay-opacity | 0.7 | The opacity of the overlay |

Contribute

This project is built with standard HTML/CSS/JS, no frameworks or special web-component compilers here (for maximum simplicity and minimum size). If you want to learn more about writing custom elements see MDN or this web.dev page.

The source for this web component is contained in side-drawer.js and example usage is in index.html. To debug/run the example you can just open index.html in a browser. For a hot-reload developer experience try using live server in vscode.

You will need the dev dependencies of this project installed to run the post-commit hooks.

npm install