Added menu style settings

config/install/uikit_components.settings.yml

 uikit_components:
-  uikit_framework_version: 'The UIkit base theme is not installed.'
+  additional_menu_styles: 1

src/Form/AdminForm.php

@@ -21,23 +21,25 @@ class AdminForm extends ConfigFormBase {
   public function buildForm(array $form, FormStateInterface $form_state) {
     // Form constructor.
     $form = parent::buildForm($form, $form_state);
+
     // Default settings.
     $config = $this->config('uikit_components.settings');
 
     // Get UIkit framework version from UIkit base theme.
-    $uikit_version = UIkitComponents::getUIkitLibraryVersion();
-    if ($uikit_version) {
-      $config->set('uikit_components.uikit_framework_version', $uikit_version);
-    }
-    else {
-      $config->set('uikit_components.uikit_framework_version', $this->t('The UIkit base theme is not installed.'));
-    }
+    $uikit_version = UIkitComponents::getUIkitLibraryVersion() ? UIkitComponents::getUIkitLibraryVersion() : $this->t('The UIkit base theme is not installed.');
 
     // UIkit framework version field.
     $form['uikit_framework_version'] = [
       '#type' => 'item',
       '#title' => $this->t('UIkit Framework Version'),
-      '#markup' => $config->get('uikit_components.uikit_framework_version'),
+      '#markup' => $uikit_version,
+    ];
+
+    $form['additional_menu_styles'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Enable configurable menu styles'),
+      '#description' => $this->t('Enable selecting menu styles when adding and editing <a href="/admin/structure/menu">menus</a>. This works for all menus using the <em class="placeholder">menu.html.twig</em> template and menu templates you have overriden in your theme, i.e. <em class="placeholder">menu--tools.html.twig</em>, <em class="placeholder">menu--admin.html.twig</em>, etc.'),
+      '#default_value' => $config->get('additional_menu_styles'),
     ];
 
     return $form;
@@ -52,4 +54,15 @@ class AdminForm extends ConfigFormBase {
     ];
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $config = \Drupal::service('config.factory')->getEditable('uikit_components.settings');
+    $config->set('additional_menu_styles', $form_state->getValue('additional_menu_styles'))->save();
+
+    // For good measure, flush all cache.
+    drupal_flush_all_caches();
+  }
+
 }
\ No newline at end of file

src/Form/MenuEditForm.php

+<?php
+
+namespace Drupal\uikit_components\Form;
+
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\menu_ui\MenuForm;
+use Drupal\uikit_components\UIkitComponents;
+
+/**
+ * Base form for menu edit forms.
+ */
+class MenuEditForm extends MenuForm {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function form(array $form, FormStateInterface $form_state) {
+    $form = parent::form($form, $form_state);
+
+    $t_args = [
+      ':accordion' => UIkitComponents::getComponentURL('accordion'),
+      ':list' => UIkitComponents::getComponentURL('list'),
+      ':nav' => UIkitComponents::getComponentURL('nav'),
+      ':subnav' => UIkitComponents::getComponentURL('subnav'),
+    ];
+
+    $description_links = [
+      $this->t('<a href=":accordion" target="_blank">Accordion</a>', $t_args),
+      $this->t('<a href=":list" target="_blank">List</a>', $t_args),
+      $this->t('<a href=":nav" target="_blank">Nav</a>', $t_args),
+      $this->t('<a href=":subnav" target="_blank">Subnav</a>', $t_args),
+    ];
+    $links = [
+      '#markup' => implode(', ', $description_links)
+    ];
+
+    $form['label']['#weight'] = -10;
+    $form['id']['#weight'] = -9;
+    $form['description']['#weight'] = -8;
+
+    $form['menu_style'] = [
+      '#type' => 'select',
+      '#title' => $this->t('UIkit menu style'),
+      '#description' => $this->t('<p>Select the UIkit component to set a default style for the menu. Some options will provide additional settings. Examples: @examples</p>', ['@examples' => render($links)]),
+      '#options' => [
+        'uk-accordion' => $this->t('Accordion'),
+        $this->t('List')->render() => [
+          'uk-list' => $this->t('Default list'),
+          'uk-list-bullet' => $this->t('Bullet list'),
+          'uk-list-divider' => $this->t('Divided list'),
+          'uk-list-striped' => $this->t('Striped list'),
+        ],
+        'uk-nav' => $this->t('Nav'),
+        $this->t('Subnav')->render() => [
+          'uk-subnav' => $this->t('Default subnav'),
+          'uk-subnav-divider' => $this->t('Divided subnav'),
+          'uk-subnav-pill' => $this->t('Pill subnav'),
+        ],
+      ],
+      '#empty_value' => '',
+      '#default_value' => UIkitComponents::getMenuStyle($this->entity->id()),
+      '#weight' => -7,
+    ];
+
+    $form['menu_style_list_large'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Large modifier'),
+      '#description' => $this->t('Check to increase the spacing between list items.'),
+      '#default_value' => UIkitComponents::getLargeList($this->entity->id()),
+      '#weight' => -6,
+      '#states' => array(
+        'visible' => [
+          [':input[name="menu_style"]' => ['value' => 'uk-list']],
+          'or',
+          [':input[name="menu_style"]' => ['value' => 'uk-list-bullet']],
+          'or',
+          [':input[name="menu_style"]' => ['value' => 'uk-list-divider']],
+          'or',
+          [':input[name="menu_style"]' => ['value' => 'uk-list-striped']],
+        ],
+      ),
+    ];
+
+    $form['menu_style_nav_style_modifiers'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Nav style modifiers'),
+      '#description' => $this->t('Select which nav style to use.'),
+      '#options' => [
+        'uk-nav-default' => $this->t('Default'),
+        'uk-nav-primary' => $this->t('Primary'),
+      ],
+      '#empty_value' => '',
+      '#default_value' => UIkitComponents::getNavStyleModifier($this->entity->id()),
+      '#weight' => -5,
+      '#states' => array(
+        'visible' => [
+          [':input[name="menu_style"]' => ['value' => 'uk-nav']],
+        ],
+      ),
+    ];
+
+    $form['menu_style_nav_center_modifier'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Nav center modifier'),
+      '#description' => $this->t('Select to center nav items.'),
+      '#default_value' => UIkitComponents::getNavCenterModifier($this->entity->id()),
+      '#weight' => -4,
+      '#states' => array(
+        'visible' => [
+          [':input[name="menu_style"]' => ['value' => 'uk-nav']],
+        ],
+      ),
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    UIkitComponents::setMenuStyle($this->entity->id(), $form_state->getValue('menu_style'));
+    UIkitComponents::setLargeList($this->entity->id(), $form_state->getValue('menu_style_list_large'));
+    UIkitComponents::setNavStyleModifier($this->entity->id(), $form_state->getValue('menu_style_nav_style_modifiers'));
+    UIkitComponents::setNavCenterModifier($this->entity->id(), $form_state->getValue('menu_style_nav_center_modifier'));
+  }
+
+}

src/UIkitComponents.php

@@ -100,4 +100,129 @@ class UIkitComponents {
       return FALSE;
     }
   }
+
+  /**
+   * Get the UIkit documentation URL for the given component.
+   *
+   * @param string $component
+   *   The component to return a URL for.
+   *
+   * @return string
+   *   Returns a URL for the given component.
+   */
+  public static function getComponentURL($component) {
+    if (!$component) {
+      drupal_set_message(t('URL cannot be returned, no component was given in <em class="placeholder">UIkitComponents::getComponentURL()</em>.'), 'warning');
+      return;
+    }
+    else {
+      $uri = 'https://getuikit.com/docs/' . $component;
+      return Url::fromUri($uri)->toString();
+    }
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @return bool
+   *   Returns menu style if already set, FALSE otherwise.
+   */
+  public static function getMenuStyle($menu) {
+    return \Drupal::state()->get($menu . '_menu_style') ?: 0;
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @param string $style
+   *   The style value to set for the menu.
+   */
+  public static function setMenuStyle($menu, $value) {
+    \Drupal::state()->set($menu . '_menu_style', $value);
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @return bool
+   *   Returns menu style if already set, FALSE otherwise.
+   */
+  public static function getLargeList($menu) {
+    return \Drupal::state()->get($menu . '_menu_style_list_large') ?: 0;
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @param string $style
+   *   The style value to set for the menu.
+   */
+  public static function setLargeList($menu, $value) {
+    \Drupal::state()->set($menu . '_menu_style_list_large', $value);
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @return bool
+   *   Returns menu style if already set, FALSE otherwise.
+   */
+  public static function getNavStyleModifier($menu) {
+    return \Drupal::state()->get($menu . '_menu_style_nav_style_modifiers') ?: 0;
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @param string $style
+   *   The style value to set for the menu.
+   */
+  public static function setNavStyleModifier($menu, $value) {
+    \Drupal::state()->set($menu . '_menu_style_nav_style_modifiers', $value);
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @return bool
+   *   Returns menu style if already set, FALSE otherwise.
+   */
+  public static function getNavCenterModifier($menu) {
+    return \Drupal::state()->get($menu . '_menu_style_nav_center_modifier') ?: 0;
+  }
+
+  /**
+   * Returns the menu style, if already set.
+   *
+   * @param string $menu
+   *   The name of the menu.
+   *
+   * @param string $style
+   *   The style value to set for the menu.
+   */
+  public static function setNavCenterModifier($menu, $value) {
+    \Drupal::state()->set($menu . '_menu_style_nav_center_modifier', $value);
+  }
+
 }

uikit_components.module

@@ -11,6 +11,8 @@
 use Drupal\Core\Url;
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Template\Attribute;
+use Drupal\uikit_components\UIkitComponents;
 
 /**
  * Implements hook_help().
@@ -39,6 +41,21 @@ function uikit_components_help($route_name, RouteMatchInterface $route_match) {
   return $output;
 }
 
+/**
+ * Implements hook_entity_type_alter().
+ */
+function uikit_components_entity_type_alter(array &$entity_types) {
+  $config = \Drupal::config('uikit_components.settings');
+
+  if ($config->get('additional_menu_styles')) {
+    // Replace form class for menu add/edit forms with our own form class.
+    /** @var $entity_types \Drupal\Core\Entity\EntityTypeInterface[] */
+    $entity_types['menu']
+      ->setFormClass('add', 'Drupal\uikit_components\Form\MenuEditForm')
+      ->setFormClass('edit', 'Drupal\uikit_components\Form\MenuEditForm');
+  }
+}
+
 /**
  * Implements hook_form_BASE_FORM_ID_alter().
  */
@@ -125,3 +142,49 @@ function uikit_components_form_block_form_builder($entity_type, Drupal\block\Ent
     $block->setThirdPartySetting('uikit_components', 'uikit_navbar_alignment', $form_state->getValue('uikit_navbar_alignment'));
   }
 }
+
+/**
+ * Implements hook_preprocess_menu().
+ */
+function uikit_components_preprocess_menu(&$variables) {
+  $menu_name = isset($variables['menu_name']) ? $variables['menu_name'] : FALSE;
+  $config = \Drupal::config('uikit_components.settings');
+
+  if ($menu_name && $config->get('additional_menu_styles')) {
+    $menu_style = UIkitComponents::getMenuStyle($menu_name);
+
+    if ($menu_style) {
+      $lists = [
+        'uk-list',
+        'uk-list-bullet',
+        'uk-list-divider',
+        'uk-list-striped',
+      ];
+
+      $subnavs = [
+        'uk-subnav',
+        'uk-subnav-divider',
+        'uk-subnav-pill',
+      ];
+
+      $attributes = new Attribute();
+      $attributes->setAttribute('id', 'menu--' . str_replace('_', '-', $menu_name));
+
+      if (in_array($menu_style, $lists)) {
+        $attributes->addClass('uk-list');
+      }
+
+      if (in_array($menu_style, $subnavs)) {
+        $attributes->addClass('uk-subnav');
+      }
+
+      $attributes->addClass($menu_style);
+
+      if (in_array($menu_style, $lists) && UIkitComponents::getLargeList($menu_name)) {
+        $attributes->addClass('uk-list-large');
+      }
+
+      $variables['attributes'] = $attributes;
+    }
+  }
+}