Plugins

Move Content

A simple component that moves content from a container to another by a breakpoint. It prevents manual duplication and quite practical to move an in page menu into a dropdown menu or modal for small screens.

Example

Javascript

if (document.querySelector('#settingsMoveContent') && typeof MoveContent !== 'undefined') {
  const menuMove = document.querySelector('#settingsMoveContent');
  const targetSelectorMenu = menuMove.getAttribute('data-move-target');
  const moveBreakpointMenu = menuMove.getAttribute('data-move-breakpoint');
  const menuMoveContent = new MoveContent(menuMove, {
    targetSelector: targetSelectorMenu,
    moveBreakpoint: moveBreakpointMenu,
  });
}

Html

<!-- Content of this will be moved from #settingsMoveContent div based on the responsive breakpoint.  -->
<div class="nav flex-column sw-25 mt-n2" id="settingsColumn">
</div>

<!-- Content of this will stay here when the screen size is smaller than lg. When it is larger than lg, it will be moved to data-move-target destination  -->
<div id="settingsMoveContent" data-move-target="#settingsColumn" data-move-breakpoint="lg">
  <div class="mb-2">
    <a class="nav-link active px-0" href="#">
      <i data-acorn-icon="activity" class="me-2" data-acorn-size="17"></i>
      <span class="align-middle">Profile</span>
    </a>
    <div>
      <a class="nav-link active py-1 my-1 px-0" href="#">
        <i class="me-2 sw-2 d-inline-block"></i>
        <span class="align-middle">Personal</span>
      </a>
      <a class="nav-link py-1 my-1 px-0" href="#">
        <i class="me-2 sw-2 d-inline-block"></i>
        <span class="align-middle">Friends</span>
      </a>
      <a class="nav-link py-1 my-1 px-0" href="#">
        <i class="me-2 sw-2 d-inline-block"></i>
        <span class="align-middle">Account</span>
      </a>
    </div>
  </div>
</div>

Reference

NAME
TYPE
DEFAULT
DESCRIPTION
NAME
element
TYPE
DOM Element
DEFAULT
null
DESCRIPTION
Container of the content which will contain elements when screen size is smaller than the breakpoint.
NAME
options.targetSelector
TYPE
string
DEFAULT
" "
DESCRIPTION
Selector for the target in which the content will be moved when the screen size is larger than breakpoint
NAME
options.moveBreakpoint
TYPE
string
DEFAULT
" "
DESCRIPTION
The breakpoint where content will change it's container. Accepted values are: sm, md, lg, xl, xxl
NAME
options.beforeMove
TYPE
function
DEFAULT
null
DESCRIPTION
A callback function which is called before move happens.
NAME
options.afterMove
TYPE
function
DEFAULT
null
DESCRIPTION
A callback function which is called after move happens.

More Examples

You may find a working version in Pages.Profile.Settings.html file which is initialized by js/pages/profile.settings.js.