diff --git a/build/js/AdminLTE.js b/build/js/AdminLTE.js
index 7f854ddf1..a6906ca98 100644
--- a/build/js/AdminLTE.js
+++ b/build/js/AdminLTE.js
@@ -5,6 +5,7 @@ import DirectChat from './DirectChat'
import Dropdown from './Dropdown'
import ExpandableTable from './ExpandableTable'
import Fullscreen from './Fullscreen'
+import IFrame from './IFrame'
import Layout from './Layout'
import PushMenu from './PushMenu'
import SidebarSearch from './SidebarSearch'
@@ -20,6 +21,7 @@ export {
Dropdown,
ExpandableTable,
Fullscreen,
+ IFrame,
Layout,
PushMenu,
SidebarSearch,
diff --git a/build/js/IFrame.js b/build/js/IFrame.js
new file mode 100644
index 000000000..427db6c59
--- /dev/null
+++ b/build/js/IFrame.js
@@ -0,0 +1,142 @@
+/**
+ * --------------------------------------------
+ * AdminLTE IFrame.js
+ * License MIT
+ * --------------------------------------------
+ */
+
+import $ from 'jquery'
+
+/**
+ * Constants
+ * ====================================================
+ */
+
+const NAME = 'IFrame'
+const DATA_KEY = 'lte.iframe'
+const JQUERY_NO_CONFLICT = $.fn[NAME]
+
+const SELECTOR_DATA_TOGGLE = '[data-widget="iframe"]'
+const SELECTOR_CONTENT_WRAPPER = '.content-wrapper'
+const SELECTOR_CONTENT_IFRAME = `${SELECTOR_CONTENT_WRAPPER} iframe`
+const SELECTOR_TAB_NAVBAR_NAV = `${SELECTOR_DATA_TOGGLE}.iframe-mode .navbar-nav`
+const SELECTOR_TAB_CONTENT = `${SELECTOR_DATA_TOGGLE}.iframe-mode .tab-content`
+const SELECTOR_SIDEBAR_MENU_ITEM = '.main-sidebar .nav-item a.nav-link'
+const CLASS_NAME_IFRAME_MODE = 'iframe-mode'
+
+const Default = {
+ click(item) {
+ return item
+ },
+ changed(item) {
+ return item
+ }
+}
+
+/**
+ * Class Definition
+ * ====================================================
+ */
+
+class IFrame {
+ constructor(element, config) {
+ this._config = config
+ this._element = element
+
+ this._init()
+ }
+
+ // Public
+
+ click(item) {
+ this._config.click.call(item)
+ }
+
+ changed(item) {
+ this._config.changed.call(item)
+ }
+
+ createTab(title, link) {
+ const tabId = `panel-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
+ const navId = `tab-${link.replace('.html', '').replace('./', '').replace('/', '-')}-${Math.floor(Math.random() * 1000)}`
+
+ const newNavItem = `${title}`
+ $(SELECTOR_TAB_NAVBAR_NAV).append(newNavItem)
+
+ const newTabItem = ``
+ $(SELECTOR_TAB_CONTENT).append(newTabItem)
+
+ // eslint-disable-next-line no-console
+ console.log($(SELECTOR_TAB_CONTENT))
+ }
+
+ openTabSidebar(item) {
+ const title = $(item).find('p').text()
+ const link = $(item).attr('href')
+
+ this.createTab(title, link)
+ }
+
+ // Private
+
+ _init() {
+ if ($(SELECTOR_CONTENT_WRAPPER).hasClass(CLASS_NAME_IFRAME_MODE)) {
+ this._setupListeners()
+ $(SELECTOR_TAB_NAVBAR_NAV)
+
+ $(SELECTOR_CONTENT_IFRAME).height($(SELECTOR_CONTENT_WRAPPER).height())
+ }
+ }
+
+ _setupListeners() {
+ $(document).on('click', SELECTOR_SIDEBAR_MENU_ITEM, e => {
+ e.preventDefault()
+ this.openTabSidebar(e.target)
+ })
+ }
+
+ // Static
+
+ static _jQueryInterface(operation) {
+ let data = $(this).data(DATA_KEY)
+ const _options = $.extend({}, Default, $(this).data())
+
+ if (!data) {
+ data = new IFrame(this, _options)
+ $(this).data(DATA_KEY, data)
+ }
+
+ if (typeof operation === 'string' && operation.match(/openTabSidebar/)) {
+ data[operation]()
+ }
+ }
+}
+
+/**
+ * Data API
+ * ====================================================
+ */
+
+$(window).on('load', () => {
+ const gfg = window.frameElement
+
+ if (gfg) {
+ document.body.classList.add(CLASS_NAME_IFRAME_MODE)
+ } else {
+ IFrame._jQueryInterface.call($(SELECTOR_DATA_TOGGLE))
+ }
+})
+
+/**
+ * jQuery API
+ * ====================================================
+ */
+
+$.fn[NAME] = IFrame._jQueryInterface
+$.fn[NAME].Constructor = IFrame
+$.fn[NAME].noConflict = function () {
+ $.fn[NAME] = JQUERY_NO_CONFLICT
+ return IFrame._jQueryInterface
+}
+
+export default IFrame
diff --git a/build/scss/pages/_iframe.scss b/build/scss/pages/_iframe.scss
new file mode 100644
index 000000000..88b446ad2
--- /dev/null
+++ b/build/scss/pages/_iframe.scss
@@ -0,0 +1,24 @@
+body.iframe-mode {
+ .main-sidebar {
+ display: none;
+ }
+ .content-wrapper {
+ margin-left: 0 !important;
+ }
+ .main-header,
+ .main-footer {
+ display: none;
+ }
+}
+
+.content-wrapper {
+ height: 100%;
+
+ &.iframe-mode {
+ iframe {
+ border: 0;
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
diff --git a/build/scss/parts/_pages.scss b/build/scss/parts/_pages.scss
index 7e6535895..0871a4b37 100644
--- a/build/scss/parts/_pages.scss
+++ b/build/scss/parts/_pages.scss
@@ -10,3 +10,4 @@
@import "../pages/profile";
@import "../pages/e-commerce";
@import "../pages/projects";
+@import "../pages/iframe";
diff --git a/iframe.html b/iframe.html
new file mode 100644
index 000000000..0806663e6
--- /dev/null
+++ b/iframe.html
@@ -0,0 +1,855 @@
+
+
+
+
+
+ AdminLTE 3 | Dashboard
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+