katalyst-navigation 1.0.0

data/app/assets/javascripts/utils/navigation/editor/rules-engine.js

@@ -0,0 +1,140 @@
+export default class RulesEngine {
+  static rules = [
+    "denyDeNest",
+    "denyNest",
+    "denyCollapse",
+    "denyExpand",
+    "denyRemove",
+    "denyDrag",
+    "denyEdit",
+    "invalidDepth",
+  ];
+
+  /**
+   * Apply rules to the given item by computing a ruleset then merging it
+   * with the item's current state.
+   *
+   * @param {Item} item
+   */
+  update(item) {
+    this.rules = {};
+
+    this.firstItemDepthZero(item);
+    this.depthMustBeSet(item);
+    this.parentsCannotDeNest(item);
+    this.rootsCannotDeNest(item);
+    this.nestingNeedsParent(item);
+    this.leavesCannotCollapse(item);
+    this.needHiddenItemsToExpand(item);
+    this.parentsCannotBeDeleted(item);
+    this.parentsCannotBeDragged(item);
+    this.itemCannotHaveInvalidDepth(item);
+
+    RulesEngine.rules.forEach((rule) => {
+      item.toggleRule(rule, !!this.rules[rule]);
+    });
+  }
+
+  /**
+   * First item can't have a parent, so its depth should always be 0
+   */
+  firstItemDepthZero(item) {
+    if (item.index === 0) {
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * Every item should have a non-negative depth set.
+   *
+   * @param {Item} item
+   */
+  depthMustBeSet(item) {
+    if (isNaN(item.depth) || item.depth < 0) {
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * De-nesting an item would create a gap of 2 between itself and its children
+   *
+   * @param {Item} item
+   */
+  parentsCannotDeNest(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDeNest");
+  }
+
+  /**
+   * Item depth can't go below 0.
+   *
+   * @param {Item} item
+   */
+  rootsCannotDeNest(item) {
+    if (item.depth === 0) this.#deny("denyDeNest");
+  }
+
+  /**
+   * If an item doesn't have children it can't be collapsed.
+   *
+   * @param {Item} item
+   */
+  leavesCannotCollapse(item) {
+    if (!item.hasExpandedDescendants()) this.#deny("denyCollapse");
+  }
+
+  /**
+   * If an item doesn't have any hidden descendants then it can't be expanded.
+   *
+   * @param {Item} item
+   */
+  needHiddenItemsToExpand(item) {
+    if (!item.hasCollapsedDescendants()) this.#deny("denyExpand");
+  }
+
+  /**
+   * An item can't be nested (indented) if it doesn't have a valid parent.
+   *
+   * @param {Item} item
+   */
+  nestingNeedsParent(item) {
+    const previous = item.previousItem;
+    if (!previous || previous.depth < item.depth) this.#deny("denyNest");
+  }
+
+  /**
+   * An item can't be deleted if it has visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDeleted(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyRemove");
+  }
+
+  /**
+   * Items cannot be dragged if they have visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDragged(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDrag");
+  }
+
+  /**
+   * Depth must increase stepwise.
+   *
+   * @param {Item} item
+   */
+  itemCannotHaveInvalidDepth(item) {
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth - 1) this.#deny("invalidDepth");
+  }
+
+  /**
+   * Record a deny.
+   *
+   * @param rule {String}
+   */
+  #deny(rule) {
+    this.rules[rule] = true;
+  }
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_icon.scss

@@ -0,0 +1,17 @@
+%icon-block {
+  display: block;
+  cursor: pointer;
+  position: relative;
+  padding: 0.65rem;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+}
+
+%icon {
+  position: absolute;
+  content: "";
+  width: 1.2rem;
+  height: 1.2rem;
+  background-repeat: no-repeat;
+  background-position: center;
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_index.scss

@@ -0,0 +1,145 @@
+@use "icon";
+
+@use "item-actions";
+@use "item-rules";
+@use "new-items";
+@use "status-bar";
+
+$grey-light: #f4f4f4 !default;
+$grey: #ececec !default;
+$grey-dark: #999 !default;
+$table-hover-background: #fff0eb !default;
+$primary-color: #ff521f !default;
+
+$row-inset: 2rem !default;
+$row-height: 3rem !default;
+
+$table-header-color: $grey !default;
+$row-background-color: $grey-light !default;
+$row-hover-color: $table-hover-background !default;
+$icon-active-color: $primary-color !default;
+$icon-passive-color: $grey-dark !default;
+
+$status-published-background-color: #ebf9eb !default;
+$status-published-border-color: #4dd45c !default;
+$status-published-color: #4dd45c !default;
+
+$status-draft-background-color: #fefaf3 !default;
+$status-draft-border-color: #ffa800 !default;
+$status-draft-color: #ffa800 !default;
+
+$status-dirty-background-color: #eee !default;
+$status-dirty-border-color: #888 !default;
+$status-dirty-color: #aaa !default;
+
+[data-controller="navigation--editor--menu"] {
+  --row-height: #{$row-height};
+  --row-inset: #{$row-inset};
+  --table-header-color: #{$table-header-color};
+  --row-background-color: #{$row-background-color};
+  --row-hover-color: #{$row-hover-color};
+  --icon-active-color: #{$icon-active-color};
+  --icon-passive-color: #{$icon-passive-color};
+
+  ol,
+  li {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: 0;
+    list-style: none;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+}
+
+[data-controller="navigation--editor--list"] {
+  min-height: var(--row-height);
+
+  // tree items
+  & > li {
+    display: block;
+    min-height: var(--row-height);
+
+    // https://github.com/react-dnd/react-dnd/issues/832
+    transform: translate3d(0, 0, 0);
+
+    // Pinstripe effect
+    &:nth-of-type(even) {
+      background: var(--row-background-color);
+    }
+
+    &:hover {
+      background: var(--row-hover-color);
+    }
+
+    &[draggable] {
+      cursor: grab;
+    }
+
+    // Dragged visuals
+    &[data-dragging] {
+      border: 2px dashed;
+
+      > * {
+        visibility: hidden;
+      }
+    }
+
+    // Depth spacing
+    @for $i from 1 through 6 {
+      &[data-navigation-depth="#{$i}"] .tree {
+        padding-left: calc(var(--row-inset) * #{$i});
+      }
+    }
+
+    .tree {
+      display: flex;
+      align-items: center;
+    }
+
+    .title,
+    .url {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  }
+}
+
+[data-controller="navigation--editor--menu"] [role="rowheader"],
+[data-controller="navigation--editor--item"] {
+  display: grid;
+  grid-template-columns: 40% 2fr auto;
+  padding: 0.25rem 0.5rem;
+  gap: 1rem;
+  align-items: center;
+}
+
+// Ensures vertical alignment of header with rows
+[data-controller="navigation--editor-menu"] {
+  [role="rowheader"] {
+    min-height: var(--row-height);
+    background: var(--table-header-color);
+    padding-inline: 1.25rem 1rem;
+  }
+}
+
+[data-controller="navigation--editor--status-bar"] {
+  --background: #{$status-published-background-color};
+  --color: #{$status-published-border-color};
+  --border: #{$status-published-color};
+
+  &[data-state="draft"] {
+    --background: #{$status-draft-background-color};
+    --color: #{$status-draft-border-color};
+    --border: #{$status-draft-color};
+  }
+
+  &[data-state="dirty"] {
+    --background: #{$status-dirty-background-color};
+    --color: #{$status-dirty-border-color};
+    --border: #{$status-dirty-color};
+  }
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_item-actions.scss

@@ -0,0 +1,92 @@
+@use "icon" as *;
+
+[data-controller="navigation--editor--item"] {
+  [data-tree-accordion-controls] {
+    min-width: 2.5rem;
+    min-height: 2.5rem;
+    display: grid;
+  }
+
+  [data-tree-controls] {
+    display: flex;
+    align-items: center;
+  }
+
+  [data-tree-accordion-controls],
+  [data-tree-controls] {
+    [role="button"] {
+      @extend %icon-block;
+      &::before {
+        @extend %icon;
+      }
+    }
+  }
+
+  [role="img"][value="link"],
+  [role="img"][value="title"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: grid;
+    place-items: center;
+    border-radius: 2px;
+    background: var(--icon-active-color);
+    margin-right: 0.5rem;
+
+    [data-invisible="true"] & {
+      background: var(--icon-passive-color);
+    }
+
+    &::before {
+      @extend %icon;
+      color: white;
+      font-size: 1.125rem;
+      line-height: 1.125rem;
+      text-align: center;
+    }
+
+    &[value="link"] {
+      &::before {
+        content: "#";
+      }
+    }
+
+    &[value="title"] {
+      &::before {
+        content: "T";
+      }
+    }
+  }
+
+  [role="img"][value="invisible"] {
+    @extend %icon-block;
+
+    &::before {
+      @extend %icon;
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_58_2189)'%3E%3Cpath d='M22.1699 0.329991C21.7304 -0.109509 21.0179 -0.109509 20.5784 0.329991L15.8399 5.06849C14.6219 4.69949 13.3334 4.50149 11.9984 4.50149C6.76494 4.50149 2.22744 7.54949 -0.00156052 12.0015C0.962939 13.926 2.35794 15.588 4.05294 16.8555L0.326939 20.5815C-0.112561 21.021 -0.112561 21.7335 0.326939 22.173C0.545939 22.392 0.833939 22.503 1.12194 22.503C1.40994 22.503 1.69794 22.3935 1.91694 22.173L22.1669 1.92299C22.6064 1.48349 22.6064 0.770991 22.1669 0.331491L22.1699 0.329991ZM9.74994 7.49999C10.7399 7.49999 11.5799 8.13899 11.8814 9.02849L9.02844 11.8815C8.14044 11.58 7.49994 10.74 7.49994 9.74999C7.49994 8.50799 8.50794 7.49999 9.74994 7.49999ZM2.58144 12C3.47844 10.581 4.67394 9.37649 6.08394 8.47799C6.17544 8.41949 6.26844 8.36249 6.36144 8.30699C6.12744 8.94749 5.99994 9.63899 5.99994 10.3605C5.99994 11.6475 6.40494 12.8385 7.09494 13.815L5.66694 15.243C4.43844 14.379 3.38844 13.2765 2.58144 12V12Z' fill='%2358607A'/%3E%3Cpath d='M18.0001 10.3589C18.0001 9.72295 17.9011 9.10945 17.7166 8.53345L10.1746 16.0754C10.7506 16.2599 11.3641 16.3589 12.0001 16.3589C15.3136 16.3589 18.0001 13.6724 18.0001 10.3589V10.3589Z' fill='%2358607A'/%3E%3Cpath d='M19.4536 6.79651L17.8276 8.42251C17.8576 8.44051 17.8876 8.45851 17.9161 8.47801C19.3261 9.37801 20.5216 10.5825 21.4186 12C20.5216 13.419 19.3261 14.6235 17.9161 15.522C16.1446 16.6515 14.0986 17.25 12.0001 17.25C11.0941 17.25 10.1971 17.139 9.3286 16.9215L7.5271 18.723C8.9266 19.2255 10.4326 19.5 12.0001 19.5C17.2336 19.5 21.7711 16.452 24.0001 12C22.9456 9.89251 21.3721 8.10001 19.4536 6.79651V6.79651Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_58_2189'%3E%3Crect width='24' height='24' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+    }
+  }
+
+  [role="button"][value="collapse"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M15 8.33333L13.825 7.15833L10 10.975L6.175 7.15833L5 8.33333L10 13.3333L15 8.33333Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white' transform='translate(20) rotate(90)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="expand"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M8.3332 5L7.1582 6.175L10.9749 10L7.1582 13.825L8.3332 15L13.3332 10L8.3332 5Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="de-nest"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M11.6668 15L12.8418 13.825L9.02513 10L12.8418 6.175L11.6668 5L6.6668 10L11.6668 15Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white' transform='translate(20 20) rotate(180)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="nest"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1454)'%3E%3Cpath d='M8.3332 5L7.1582 6.175L10.9749 10L7.1582 13.825L8.3332 15L13.3332 10L8.3332 5Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1454'%3E%3Crect width='20' height='20' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="edit"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1406)'%3E%3Cpath d='M2.25 12.9375V15.75H5.0625L13.3575 7.45504L10.545 4.64254L2.25 12.9375ZM15.5325 5.28004C15.825 4.98754 15.825 4.51504 15.5325 4.22254L13.7775 2.46754C13.485 2.17504 13.0125 2.17504 12.72 2.46754L11.3475 3.84004L14.16 6.65254L15.5325 5.28004V5.28004Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1406'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+
+  [role="button"][value="remove"]::before {
+    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_50_1409)'%3E%3Cpath d='M4.5 14.25C4.5 15.075 5.175 15.75 6 15.75H12C12.825 15.75 13.5 15.075 13.5 14.25V5.25H4.5V14.25ZM14.25 3H11.625L10.875 2.25H7.125L6.375 3H3.75V4.5H14.25V3Z' fill='%2358607A'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_50_1409'%3E%3Crect width='18' height='18' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
+  }
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_item-rules.scss

@@ -0,0 +1,24 @@
+[data-controller="navigation--editor--list"] {
+  // Lower opacity for buttons you can't use
+  [data-deny-de-nest] [role="button"][value="de-nest"],
+  [data-deny-nest] [role="button"][value="nest"],
+  [data-deny-remove] [role="button"][value="remove"],
+  [data-deny-drag] [role="button"][value="drag"],
+  [data-deny-edit] [role="button"][value="edit"] {
+    opacity: 0.2;
+    pointer-events: none;
+  }
+
+  // Only show 1 of the collapse / expand button
+  [data-deny-collapse] [role="button"][value="collapse"],
+  [data-deny-expand] [role="button"][value="expand"],
+  [data-invisible="false"] [role="img"][value="invisible"] {
+    display: none !important;
+    pointer-events: none;
+  }
+
+  [data-invalid-depth] {
+    border-color: red;
+    background-color: indianred;
+  }
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_new-items.scss

@@ -0,0 +1,22 @@
+@use "icon" as *;
+
+.navigation--editor--new-items {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.25rem;
+
+  [role="listitem"] {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    transform: translate3d(0, 0, 0);
+    cursor: grab;
+
+    &::before {
+      @extend %icon;
+      position: unset;
+      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 3.66667V13.3333C16 14.8 14.6909 16 13.0909 16H7.78182C6.99636 16 6.25455 15.7133 5.70909 15.2067L0 9.88667C0 9.88667 0.916364 9.06667 0.945455 9.05333C1.10545 8.92667 1.30182 8.86 1.52 8.86C1.68 8.86 1.82545 8.9 1.95636 8.96667C1.98545 8.97333 5.09091 10.6067 5.09091 10.6067V2.66667C5.09091 2.11333 5.57818 1.66667 6.18182 1.66667C6.78545 1.66667 7.27273 2.11333 7.27273 2.66667V7.33333H8V1C8 0.446667 8.48727 0 9.09091 0C9.69455 0 10.1818 0.446667 10.1818 1V7.33333H10.9091V1.66667C10.9091 1.11333 11.3964 0.666667 12 0.666667C12.6036 0.666667 13.0909 1.11333 13.0909 1.66667V7.33333H13.8182V3.66667C13.8182 3.11333 14.3055 2.66667 14.9091 2.66667C15.5127 2.66667 16 3.11333 16 3.66667Z' fill='white'/%3E%3C/svg%3E");
+    }
+  }
+}

data/app/assets/stylesheets/katalyst/navigation/editor/_status-bar.scss

@@ -0,0 +1,87 @@
+[data-controller="navigation--editor--status-bar"] {
+  min-height: 3rem;
+  line-height: 3rem;
+  padding: 0 1.25rem 0 1.5rem;
+  background: var(--background);
+  color: var(--color);
+  border: 1px solid var(--border);
+  margin-bottom: 1rem;
+
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "status actions";
+  align-items: baseline;
+  grid-column-gap: 2rem;
+
+  .status-text {
+    display: none;
+    grid-area: status;
+    font-weight: bold;
+  }
+
+  &[data-state="published"] .status-text[data-published],
+  &[data-state="draft"] .status-text[data-draft],
+  &[data-state="dirty"] .status-text[data-dirty] {
+    display: unset;
+  }
+
+  menu {
+    display: inline;
+    grid-area: actions;
+    margin: 0;
+    padding: 0;
+  }
+
+  menu > li {
+    display: inline;
+  }
+
+  .button {
+    color: inherit;
+    line-height: 1rem;
+    margin-left: 0.5rem;
+  }
+
+  .button--primary {
+    background: var(--color);
+    border: 1px solid var(--border);
+    color: white;
+
+    &[disabled] {
+      background: var(--color);
+      opacity: 0.8;
+    }
+  }
+
+  .button--secondary {
+    background: var(--background);
+    border: 1px solid var(--border);
+    color: var(--color);
+
+    &[disabled] {
+      background: var(--background);
+    }
+  }
+
+  &[data-state="published"] {
+    [value="publish"],
+    [value="save"],
+    [value="revert"],
+    [value="discard"] {
+      display: none;
+    }
+  }
+
+  &[data-state="draft"] {
+    [value="save"],
+    [value="discard"] {
+      display: none;
+    }
+  }
+
+  &[data-state="dirty"] {
+    [value="revert"] {
+      display: none;
+    }
+  }
+}

data/app/controllers/katalyst/navigation/base_controller.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    class BaseController < ActionController::Base
+      include Katalyst::Tables::Backend
+
+      helper Katalyst::Navigation::EditorHelper
+      helper Katalyst::Tables::Frontend
+    end
+  end
+end

data/app/controllers/katalyst/navigation/items_controller.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    class ItemsController < BaseController
+      before_action :set_menu
+      before_action :set_item, except: %i[new create]
+
+      def new
+        render locals: { item: @menu.items.build(type: new_item_params) }
+      end
+
+      def create
+        item = @menu.items.build(item_params)
+        if item.save
+          render :update, locals: { item: item, previous: @menu.items.build(type: item.type) }
+        else
+          render :new, status: :unprocessable_entity, locals: { item: item }
+        end
+      end
+
+      def edit
+        render locals: { item: @item }
+      end
+
+      def update
+        @item.attributes = item_params
+
+        if @item.valid?
+          previous = @item
+          @item    = @item.dup.tap(&:save!)
+          render locals: { item: @item, previous: previous }
+        else
+          render :edit, status: :unprocessable_entity, locals: { item: @item }
+        end
+      end
+
+      private
+
+      def new_item_params
+        params[:type] || Link.name
+      end
+
+      def item_params
+        params.require(:item).permit(%i[title url visible http_method new_tab type])
+      end
+
+      def set_menu
+        @menu = Menu.find(params[:menu_id])
+      end
+
+      def set_item
+        @item = @menu.items.find(params[:id])
+      end
+    end
+  end
+end

data/app/controllers/katalyst/navigation/menus_controller.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Katalyst
+  module Navigation
+    class MenusController < BaseController
+      def index
+        sort, menus = table_sort(Menu.all)
+
+        render locals: { menus: menus, sort: sort }
+      end
+
+      def new
+        render locals: { menu: Menu.new }
+      end
+
+      def create
+        @menu = Menu.new(menu_params)
+
+        if @menu.save
+          redirect_to @menu
+        else
+          render :new, locals: { menu: @menu }, status: :unprocessable_entity
+        end
+      end
+
+      def show
+        menu = Menu.find(params[:id])
+
+        render locals: { menu: menu }
+      end
+
+      def edit
+        menu = Menu.find(params[:id])
+
+        render locals: { menu: menu }
+      end
+
+      # PATCH /admins/navigation_menus/:slug
+      def update
+        menu = Menu.find(params[:id])
+
+        menu.attributes = navigation_params
+
+        unless menu.valid?
+          return render :show, locals: { menu: menu }, status: :unprocessable_entity
+        end
+
+        case params[:commit]
+        when "publish"
+          menu.save!
+          menu.publish!
+        when "save"
+          menu.save!
+        when "revert"
+          menu.revert!
+        end
+        redirect_to menu
+      end
+
+      def destroy
+        menu = Menu.find(params[:id])
+
+        menu.destroy!
+
+        redirect_to action: :index
+      end
+
+      private
+
+      def menu_params
+        params.require(:menu).permit(:title, :slug)
+      end
+
+      def navigation_params
+        return {} if params[:menu].blank?
+
+        params.require(:menu)
+          .permit(:title, :slug, items_attributes: %i[id index depth])
+      end
+    end
+  end
+end