@griddo/ax 1.65.26 → 1.66.1

package/src/modules/GlobalEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
-import { IErrorItem, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
+import { IErrorItem, INotification, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
@@ -48,6 +48,7 @@ const GlobalEditor = (props: IProps) => {
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
+  const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -442,10 +443,27 @@ const GlobalEditor = (props: IProps) => {
             />
           </S.NotificationWrapper>
         )}
+        {notification && (
+          <S.NotificationWrapper>
+            <Notification
+              type={notification.type}
+              text={notification.text}
+              btnText={notification.btnText}
+              onClick={notification.onClick}
+              resetError={() => setNotification(null)}
+            />
+          </S.NotificationWrapper>
+        )}
         <ErrorToast size="l" />
         {selectedTab === "edit" ? (
           <S.Content>
-            <Editor isGlobal={true} isEditable={isEditable} isReadOnly={isReadOnly} theme={theme} />
+            <Editor
+              isGlobal={true}
+              isEditable={isEditable}
+              isReadOnly={isReadOnly}
+              theme={theme}
+              setNotification={setNotification}
+            />
           </S.Content>
         ) : (
           <Preview theme={theme} />

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -31,6 +31,7 @@ const DefaultsEditor = (props: IProps) => {
     setHeader,
     setFooter,
     setHistoryPush,
+    currentSiteInfo,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -52,6 +53,16 @@ const DefaultsEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lang]);
 
+  useEffect(() => {
+    const navigationModuleComponent = currentSiteInfo.navigationModules?.[editorContent?.type];
+    const currentNavigation = currentDefaultsContent?.find((item: any) => item.id === editorContent?.id);
+    if (navigationModuleComponent && editorContent && currentNavigation) {
+      const isNavigationModuleChanged = navigationModuleComponent !== currentNavigation.component;
+      isNavigationModuleChanged && setIsDirty(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSiteInfo, editorContent?.id]);
+
   const save = () => {
     isNew || isNewTranslation
       ? createNavigation().then((isSaved: boolean) => {
@@ -160,6 +171,7 @@ const mapStateToProps = (state: IRootState) => ({
   navLanguages: state.navigation.currentNavigationLanguages,
   currentDefaultsContent: state.navigation.currentDefaultsContent,
   isNewTranslation: state.navigation.isNewTranslation,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 interface IStateProps {
@@ -174,6 +186,7 @@ interface IStateProps {
   footer: number | null;
   navLanguages: any[];
   isNewTranslation: boolean;
+  currentSiteInfo: any;
 }
 
 const mapDispatchToProps = {

package/src/modules/Navigation/Defaults/atoms.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import * as S from "./style";
+
+const NavigationModulesWarning = (props: INavigationModulesWarning): JSX.Element => {
+  const { goTo } = props;
+
+  return (
+    <S.NavigationModulesWarning>
+      <S.NavigationModulesTitle>Navigation Modules</S.NavigationModulesTitle>
+      <S.NavigationModulesDescription>
+        Create as many headers as you need for your site. You can decide on which page to use each one. To change the
+        header design, you have to go to{" "}
+        <S.SiteSettingsLink>
+          <span onClick={goTo} onKeyPress={goTo} role="checkbox" aria-checked="false" tabIndex={0}>
+            Site Settings
+          </span>
+        </S.SiteSettingsLink>
+        .
+      </S.NavigationModulesDescription>
+    </S.NavigationModulesWarning>
+  );
+};
+
+interface INavigationModulesWarning {
+  goTo(): void;
+}
+
+export { NavigationModulesWarning };

package/src/modules/Navigation/Defaults/index.tsx

@@ -5,14 +5,15 @@ import { appActions } from "@ax/containers/App";
 import { menuActions } from "@ax/containers/Navigation";
 import { IRootState, IHeader, IFooter } from "@ax/types";
 import { useBulkSelection, useToast } from "@ax/hooks";
-import { capitalize } from "@ax/helpers";
+import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
 import { navigationActions } from "@ax/containers/Navigation";
-import { MainWrapper, TableList, ErrorToast, Toast } from "@ax/components";
+import { MainWrapper, TableList, ErrorToast, Toast, Notification } from "@ax/components";
 
 import DefaultItem from "./Item";
 import DefaultNav from "./Nav";
 import BulkHeader from "./BulkHeader";
 
+import { NavigationModulesWarning } from "./atoms";
 import * as S from "./style";
 
 const DefaultsList = (props: IProps): JSX.Element => {
@@ -33,6 +34,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
     deleteNavigation,
     getMenus,
     resetDefaultsValues,
+    currentSiteInfo,
   } = props;
 
   const [page, setPage] = useState(1);
@@ -40,6 +42,7 @@ const DefaultsList = (props: IProps): JSX.Element => {
   const { isVisible, toggleToast, setIsVisible } = useToast();
   const [isScrolling, setIsScrolling] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
+  const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
 
   const navIds = currentDefaultsContent && currentDefaultsContent.map((nav: any) => nav.id);
 
@@ -58,6 +61,8 @@ const DefaultsList = (props: IProps): JSX.Element => {
 
   const currentType = selectedDefault === "Headers" ? "header" : "footer";
 
+  const showNavigationModulesWarning = isMultipleNavigationModules();
+
   const getParams = useCallback(() => {
     return {
       page,
@@ -92,13 +97,23 @@ const DefaultsList = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    const isNavigationModulesChanged =
+      currentSiteInfo.navigationModules?.[currentType] &&
+      currentDefaultsContent.some(
+        (navigation) => navigation.component !== currentSiteInfo.navigationModules[currentType]
+      );
+    setIsNavigationNotificationOpen(isNavigationModulesChanged);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentDefaultsContent]);
+
   const handleClick = (selectedDefault: string) => {
     getContents(selectedDefault);
   };
 
   const setContent = (item: any) => {
-    const { component, id } = item;
-    const isHeader = component === "Header";
+    const { type, id } = item;
+    const isHeader = type === "header";
     isHeader ? setHeader(id) : setFooter(id);
   };
 
@@ -166,6 +181,8 @@ const DefaultsList = (props: IProps): JSX.Element => {
     />
   );
 
+  const goToSiteSettings = () => setHistoryPush("/sites/settings/globals");
+
   return (
     <MainWrapper
       title="Navigation modules"
@@ -178,6 +195,13 @@ const DefaultsList = (props: IProps): JSX.Element => {
         <DefaultNav current={selectedDefault} defaultTypes={defaultTypes} onClick={handleClick} />
         <S.TableWrapper>
           <ErrorToast />
+          {isNavigationNotificationOpen && (
+            <Notification
+              type="warning"
+              text="The design of the navigation modules has changed. Please, check the previously created and save them."
+            />
+          )}
+          {showNavigationModulesWarning && <NavigationModulesWarning goTo={goToSiteSettings} />}
           <TableList
             tableHeader={TableHeader}
             pagination={pagination}
@@ -217,6 +241,7 @@ const mapStateToProps = (state: IRootState) => ({
   selectedDefault: state.navigation.selectedDefault,
   currentDefaultsContent: state.navigation.currentDefaultsContent,
   totalItems: state.navigation.totalItems,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 interface IDispatchProps {
@@ -239,6 +264,7 @@ interface IDefaultsProps {
   selectedDefault: string;
   currentDefaultsContent: (IHeader | IFooter)[];
   totalItems: number;
+  currentSiteInfo: any;
 }
 
 type IProps = IDefaultsProps & IDispatchProps;

package/src/modules/Navigation/Defaults/style.tsx

@@ -20,4 +20,35 @@ const PaginationWrapper = styled.span`
   margin-top: ${(p) => p.theme.spacing.m};
 `;
 
-export { DefaultListWrapper, PaginationWrapper, TableWrapper }
+const NavigationModulesWarning = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+const NavigationModulesTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const NavigationModulesDescription = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+`;
+
+const SiteSettingsLink = styled.div`
+  display: inline;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.interactive01};
+  span {
+    cursor: pointer;
+  }
+`;
+
+export {
+  DefaultListWrapper,
+  PaginationWrapper,
+  TableWrapper,
+  NavigationModulesWarning,
+  NavigationModulesTitle,
+  NavigationModulesDescription,
+  SiteSettingsLink,
+};

package/src/modules/PageEditor/Editor/index.tsx

@@ -5,7 +5,7 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
+import { IBreadcrumbItem, INotification, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -35,6 +35,10 @@ const Editor = (props: IProps) => {
     isReadOnly,
     userEditing,
     site,
+    lastElementAddedId,
+    copyModule,
+    pasteModule,
+    setNotification,
   } = props;
 
   const actions = {
@@ -47,6 +51,9 @@ const Editor = (props: IProps) => {
     replaceElementsInCollectionAction: replaceElementsInCollection,
     getGlobalFromLocalPageAction: getGlobalFromLocalPage,
     saveCurrentSiteInfoAction: saveCurrentSiteInfo,
+    copyModuleAction: copyModule,
+    pasteModuleAction: pasteModule,
+    setNotificationAction: setNotification,
   };
 
   return (
@@ -71,6 +78,7 @@ const Editor = (props: IProps) => {
           isReadOnly={isReadOnly}
           userEditing={userEditing}
           theme={site.theme}
+          lastElementAddedId={lastElementAddedId}
         />
       }
     />
@@ -87,6 +95,7 @@ interface IEditorStateProps {
   isLoading: boolean;
   userEditing: IUserEditing | null;
   site: ISite;
+  lastElementAddedId: null | number;
 }
 
 interface IPageBrowserDispatchProps {
@@ -102,6 +111,9 @@ interface IPageBrowserDispatchProps {
   setHistoryPush(path: string, isEditor: boolean): void;
   getGlobalFromLocalPage(): void;
   saveCurrentSiteInfo(): void;
+  copyModule(editorID: number): boolean;
+  pasteModule(editorID: number): Promise<{ error?: INotification }>;
+  setNotification: (notification: INotification) => void;
   isTemplateActivated: boolean;
   isGlobal: boolean;
   isEditable: boolean;
@@ -120,6 +132,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   isLoading: state.app.isLoading,
   userEditing: state.pageEditor.userEditing,
   site: state.sites.currentSiteInfo,
+  lastElementAddedId: state.pageEditor.lastElementAddedId,
 });
 
 const mapDispatchToProps = {
@@ -135,6 +148,8 @@ const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   getGlobalFromLocalPage: pageEditorActions.getGlobalFromLocalPage,
   saveCurrentSiteInfo: sitesActions.saveCurrentSiteInfo,
+  copyModule: pageEditorActions.copyModule,
+  pasteModule: pageEditorActions.pasteModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor);

package/src/modules/PageEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
-import { IErrorItem, IPageLanguage, IRootState, ISavePageParams, IUserEditing } from "@ax/types";
+import { IErrorItem, INotification, IRootState, ISavePageParams, IUserEditing, IPageLanguage } from "@ax/types";
 import { MainWrapper, Loading, ErrorToast, Notification, Modal } from "@ax/components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { appActions } from "@ax/containers/App";
@@ -49,6 +49,7 @@ const PageEditor = (props: IProps) => {
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [selectedTab, setSelectedTab] = useState("edit");
+  const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
@@ -485,6 +486,17 @@ const PageEditor = (props: IProps) => {
             <Notification type="warning" text={modifiedNotificationText} />
           </S.NotificationWrapper>
         )}
+        {notification && (
+          <S.NotificationWrapper>
+            <Notification
+              type={notification.type}
+              text={notification.text}
+              btnText={notification.btnText}
+              onClick={notification.onClick}
+              resetError={() => setNotification(null)}
+            />
+          </S.NotificationWrapper>
+        )}
         <ErrorToast size="l" />
         {selectedTab === "edit" ? (
           <S.Content>
@@ -494,6 +506,7 @@ const PageEditor = (props: IProps) => {
               isEditable={isEditable}
               pageTitle={pageName}
               isReadOnly={isReadOnly}
+              setNotification={setNotification}
             />
           </S.Content>
         ) : (

package/src/modules/PublicPreview/index.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 
 import * as components from "components";
-import { providers } from "components";
+import { SiteProvider } from "components";
 import { Preview } from "@griddo/core";
 import { pages } from "@ax/api";
 import { getDefaultTheme, isReqOk } from "@ax/helpers";
@@ -43,7 +43,6 @@ const PublicPreview = () => {
 
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
-  const { SiteProvider, AnimationProvider } = providers;
 
   const globalTheme = getDefaultTheme();
   const theme = state && state.site ? state.siteInfo.theme : globalTheme;
@@ -64,22 +63,20 @@ const PublicPreview = () => {
       publicApiUrl={PUBLIC_API_URL}
       siteId={state && state.site}
     >
-      <AnimationProvider showOnScroll={{ active: false }}>
-        <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
-          {state && (
-            <Preview
-              isPage={true}
-              apiUrl={API_URL}
-              library={components}
-              content={state}
-              header={state && state.headerContent}
-              footer={state && state.footerContent}
-              languageId={state && state.language}
-              pageLanguages={state && state.pageLanguages}
-            />
-          )}
-        </S.Wrapper>
-      </AnimationProvider>
+      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+        {state && (
+          <Preview
+            isPage={true}
+            apiUrl={API_URL}
+            library={components}
+            content={state}
+            header={state && state.headerContent}
+            footer={state && state.footerContent}
+            languageId={state && state.language}
+            pageLanguages={state && state.pageLanguages}
+          />
+        )}
+      </S.Wrapper>
     </SiteProvider>
   );
 };

package/src/modules/Settings/Globals/NavigationModules/SideModal/SideModalOption/index.tsx

@@ -0,0 +1,35 @@
+import React, { memo } from "react";
+
+import { getThumbnailProps, filterImageText } from "@ax/helpers";
+
+import * as S from "./style";
+
+const getThumbnailData = (option: any, theme: string) => {
+  option = filterImageText(option.component);
+  return getThumbnailProps(option, false, theme);
+};
+
+const SideModalOption = (props: IProps) => {
+  const { option, handleClick, theme, selected } = props;
+
+  const thumbnailProps = getThumbnailData(option, theme);
+
+  const setOption = () => {
+    handleClick(option);
+  };
+
+  return (
+    <S.Item onClick={setOption} selected={selected}>
+      <S.Thumbnail {...thumbnailProps} />
+    </S.Item>
+  );
+};
+
+interface IProps {
+  option: any;
+  handleClick: any;
+  theme: string;
+  selected: boolean;
+}
+
+export default memo(SideModalOption);

package/src/modules/Settings/Globals/NavigationModules/SideModal/SideModalOption/style.tsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+
+export const Item = styled.li<{ selected: boolean }>`
+  cursor: pointer;
+  padding: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  border-radius: ${(p) => p.theme.radii.s};
+  ${(p) => p.theme.textStyle.uiS};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
+  border: 2px solid ${(p) => (p.selected ? p.theme.color.interactive01 : "transparent")};
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+  &:focus {
+    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
+  }
+`;
+
+export const Thumbnail = styled.img`
+  cursor: pointer;
+`;

package/src/modules/Settings/Globals/NavigationModules/SideModal/index.tsx

@@ -0,0 +1,111 @@
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+import { useHandleClickOutside } from "@ax/hooks";
+import { Button, IconAction, NoteField } from "@ax/components";
+
+import SideModalOption from "./SideModalOption";
+import * as S from "./style";
+
+const SideModal = (props: ISideModalProps): JSX.Element | null => {
+  const {
+    navigationModules,
+    form,
+    isOpen,
+    toggleModal,
+    theme,
+    setNavigationModulesValue,
+    isNavigationModulesChanged,
+    setIsNavigationModulesChanged,
+  } = props;
+
+  const [previousNavigationModules, setPreviousNavigationModules] = useState(form.navigationModules);
+
+  useEffect(() => {
+    isOpen && setPreviousNavigationModules(form.navigationModules);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const closeDiscardingChanges = () => {
+    setNavigationModulesValue(previousNavigationModules);
+    toggleModal();
+  };
+
+  const save = () => {
+    setIsNavigationModulesChanged(true);
+    toggleModal();
+  };
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const handleClickOutside = (e: any) => {
+    if (wrapperRef.current?.contains(e.target)) return;
+    closeDiscardingChanges();
+  };
+
+  useHandleClickOutside(isOpen, handleClickOutside);
+
+  const getNavigationOptions = (type: string): JSX.Element => {
+    return (
+      <S.NavigationOptionsWrapper>
+        <S.NavigationOptionsTitle>{type}</S.NavigationOptionsTitle>
+        {navigationModules[type].map((option: any, index: number) => {
+          const isSelected = form?.navigationModules && form?.navigationModules[type] === option.component;
+          const isDefault = !(form?.navigationModules && form?.navigationModules[type]) && option.defaultNavigation;
+          const handleClick = (option: any) =>
+            setNavigationModulesValue({ ...form.navigationModules, [type]: option.component });
+          return (
+            <SideModalOption
+              option={option}
+              selected={isSelected || isDefault}
+              handleClick={handleClick}
+              theme={theme}
+              key={`${option}${index}`}
+            />
+          );
+        })}
+      </S.NavigationOptionsWrapper>
+    );
+  };
+
+  const noteFieldText = isNavigationModulesChanged
+    ? "If you change the design, this will be changed in all headers and footers of all pages of the site."
+    : "Select the design you want for this site and create as many headers and footers as you need.";
+
+  const buttonText = isNavigationModulesChanged ? "Change design" : "Select design";
+
+  return isOpen
+    ? createPortal(
+        <S.Wrapper ref={wrapperRef}>
+          <S.Header>
+            <S.Title>Navigation modules design</S.Title>
+            <S.ButtonWrapper>
+              <IconAction icon="close" onClick={closeDiscardingChanges} />
+            </S.ButtonWrapper>
+          </S.Header>
+          <S.Content>
+            <NoteField value={{ text: noteFieldText }} />
+            {["header", "footer"].map((type: string) => getNavigationOptions(type))}
+          </S.Content>
+          <S.Footer>
+            <Button type="button" onClick={save} buttonStyle="solid">
+              {buttonText}
+            </Button>
+          </S.Footer>
+        </S.Wrapper>,
+        document.body
+      )
+    : null;
+};
+
+interface ISideModalProps {
+  isOpen: boolean;
+  navigationModules: Record<string, any[]>;
+  toggleModal: () => void;
+  theme: string;
+  form: any;
+  setNavigationModulesValue: (value: any) => void;
+  isNavigationModulesChanged: boolean;
+  setIsNavigationModulesChanged: Dispatch<SetStateAction<boolean>>;
+}
+
+export default SideModal;

package/src/modules/Settings/Globals/NavigationModules/SideModal/style.tsx

@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  position: fixed;
+  width: calc(6 * ${(p) => p.theme.spacing.xl});
+  right: 0;
+  top: 0;
+  z-index: 1000;
+  height: 100vh;
+  background: ${(p) => p.theme.colors.uiBackground01};
+  box-shadow: ${(p) => p.theme.shadow.rightPanel};
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: ${(p) => p.theme.spacing.xl};
+  width: 100%;
+  padding: 0 ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.colors.uiBackground02};
+  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
+  h6 {
+    ${(p) => p.theme.textStyle.headingM}
+    color: ${(p) => p.theme.colors.textHighEmphasis};
+    text-transform: capitalize;
+  }
+`;
+
+const Title = styled.h6``;
+
+const Content = styled.div`
+  list-style: none;
+  padding: ${(p) => p.theme.spacing.m};
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 2))`};
+  width: ${(p) => `calc(${p.theme.spacing.xl} * 6)`};
+  overflow: auto;
+`;
+
+const ButtonWrapper = styled.div`
+  margin: 0 0 0 auto;
+`;
+
+const NavigationOptionsWrapper = styled.div`
+  margin: ${(p) => p.theme.spacing.m} 0 ${(p) => p.theme.spacing.l};
+`;
+
+const NavigationOptionsTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingXSS}
+  color: ${(p) => p.theme.colors.textMediumEmphasis};
+  text-transform: uppercase;
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
+`;
+
+const Footer = styled.div`
+  padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m} 0;
+  display: flex;
+  justify-content: flex-end;
+  border-top: 1px solid ${(p) => p.theme.color.uiLine};
+`;
+
+export { Wrapper, Content, Header, Title, ButtonWrapper, NavigationOptionsWrapper, NavigationOptionsTitle, Footer };