diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts index 5e00f2309252..4afc04e9c771 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts @@ -750,7 +750,8 @@ describe('EditEmaEditorComponent', () => { data: { action: CLIENT_ACTIONS.REORDER_MENU, payload: { - reorderUrl: 'http://localhost:3000/reorder-menu' + startLevel: 1, + depth: 2 } } }) @@ -825,7 +826,8 @@ describe('EditEmaEditorComponent', () => { data: { action: CLIENT_ACTIONS.REORDER_MENU, payload: { - reorderUrl: 'http://localhost:3000/reorder-menu' + startLevel: 1, + depth: 2 } } }) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts index 7625cf1cb97e..a4b3e59db21e 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.ts @@ -75,15 +75,16 @@ import { VTLFile, DeletePayload, InsertPayloadFromDelete, - ReorderPayload, DialogAction, - PostMessage + PostMessage, + ReorderMenuPayload } from '../shared/models'; import { UVEStore } from '../store/dot-uve.store'; import { ClientRequestProps } from '../store/features/client/withClient'; import { SDK_EDITOR_SCRIPT_SOURCE, TEMPORAL_DRAG_ITEM, + createReorderMenuURL, compareUrlPaths, deleteContentletFromContainer, getDragItemData, @@ -796,6 +797,15 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { this.uveStore.reload(); this.dialog.resetDialog(); + + // This is a temporary solution to "reload" the content by reloading the window + // we should change this with a new SDK reload strategy + this.contentWindow?.postMessage( + { + name: NOTIFY_CLIENT.UVE_RELOAD_PAGE + }, + this.host + ); }, [NG_CUSTOM_EVENTS.ERROR_SAVING_MENU_ORDER]: () => { this.messageService.add({ @@ -990,9 +1000,16 @@ export class EditEmaEditorComponent implements OnInit, OnDestroy { [CLIENT_ACTIONS.EDIT_CONTENTLET]: (contentlet: DotCMSContentlet) => { this.dialog.editContentlet({ ...contentlet, clientAction: action }); }, - [CLIENT_ACTIONS.REORDER_MENU]: ({ reorderUrl }: ReorderPayload) => { + [CLIENT_ACTIONS.REORDER_MENU]: ({ startLevel, depth }: ReorderMenuPayload) => { + const urlObject = createReorderMenuURL({ + startLevel, + depth, + pagePath: this.uveStore.params().url, + hostId: this.uveStore.pageAPIResponse().site.identifier + }); + this.dialog.openDialogOnUrl( - reorderUrl, + urlObject, this.dotMessageService.get('editpage.content.contentlet.menu.reorder.title') ); }, diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts index 721a2451c10b..35997aac5ba3 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/shared/models.ts @@ -240,3 +240,8 @@ export interface PostMessage { action: CLIENT_ACTIONS; payload: unknown; } + +export interface ReorderMenuPayload { + startLevel: number; + depth: number; +} diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts index 454291d9b337..0ff707260159 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/index.ts @@ -24,6 +24,9 @@ import { export const SDK_EDITOR_SCRIPT_SOURCE = '/html/js/editor-js/sdk-editor.js'; +const REORDER_MENU_BASE_URL = + 'c/portal/layout?p_l_id=2df9f117-b140-44bf-93d7-5b10a36fb7f9&p_p_id=site-browser&p_p_action=1&p_p_state=maximized&_site_browser_struts_action=%2Fext%2Ffolders%2Forder_menu'; + export const TEMPORAL_DRAG_ITEM: EmaDragItem = { baseType: 'dotAsset', contentType: 'dotAsset', @@ -510,3 +513,46 @@ export const getDragItemData = ({ type, item }: DOMStringMap) => { return null; } }; + +/** + * Adds missing query parameters `pagePath` and `hostId` to the given URL if they are not already present. + * + * @param {Object} params - The parameters object. + * @param {string} params.url - The URL to which the parameters will be added. + * @param {string} params.pagePath - The page path to be added as a query parameter if missing. + * @param {string} params.hostId - The host ID to be added as a query parameter if missing. + * @returns {string} - The updated URL with the missing parameters added. + */ +export const createReorderMenuURL = ({ + startLevel, + depth, + pagePath, + hostId +}: { + startLevel: number; + depth: number; + pagePath: string; + hostId: string; +}) => { + const urlObject = new URL(REORDER_MENU_BASE_URL, window.location.origin); + + const params = urlObject.searchParams; + + if (!params.has('startLevel')) { + params.set('startLevel', startLevel.toString()); + } + + if (!params.has('depth')) { + params.set('depth', depth.toString()); + } + + if (!params.has('pagePath')) { + params.set('pagePath', pagePath); + } + + if (!params.has('hostId')) { + params.set('hostId', hostId); + } + + return urlObject.toString(); +}; diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts index 9415046598f4..30fa12e16945 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/utils/utils.spec.ts @@ -15,7 +15,8 @@ import { areContainersEquals, compareUrlPaths, createFullURL, - getDragItemData + getDragItemData, + createReorderMenuURL } from '.'; import { dotPageContainerStructureMock } from '../shared/mocks'; @@ -709,4 +710,19 @@ describe('utils functions', () => { expect(result).toBeNull(); }); }); + + describe('createReorderMenuURL', () => { + it('should create the correct URL', () => { + const result = createReorderMenuURL({ + startLevel: 1, + depth: 1, + pagePath: '123', + hostId: '456' + }); + + expect(result).toEqual( + 'http://localhost/c/portal/layout?p_l_id=2df9f117-b140-44bf-93d7-5b10a36fb7f9&p_p_id=site-browser&p_p_action=1&p_p_state=maximized&_site_browser_struts_action=%2Fext%2Ffolders%2Forder_menu&startLevel=1&depth=1&pagePath=123&hostId=456' + ); + }); + }); }); diff --git a/core-web/libs/sdk/client/src/index.ts b/core-web/libs/sdk/client/src/index.ts index d95a975f1375..a9a64c13fb60 100644 --- a/core-web/libs/sdk/client/src/index.ts +++ b/core-web/libs/sdk/client/src/index.ts @@ -9,6 +9,7 @@ import { NOTIFY_CLIENT } from './lib/editor/models/listeners.model'; import { destroyEditor, editContentlet, + reorderMenu, initEditor, isInsideEditor, updateNavigation @@ -20,6 +21,7 @@ export { getPageRequestParams, isInsideEditor, editContentlet, + reorderMenu, DotCmsClient, DotCMSPageEditorConfig, CLIENT_ACTIONS, diff --git a/core-web/libs/sdk/client/src/lib/editor/models/client.model.ts b/core-web/libs/sdk/client/src/lib/editor/models/client.model.ts index 67f8094f2bd5..85955e290dfd 100644 --- a/core-web/libs/sdk/client/src/lib/editor/models/client.model.ts +++ b/core-web/libs/sdk/client/src/lib/editor/models/client.model.ts @@ -1,4 +1,4 @@ -import { editContentlet } from '../sdk-editor'; +import { editContentlet, reorderMenu } from '../sdk-editor'; declare global { interface Window { dotUVE: DotUVE; @@ -7,6 +7,7 @@ declare global { export const INITIAL_DOT_UVE: DotUVE = { editContentlet, + reorderMenu, lastScrollYPosition: 0 }; @@ -105,5 +106,6 @@ export function postMessageToEditor(message: PostMessageProps) { export interface DotUVE { editContentlet: typeof editContentlet; + reorderMenu: typeof reorderMenu; lastScrollYPosition: number; } diff --git a/core-web/libs/sdk/client/src/lib/editor/models/editor.model.ts b/core-web/libs/sdk/client/src/lib/editor/models/editor.model.ts index a064809e3017..07f28b7784be 100644 --- a/core-web/libs/sdk/client/src/lib/editor/models/editor.model.ts +++ b/core-web/libs/sdk/client/src/lib/editor/models/editor.model.ts @@ -51,3 +51,18 @@ export interface DotCMSPageEditorConfig { */ onReload?: () => void; } + +/** + * Configuration for reordering a menu. + */ +export interface ReorderMenuConfig { + /** + * The starting level of the menu to be reordered. + */ + startLevel: number; + + /** + * The depth of the menu levels to be reordered. + */ + depth: number; +} diff --git a/core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts b/core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts index 9090ee5c5049..82ae089e8b99 100644 --- a/core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts +++ b/core-web/libs/sdk/client/src/lib/editor/sdk-editor.spec.ts @@ -27,6 +27,7 @@ jest.mock('./models/client.model', () => { }, INITIAL_DOT_UVE: { editContentlet: jest.fn(), + reorderMenu: jest.fn(), lastScrollYPosition: 0 } }; @@ -102,6 +103,7 @@ describe('DotCMSPageEditor', () => { expect(scrollHandler).toHaveBeenCalled(); expect(window.dotUVE).toEqual({ editContentlet: expect.any(Function), + reorderMenu: expect.any(Function), lastScrollYPosition: 0 }); }); diff --git a/core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts b/core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts index 02480c0fbbdb..7c648c15c462 100644 --- a/core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts +++ b/core-web/libs/sdk/client/src/lib/editor/sdk-editor.ts @@ -6,7 +6,7 @@ import { subscriptions } from './listeners/listeners'; import { CLIENT_ACTIONS, INITIAL_DOT_UVE, postMessageToEditor } from './models/client.model'; -import { DotCMSPageEditorConfig } from './models/editor.model'; +import { DotCMSPageEditorConfig, ReorderMenuConfig } from './models/editor.model'; import { Contentlet } from '../client/content/shared/types'; @@ -43,6 +43,25 @@ export function editContentlet(contentlet: Contentlet) { }); } +/** + * Reorders the menu based on the provided configuration. + * + * @param {ReorderMenuConfig} [config] - Optional configuration for reordering the menu. + * @param {number} [config.startLevel=1] - The starting level of the menu to reorder. + * @param {number} [config.depth=2] - The depth of the menu to reorder. + * + * This function constructs a URL for the reorder menu page with the specified + * start level and depth, and sends a message to the editor to perform the reorder action. + */ +export function reorderMenu(config?: ReorderMenuConfig): void { + const { startLevel = 1, depth = 2 } = config || {}; + + postMessageToEditor({ + action: CLIENT_ACTIONS.REORDER_MENU, + payload: { startLevel, depth } + }); +} + /** * Checks if the code is running inside an editor. * diff --git a/dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm b/dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm index 53c06573d61e..fb54306af8e3 100644 --- a/dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm +++ b/dotCMS/src/main/webapp/WEB-INF/velocity/VM_global_library.vm @@ -176,9 +176,14 @@ + + #end #end diff --git a/dotCMS/src/main/webapp/html/js/editor-js/sdk-editor.js b/dotCMS/src/main/webapp/html/js/editor-js/sdk-editor.js index dc38315a4878..2eabae15b1c9 100644 --- a/dotCMS/src/main/webapp/html/js/editor-js/sdk-editor.js +++ b/dotCMS/src/main/webapp/html/js/editor-js/sdk-editor.js @@ -1 +1 @@ -function u(t){i({action:"edit-contentlet",payload:t})}function T(){return typeof window>"u"?!1:window.parent!==window}function f(){window.dotUVE=a}function m(){document.querySelectorAll('[data-dot-object="contentlet"]').forEach(n=>{n.clientHeight||n.classList.add("empty-contentlet")})}var a={editContentlet:u,lastScrollYPosition:0};function i(t){window.parent.postMessage(t,"*")}function _(t){return t.map(n=>{let e=n.getBoundingClientRect(),o=Array.from(n.querySelectorAll('[data-dot-object="contentlet"]'));return{x:e.x,y:e.y,width:e.width,height:e.height,payload:JSON.stringify({container:v(n)}),contentlets:h(e,o)}})}function h(t,n){return n.map(e=>{let o=e.getBoundingClientRect();return{x:0,y:o.y-t.y,width:o.width,height:o.height,payload:JSON.stringify({container:e.dataset?.dotContainer?JSON.parse(e.dataset?.dotContainer):E(e),contentlet:{identifier:e.dataset?.dotIdentifier,title:e.dataset?.dotTitle,inode:e.dataset?.dotInode,contentType:e.dataset?.dotType}})}})}function v(t){return{acceptTypes:t.dataset?.dotAcceptTypes||"",identifier:t.dataset?.dotIdentifier||"",maxContentlets:t.dataset?.maxContentlets||"",uuid:t.dataset?.dotUuid||""}}function E(t){let n=t.closest('[data-dot-object="container"]');return n?v(n):(console.warn("No container found for the contentlet"),null)}function p(t){return t?t?.dataset?.dotObject==="contentlet"||t?.dataset?.dotObject==="container"&&t.children.length===0?t:p(t?.parentElement):null}function y(t){let n=t.querySelectorAll('[data-dot-object="vtl-file"]');return n.length?Array.from(n).map(e=>({inode:e.dataset?.dotInode,name:e.dataset?.dotUrl})):null}function D(){let t=document.documentElement.scrollHeight,n=window.innerHeight;return window.scrollY+n>=t}var r=[];function S(){let t=Array.from(document.querySelectorAll('[data-dot-object="container"]')),n=_(t);i({action:"set-bounds",payload:n})}function l(){let t=n=>{({"uve-reload-page":()=>{window.location.reload()},"uve-request-bounds":()=>{S()},"uve-scroll-inside-iframe":()=>{let o=n.data.direction;if(window.scrollY===0&&o==="up"||D()&&o==="down")return;let d=o==="up"?-120:120;window.scrollBy({left:0,top:d,behavior:"smooth"})}})[n.data.name]?.()};window.addEventListener("message",t),r.push({type:"listener",event:"message",callback:t})}function s(){let t=n=>{let e=p(n.target);if(!e)return;let{x:o,y:d,width:L,height:w}=e.getBoundingClientRect(),M=e.dataset?.dotObject==="container",N={identifier:"TEMP_EMPTY_CONTENTLET",title:"TEMP_EMPTY_CONTENTLET",contentType:"TEMP_EMPTY_CONTENTLET_TYPE",inode:"TEMPY_EMPTY_CONTENTLET_INODE",widgetTitle:"TEMP_EMPTY_CONTENTLET",baseType:"TEMP_EMPTY_CONTENTLET",onNumberOfPages:1},P={identifier:e.dataset?.dotIdentifier,title:e.dataset?.dotTitle,inode:e.dataset?.dotInode,contentType:e.dataset?.dotType,baseType:e.dataset?.dotBasetype,widgetTitle:e.dataset?.dotWidgetTitle,onNumberOfPages:e.dataset?.dotOnNumberOfPages},O=y(e),b={container:e.dataset?.dotContainer?JSON.parse(e.dataset?.dotContainer):E(e),contentlet:M?N:P,vtlFiles:O};i({action:"set-contentlet",payload:{x:o,y:d,width:L,height:w,payload:b}})};document.addEventListener("pointermove",t),r.push({type:"listener",event:"pointermove",callback:t})}function c(){let t=()=>{i({action:"scroll"}),window.dotUVE={...window.dotUVE??a,lastScrollYPosition:window.scrollY}},n=()=>{i({action:"scroll-end"})};window.addEventListener("scroll",t),window.addEventListener("scrollend",n),r.push({type:"listener",event:"scroll",callback:n}),r.push({type:"listener",event:"scroll",callback:t})}function C(){let t=()=>{window.scrollTo(0,window.dotUVE?.lastScrollYPosition)};window.addEventListener("load",t),r.push({type:"listener",event:"scroll",callback:t})}var I=()=>{let t=()=>{let n=document.querySelectorAll("[data-block-editor-content]");n.length&&n.forEach(e=>{e.classList.add("dotcms__inline-edit-field"),e.addEventListener("click",()=>{let o={...e.dataset};window.parent.postMessage({payload:o,action:"init-editor-inline-editing"},"*")})})};document.readyState==="complete"?t():window.addEventListener("load",()=>t())};T()&&(f(),l(),c(),C(),s(),m(),I()); +function u(t){i({action:"edit-contentlet",payload:t})}function T(t){let{startLevel:n=1,depth:e=2}=t||{};i({action:"reorder-menu",payload:{startLevel:n,depth:e}})}function f(){return typeof window>"u"?!1:window.parent!==window}function m(){window.dotUVE=a}function g(){document.querySelectorAll('[data-dot-object="contentlet"]').forEach(n=>{n.clientHeight||n.classList.add("empty-contentlet")})}var a={editContentlet:u,reorderMenu:T,lastScrollYPosition:0};function i(t){window.parent.postMessage(t,"*")}function v(t){return t.map(n=>{let e=n.getBoundingClientRect(),o=Array.from(n.querySelectorAll('[data-dot-object="contentlet"]'));return{x:e.x,y:e.y,width:e.width,height:e.height,payload:JSON.stringify({container:y(n)}),contentlets:S(e,o)}})}function S(t,n){return n.map(e=>{let o=e.getBoundingClientRect();return{x:0,y:o.y-t.y,width:o.width,height:o.height,payload:JSON.stringify({container:e.dataset?.dotContainer?JSON.parse(e.dataset?.dotContainer):E(e),contentlet:{identifier:e.dataset?.dotIdentifier,title:e.dataset?.dotTitle,inode:e.dataset?.dotInode,contentType:e.dataset?.dotType}})}})}function y(t){return{acceptTypes:t.dataset?.dotAcceptTypes||"",identifier:t.dataset?.dotIdentifier||"",maxContentlets:t.dataset?.maxContentlets||"",uuid:t.dataset?.dotUuid||""}}function E(t){let n=t.closest('[data-dot-object="container"]');return n?y(n):(console.warn("No container found for the contentlet"),null)}function p(t){return t?t?.dataset?.dotObject==="contentlet"||t?.dataset?.dotObject==="container"&&t.children.length===0?t:p(t?.parentElement):null}function M(t){let n=t.querySelectorAll('[data-dot-object="vtl-file"]');return n.length?Array.from(n).map(e=>({inode:e.dataset?.dotInode,name:e.dataset?.dotUrl})):null}function D(){let t=document.documentElement.scrollHeight,n=window.innerHeight;return window.scrollY+n>=t}var r=[];function x(){let t=Array.from(document.querySelectorAll('[data-dot-object="container"]')),n=v(t);i({action:"set-bounds",payload:n})}function l(){let t=n=>{({"uve-reload-page":()=>{window.location.reload()},"uve-request-bounds":()=>{x()},"uve-scroll-inside-iframe":()=>{let o=n.data.direction;if(window.scrollY===0&&o==="up"||D()&&o==="down")return;let d=o==="up"?-120:120;window.scrollBy({left:0,top:d,behavior:"smooth"})}})[n.data.name]?.()};window.addEventListener("message",t),r.push({type:"listener",event:"message",callback:t})}function s(){let t=n=>{let e=p(n.target);if(!e)return;let{x:o,y:d,width:I,height:w}=e.getBoundingClientRect(),N=e.dataset?.dotObject==="container",O={identifier:"TEMP_EMPTY_CONTENTLET",title:"TEMP_EMPTY_CONTENTLET",contentType:"TEMP_EMPTY_CONTENTLET_TYPE",inode:"TEMPY_EMPTY_CONTENTLET_INODE",widgetTitle:"TEMP_EMPTY_CONTENTLET",baseType:"TEMP_EMPTY_CONTENTLET",onNumberOfPages:1},P={identifier:e.dataset?.dotIdentifier,title:e.dataset?.dotTitle,inode:e.dataset?.dotInode,contentType:e.dataset?.dotType,baseType:e.dataset?.dotBasetype,widgetTitle:e.dataset?.dotWidgetTitle,onNumberOfPages:e.dataset?.dotOnNumberOfPages},b=M(e),h={container:e.dataset?.dotContainer?JSON.parse(e.dataset?.dotContainer):E(e),contentlet:N?O:P,vtlFiles:b};i({action:"set-contentlet",payload:{x:o,y:d,width:I,height:w,payload:h}})};document.addEventListener("pointermove",t),r.push({type:"listener",event:"pointermove",callback:t})}function c(){let t=()=>{i({action:"scroll"}),window.dotUVE={...window.dotUVE??a,lastScrollYPosition:window.scrollY}},n=()=>{i({action:"scroll-end"})};window.addEventListener("scroll",t),window.addEventListener("scrollend",n),r.push({type:"listener",event:"scroll",callback:n}),r.push({type:"listener",event:"scroll",callback:t})}function C(){let t=()=>{window.scrollTo(0,window.dotUVE?.lastScrollYPosition)};window.addEventListener("load",t),r.push({type:"listener",event:"scroll",callback:t})}var L=()=>{let t=()=>{let n=document.querySelectorAll("[data-block-editor-content]");n.length&&n.forEach(e=>{e.classList.add("dotcms__inline-edit-field"),e.addEventListener("click",()=>{let o={...e.dataset};window.parent.postMessage({payload:o,action:"init-editor-inline-editing"},"*")})})};document.readyState==="complete"?t():window.addEventListener("load",()=>t())};f()&&(m(),l(),c(),C(),s(),g(),L()); diff --git a/examples/nextjs/src/components/graphql-page.js b/examples/nextjs/src/components/graphql-page.js index d79f90dabb40..97d347c2e091 100644 --- a/examples/nextjs/src/components/graphql-page.js +++ b/examples/nextjs/src/components/graphql-page.js @@ -8,7 +8,7 @@ import CalendarEvent from "./content-types/calendarEvent"; import Product from "./content-types/product"; import ImageComponent from "./content-types/image"; -import Header from "./layout/header"; +import Header from "./layout/header/header"; import Footer from "./layout/footer/footer"; import Navigation from "./layout/navigation"; import { usePathname, useRouter } from "next/navigation"; diff --git a/examples/nextjs/src/components/layout/header/components/reorderMenu.js b/examples/nextjs/src/components/layout/header/components/reorderMenu.js new file mode 100644 index 000000000000..e5596a4d3b1d --- /dev/null +++ b/examples/nextjs/src/components/layout/header/components/reorderMenu.js @@ -0,0 +1,38 @@ +import { reorderMenu } from '@dotcms/client'; + +export default function ReorderButton() { + const OrderIcon = () => ( + + + + + + + ) + return ( + + ); +} \ No newline at end of file diff --git a/examples/nextjs/src/components/layout/header.js b/examples/nextjs/src/components/layout/header/header.js similarity index 83% rename from examples/nextjs/src/components/layout/header.js rename to examples/nextjs/src/components/layout/header/header.js index 988f9619e3d1..07315bbc3c5c 100644 --- a/examples/nextjs/src/components/layout/header.js +++ b/examples/nextjs/src/components/layout/header/header.js @@ -1,4 +1,5 @@ import Link from 'next/link'; +import ReorderButton from './components/reorderMenu'; function Header({ children }) { return ( @@ -8,9 +9,13 @@ function Header({ children }) { TravelLux in NextJS + {children} ); } + + + export default Header; diff --git a/examples/nextjs/src/components/my-page.js b/examples/nextjs/src/components/my-page.js index e9f0d33ce5f8..0286616a01ab 100644 --- a/examples/nextjs/src/components/my-page.js +++ b/examples/nextjs/src/components/my-page.js @@ -8,7 +8,7 @@ import CalendarEvent from "./content-types/calendarEvent"; import Product from "./content-types/product"; import ImageComponent from "./content-types/image"; -import Header from "./layout/header"; +import Header from "./layout/header/header"; import Footer from "./layout/footer/footer"; import Navigation from "./layout/navigation"; import { usePathname, useRouter } from "next/navigation";