Git Product home page Git Product logo

volto-dropdownmenu's Introduction

volto-dropdownmenu

Volto addon for a customizable dropdown menu. Intended to be used with collective.volto.dropdownmenu

To be used with mrs-developer, see Volto docs for further usage informations.

Created with voltocli.

Installation

Afer installation, please add following lines into package.json to enable it.

 "addons": [
    "volto-dropdownmenu"
  ],

Usage

If you are using Volto < 16, then use v2.4.3

If you are using Volto < 12, then use v1.3.0

Simply load the addon in your project, then edit the configuration in /controlpanel/dropdown-menu-settings. Example configuration to be saved in Plone here.

To use the default template for the dropdown menu, add src/addons/volto-dropdownmenu/src/customizations in your package.json in customizationPaths.

  "customizationPaths": [
    "src/customizations",
    "src/addons/volto-dropdownmenu/src/customizations"
  ]

To customize the MenuConfigurationForm component, you can now create your own component in your site and replace it using the Volto component registry in your site config file:

import MyMenuConfigurationForm from './src/MyMenuConfigurationForm';

config.registerComponent({
  name: 'MenuConfigurationForm',
  component: MyMenuConfigurationForm,
});

Navigation roots

By default, navigations roots are clickable, but there's the possibility to make them not clickable. Enabling the field 'clickableNavigationRoots' in volto-dropdownmenu config, a field appears in configuration form and let editor to decide if make navigation roots clickable or not.

  config.settings["volto-dropdownmenu"] = {
    "options": {
      "clickableNavigationRoots": true, //if true, a checkbox option in dropdown menu appears
    },
  };

Screenshots and demo

Controlpanel

Addon controlpanel

Dropdown menu

Dropdown menu

Demo

You can watch a demonstration video on YouTube

volto-dropdownmenu's People

Contributors

arky avatar bipoza avatar deodorhunter avatar giuliaghisini avatar ichim-david avatar ksuess avatar macagua avatar nzambello avatar pnicolli avatar sarabianchi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

redturtle starzel

volto-dropdownmenu's Issues

Volto crash if you add menu item without any data

If you add a menu item without a link you are permitted to save the changes
empty-menu-item
and when you try to view any page volto crashes:
volto-crash

Either the editing shouldn't allow the saving if there are missing entries in required fields or/and the view code should be
resilient enough in order not to crash the entire page

Error on login if menu has item with "simpleLink" to not published page

How to reproduce?

  • create a second menu with a 'simple link' menu item with a target that is not published.
  • log out
  • go to front page
  • reload page
  • log in
  • go to location with the non default menu

What happens?

  • Error on flattenToAppUrl:
    NavLink lacks linkUrl

I propose to dispatch action 'getDropdownMenuNavitems' on login.

const Navigation = ({ pathname, token, type, children }) => {

  ...

  useEffect(() => {
    dispatch(getDropdownMenuNavitems());
  }, [dispatch, token]);

Basic CSS Styling for dropdown

Basic CSS formatting to properly block display drop down list elements and negative white shape. At the moment, you have to customize these after the fact.

Current Behavior:

image

Suggested Formatting (Example)

expected-layout

Blocks are not persisted on save action and clicking on add icon triggers a save warning

With a simple volto app created and using only volto-dropdown menu as seen in the following package.json
https://gist.github.com/ichim-david/d42165da776faa6f1774bbc57e9243b4

When I try to add a block as soon as I click on the add icon I get a save action as seen in the screenshot
save-triggered-on-click

I then add a listing block and I hit the save icon trying to save
save-from-save-icon

Then I add a new menu item
new-menu-item-added

And when I go to check the previous menu item the block data is gone both from edit on missing in view
block-is-now-missing

active class on menu open

When dropdown menu is open, it gets open class as expected, but also active as it should be if it's the active path.
Those should be managed separately

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.