https://github.com/manufosela/header-logomenu

Web component Heacer with logo and menu, accesible and responsive
https://github.com/manufosela/header-logomenu

Last synced: about 1 month ago
JSON representation

Web component Heacer with logo and menu, accesible and responsive

• Host: GitHub
• URL: https://github.com/manufosela/header-logomenu
• Owner: manufosela
• License: apache-2.0
• Created: 2023-08-08T08:58:34.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-08T09:51:49.000Z (about 1 year ago)
• Last Synced: 2024-03-15T12:12:16.728Z (9 months ago)
• Language: JavaScript
• Size: 378 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \

This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.

## Installation

```bash

npm i header-logomenu

```

## Usage

```html

  import 'header-logomenu/header-logomenu.js';

  

    


      


      


        MENU 1

        


          
Option 1 submenu 1

          
Option 2 submenu 1

          
Option 3 submenu 1

          
Option 4 submenu 1

        

      

      
Option 3 menu

      
Option 4 menu

      
Option 5 menu

    

  

  OUTER


```

```css

  /** CSS VARIABLES */

    --header-logomenu-height

    --header-logomenu-color-primary

    --header-logomenu-color-secondary

    --header-logomenu-color-dark

    --header-logomenu-text-color

    --header-logomenu-logo-height

    --header-logomenu-background-color

    --header-logomenu-border

    --header-logomenu-menu-background-color

    --header-logomenu-submenu-background-color

    --header-logomenu-menu-color

    --header-logomenu-submenu-color

    --header-logomenu-background-color-selected

    --header-logomenu-color-bar

    --header-logomenu-element-hover-border

    --header-logomenu-element-hover-background-color

    --header-logomenu-element-hover-border-radius

    --header-logomenu-justify-content

```

## Cloned and not cloned elements

The *nav* tag is cloned into the shadow Root, adding encapsulated CSS classes and events.

All elements outside the *nav* tag are not cloned.

All elements with the attribute *data-not-clone* are not cloned, but it moves to shadow Root if a nav element has the id of the *data-not-cloned* attribute.

For example de *a* tag with *data-not-clone="outer"* is moved to shadow Root because the *nav* tag has an element with id *outer*.

## Linting and formatting

To scan the project for linting and formatting errors, run

```bash

npm run lint

```

To automatically fix linting and formatting errors, run

```bash

npm run format

```

## Testing with Web Test Runner

To execute a single test run:

```bash

npm run test

```

To run the tests in interactive watch mode run:

```bash

npm run test:watch

```

## Demoing with Storybook

To run a local instance of Storybook for your component, run

```bash

npm run storybook

```

To build a production version of Storybook, run

```bash

npm run storybook:build

```

## Tooling configs

For most of the tools, the configuration is in the `package.json` to minimize the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `web-dev-server`

```bash

npm start

```

To run a local development server that serves the basic demo located in `demo/index.html`