menu divider example

Author: Templarian

src/pg/menu/__examples__/basic/basic.ts

@@ -1,6 +1,8 @@
 import { Component, Part, Prop } from '@pictogrammers/element';
 import PgMenu from '../../menu';
 
+import PgMenuDivider from '../../../menuDivider/menuDivider';
+
 import template from './basic.html';
 
 @Component({
@@ -19,6 +21,13 @@ export default class XPgMenuBasic extends HTMLElement {
     {
       label: 'Item 2',
       value: 'item2'
+    },
+    {
+      type: PgMenuDivider
+    },
+    {
+      label: 'Item 3',
+      value: 'item3'
     }];
     this.$menu.addEventListener('select', this.#handleSelect.bind(this));
   }

src/pg/menuDivider/README.md

@@ -0,0 +1,7 @@
+# `<pg-menu-divider>`
+
+The `PgMenuDivider` is used as a `type: PgMenuDivider` with the `pg-menu` component items.
+
+```typescript
+import '@pictogrammers/components/pgMenuDivider.js';
+```

src/pg/menuDivider/menuDivider.css

@@ -0,0 +1,9 @@
+:host {
+  display: contents;
+}
+
+[part=divider] {
+  margin-top: 0.25rem;
+  border-top: 1px solid var(--pg-menu-divider-color, rgba(69, 60, 79, 0.5));
+  margin-bottom: 0.25rem;
+}

src/pg/menuDivider/menuDivider.html

@@ -0,0 +1 @@
+<div part="divider"></div>

src/pg/menuDivider/menuDivider.ts

@@ -0,0 +1,15 @@
+import { Component, Prop } from '@pictogrammers/element';
+
+import template from './menuDivider.html';
+import style from './menuDivider.css';
+
+const noIcon = 'M0 0h24v24H0V0zm2 2v20h20V2H2z';
+
+@Component({
+  selector: 'pg-menu-divider',
+  style,
+  template
+})
+export default class PgMenuDivider extends HTMLElement {
+  @Prop() presentational: boolean = false;
+}