🚀 release v3.0.0

client/components/build/Center/ArtboardController.module.scss

@@ -0,0 +1,28 @@
+.container {
+  @apply flex w-auto items-center justify-center;
+  @apply fixed inset-x-0 bottom-6;
+  @apply transition-[margin-left,margin-right] duration-200;
+}
+
+.pushLeft {
+  @apply xl:ml-[30vw] 2xl:ml-[28vw];
+}
+
+.pushRight {
+  @apply xl:mr-[30vw] 2xl:mr-[28vw];
+}
+
+.controller {
+  @apply z-20 flex items-center justify-center shadow-lg;
+  @apply flex rounded-l-full rounded-r-full px-4;
+  @apply bg-neutral-50 dark:bg-neutral-800;
+  @apply opacity-70 transition-opacity duration-200 hover:opacity-100;
+
+  > button {
+    @apply px-2.5 py-2.5;
+  }
+
+  > hr {
+    @apply mx-3 h-5 w-0.5 bg-neutral-900/40 dark:bg-neutral-50/20;
+  }
+}

client/components/build/Center/ArtboardController.tsx

@@ -0,0 +1,141 @@
+import {
+  AlignHorizontalCenter,
+  AlignVerticalCenter,
+  Download,
+  FilterCenterFocus,
+  InsertPageBreak,
+  Link,
+  ViewSidebar,
+  ZoomIn,
+  ZoomOut,
+} from '@mui/icons-material';
+import { ButtonBase, Divider, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import clsx from 'clsx';
+import { get } from 'lodash';
+import { useTranslation } from 'next-i18next';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+import { ReactZoomPanPinchRef } from 'react-zoom-pan-pinch';
+
+import { ServerError } from '@/services/axios';
+import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
+import { togglePageBreakLine, togglePageOrientation, toggleSidebar } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+import styles from './ArtboardController.module.scss';
+
+const ArtboardController: React.FC<ReactZoomPanPinchRef> = ({ zoomIn, zoomOut, centerView }) => {
+  const { t } = useTranslation();
+
+  const theme = useTheme();
+  const dispatch = useAppDispatch();
+
+  const resume = useAppSelector((state) => state.resume);
+  const isDesktop = useMediaQuery(theme.breakpoints.up('sm'));
+  const { left, right } = useAppSelector((state) => state.build.sidebar);
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
+
+  const handleTogglePageBreakLine = () => dispatch(togglePageBreakLine());
+
+  const handleTogglePageOrientation = () => dispatch(togglePageOrientation());
+
+  const handleToggleSidebar = () => {
+    dispatch(toggleSidebar({ sidebar: 'left' }));
+    dispatch(toggleSidebar({ sidebar: 'right' }));
+  };
+
+  const handleCopyLink = async () => {
+    const url = getResumeUrl(resume, { withHost: true });
+    await navigator.clipboard.writeText(url);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  const handleExportPDF = async () => {
+    const download = (await import('downloadjs')).default;
+
+    const slug = get(resume, 'slug');
+    const username = get(resume, 'user.username');
+
+    const url = await mutateAsync({ username, slug });
+
+    download(url);
+  };
+
+  return (
+    <div
+      className={clsx({
+        [styles.container]: true,
+        [styles.pushLeft]: left.open,
+        [styles.pushRight]: right.open,
+      })}
+    >
+      <div className={styles.controller}>
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-in')}>
+          <ButtonBase onClick={() => zoomIn(0.25)}>
+            <ZoomIn fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.zoom-out')}>
+          <ButtonBase onClick={() => zoomOut(0.25)}>
+            <ZoomOut fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.center-artboard')}>
+          <ButtonBase onClick={() => centerView(0.95)}>
+            <FilterCenterFocus fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Divider />
+
+        {isDesktop && (
+          <>
+            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-orientation')}>
+              <ButtonBase onClick={handleTogglePageOrientation}>
+                {orientation === 'vertical' ? (
+                  <AlignHorizontalCenter fontSize="medium" />
+                ) : (
+                  <AlignVerticalCenter fontSize="medium" />
+                )}
+              </ButtonBase>
+            </Tooltip>
+
+            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-page-break-line')}>
+              <ButtonBase onClick={handleTogglePageBreakLine}>
+                <InsertPageBreak fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
+
+            <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.toggle-sidebars')}>
+              <ButtonBase onClick={handleToggleSidebar}>
+                <ViewSidebar fontSize="medium" />
+              </ButtonBase>
+            </Tooltip>
+
+            <Divider />
+          </>
+        )}
+
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.copy-link')}>
+          <ButtonBase onClick={handleCopyLink}>
+            <Link fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+
+        <Tooltip arrow placement="top" title={t<string>('builder.controller.tooltip.export-pdf')}>
+          <ButtonBase onClick={handleExportPDF} disabled={isLoading}>
+            <Download fontSize="medium" />
+          </ButtonBase>
+        </Tooltip>
+      </div>
+    </div>
+  );
+};
+
+export default ArtboardController;

client/components/build/Center/Center.module.scss

@@ -0,0 +1,13 @@
+.center {
+  @apply mx-0 flex flex-grow pt-12 lg:pt-16;
+  @apply transition-[margin-left,margin-right] duration-200;
+  @apply bg-neutral-200 dark:bg-neutral-900;
+}
+
+.wrapper {
+  @apply h-full w-full #{!important};
+}
+
+.artboard {
+  @apply flex gap-8;
+}

client/components/build/Center/Center.tsx

@@ -0,0 +1,57 @@
+import clsx from 'clsx';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch';
+
+import { useAppSelector } from '@/store/hooks';
+
+import ArtboardController from './ArtboardController';
+import styles from './Center.module.scss';
+import Header from './Header';
+import Page from './Page';
+
+const Center = () => {
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const resume = useAppSelector((state) => state.resume);
+  const layout: string[][][] = get(resume, 'metadata.layout');
+
+  if (isEmpty(resume)) return null;
+
+  return (
+    <div className={clsx(styles.center)}>
+      <Header />
+
+      <TransformWrapper
+        centerOnInit
+        minScale={0.25}
+        initialScale={0.95}
+        limitToBounds={false}
+        centerZoomedOut={false}
+        pinch={{ step: 1 }}
+        wheel={{ step: 0.1 }}
+      >
+        {(controllerProps) => (
+          <>
+            <TransformComponent wrapperClass={styles.wrapper}>
+              <div
+                className={clsx({
+                  [styles.artboard]: true,
+                  'flex-col': orientation === 'vertical',
+                })}
+              >
+                {layout.map((_, pageIndex) => (
+                  <Page key={pageIndex} page={pageIndex} showPageNumbers />
+                ))}
+              </div>
+            </TransformComponent>
+
+            <ArtboardController {...controllerProps} />
+          </>
+        )}
+      </TransformWrapper>
+    </div>
+  );
+};
+
+export default Center;

client/components/build/Center/Header.module.scss

@@ -0,0 +1,25 @@
+.header {
+  @apply mx-0 flex justify-between shadow;
+  @apply bg-neutral-800 text-neutral-100;
+  @apply transition-[margin-left,margin-right] duration-200;
+
+  button > svg {
+    @apply text-base text-neutral-100;
+  }
+}
+
+.pushLeft {
+  @apply xl:ml-[30vw] 2xl:ml-[28vw];
+}
+
+.pushRight {
+  @apply xl:mr-[30vw] 2xl:mr-[28vw];
+}
+
+.title {
+  @apply flex items-center justify-center;
+
+  h1 {
+    @apply ml-2;
+  }
+}

client/components/build/Center/Header.tsx

@@ -0,0 +1,216 @@
+import {
+  ChevronLeft as ChevronLeftIcon,
+  ChevronRight as ChevronRightIcon,
+  CopyAll,
+  Delete,
+  DriveFileRenameOutline,
+  Home as HomeIcon,
+  KeyboardArrowDown as KeyboardArrowDownIcon,
+  Link as LinkIcon,
+} from '@mui/icons-material';
+import {
+  AppBar,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  Toolbar,
+  Tooltip,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import { Resume } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
+import { useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+
+import { RESUMES_QUERY } from '@/constants/index';
+import { ServerError } from '@/services/axios';
+import queryClient from '@/services/react-query';
+import { deleteResume, DeleteResumeParams, duplicateResume, DuplicateResumeParams } from '@/services/resume';
+import { setSidebarState, toggleSidebar } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+import styles from './Header.module.scss';
+
+const Header = () => {
+  const theme = useTheme();
+
+  const router = useRouter();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const { mutateAsync: duplicateMutation } = useMutation<Resume, ServerError, DuplicateResumeParams>(duplicateResume);
+
+  const { mutateAsync: deleteMutation } = useMutation<void, ServerError, DeleteResumeParams>(deleteResume);
+
+  const resume = useAppSelector((state) => state.resume);
+  const { left, right } = useAppSelector((state) => state.build.sidebar);
+
+  const name = useMemo(() => get(resume, 'name'), [resume]);
+
+  useEffect(() => {
+    if (isDesktop) {
+      dispatch(setSidebarState({ sidebar: 'left', state: { open: true } }));
+      dispatch(setSidebarState({ sidebar: 'right', state: { open: true } }));
+    } else {
+      dispatch(setSidebarState({ sidebar: 'left', state: { open: false } }));
+      dispatch(setSidebarState({ sidebar: 'right', state: { open: false } }));
+    }
+  }, [isDesktop, dispatch]);
+
+  const toggleLeftSidebar = () => dispatch(toggleSidebar({ sidebar: 'left' }));
+
+  const toggleRightSidebar = () => dispatch(toggleSidebar({ sidebar: 'right' }));
+
+  const goBack = () => router.push('/dashboard');
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleRename = () => {
+    handleClose();
+
+    dispatch(
+      setModalState({
+        modal: 'dashboard.rename-resume',
+        state: {
+          open: true,
+          payload: {
+            item: resume,
+            onComplete: (newResume: Resume) => {
+              queryClient.invalidateQueries(RESUMES_QUERY);
+
+              router.push(`/${resume.user.username}/${newResume.slug}/build`);
+            },
+          },
+        },
+      })
+    );
+  };
+
+  const handleDuplicate = async () => {
+    handleClose();
+
+    const newResume = await duplicateMutation({ id: resume.id });
+
+    queryClient.invalidateQueries(RESUMES_QUERY);
+
+    router.push(`/${resume.user.username}/${newResume.slug}/build`);
+  };
+
+  const handleDelete = async () => {
+    handleClose();
+
+    await deleteMutation({ id: resume.id });
+
+    queryClient.invalidateQueries(RESUMES_QUERY);
+
+    goBack();
+  };
+
+  const handleShareLink = async () => {
+    handleClose();
+
+    const url = getResumeUrl(resume, { withHost: true });
+    await navigator.clipboard.writeText(url);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  return (
+    <AppBar elevation={0} position="fixed">
+      <Toolbar
+        variant="regular"
+        className={clsx({
+          [styles.header]: true,
+          [styles.pushLeft]: left.open,
+          [styles.pushRight]: right.open,
+        })}
+      >
+        <IconButton onClick={toggleLeftSidebar}>{left.open ? <ChevronLeftIcon /> : <ChevronRightIcon />}</IconButton>
+
+        <div className={styles.title}>
+          <IconButton className="opacity-50 hover:opacity-100" onClick={goBack}>
+            <HomeIcon />
+          </IconButton>
+
+          <span className="opacity-50">{'/'}</span>
+
+          <h1>{name}</h1>
+
+          <IconButton onClick={handleClick}>
+            <KeyboardArrowDownIcon />
+          </IconButton>
+
+          <Menu open={Boolean(anchorEl)} anchorEl={anchorEl} onClose={handleClose}>
+            <MenuItem onClick={handleRename}>
+              <ListItemIcon>
+                <DriveFileRenameOutline className="scale-90" />
+              </ListItemIcon>
+              <ListItemText>{t('builder.header.menu.rename')}</ListItemText>
+            </MenuItem>
+
+            <MenuItem onClick={handleDuplicate}>
+              <ListItemIcon>
+                <CopyAll className="scale-90" />
+              </ListItemIcon>
+              <ListItemText>{t('builder.header.menu.duplicate')}</ListItemText>
+            </MenuItem>
+
+            {resume.public ? (
+              <MenuItem onClick={handleShareLink}>
+                <ListItemIcon>
+                  <LinkIcon className="scale-90" />
+                </ListItemIcon>
+                <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+              </MenuItem>
+            ) : (
+              <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.share-link')}>
+                <div>
+                  <MenuItem>
+                    <ListItemIcon>
+                      <LinkIcon className="scale-90" />
+                    </ListItemIcon>
+                    <ListItemText>{t('builder.header.menu.share-link')}</ListItemText>
+                  </MenuItem>
+                </div>
+              </Tooltip>
+            )}
+
+            <Tooltip arrow placement="right" title={t<string>('builder.header.menu.tooltips.delete')}>
+              <MenuItem onClick={handleDelete}>
+                <ListItemIcon>
+                  <Delete className="scale-90" />
+                </ListItemIcon>
+                <ListItemText>{t('builder.header.menu.delete')}</ListItemText>
+              </MenuItem>
+            </Tooltip>
+          </Menu>
+        </div>
+
+        <IconButton onClick={toggleRightSidebar}>{right.open ? <ChevronRightIcon /> : <ChevronLeftIcon />}</IconButton>
+      </Toolbar>
+    </AppBar>
+  );
+};
+
+export default Header;

client/components/build/Center/Page.module.scss

@@ -0,0 +1,34 @@
+.container {
+  @apply flex flex-col items-center gap-2;
+  @apply rounded-sm;
+}
+
+.page {
+  width: 210mm;
+  min-height: 297mm;
+
+  @apply relative z-50 grid shadow;
+  @apply print:shadow-none;
+
+  :global(.printer-mode) & {
+    @apply shadow-none;
+  }
+
+  &.break::after {
+    content: 'A4 Page Break';
+    top: calc(297mm - 19px);
+
+    @apply absolute w-full border-b border-dashed border-neutral-800/75;
+    @apply flex items-end justify-end pr-2 pb-0.5 text-xs font-bold text-neutral-800/75;
+    @apply print:hidden;
+
+    :global(.preview-mode) &,
+    :global(.printer-mode) & {
+      @apply hidden;
+    }
+  }
+}
+
+.pageNumber {
+  @apply text-center font-bold print:hidden;
+}

client/components/build/Center/Page.tsx

@@ -0,0 +1,59 @@
+import { css } from '@emotion/css';
+import { CustomCSS, Theme, Typography } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+
+import { useAppSelector } from '@/store/hooks';
+import templateMap from '@/templates/templateMap';
+import { generateThemeStyles, generateTypographyStyles } from '@/utils/styles';
+import { PageProps } from '@/utils/template';
+
+import styles from './Page.module.scss';
+
+type Props = PageProps & {
+  showPageNumbers?: boolean;
+};
+
+const Page: React.FC<Props> = ({ page, showPageNumbers = false }) => {
+  const { t } = useTranslation();
+
+  const resume = useAppSelector((state) => state.resume);
+  const breakLine: boolean = useAppSelector((state) => state.build.page.breakLine);
+
+  const theme: Theme = get(resume, 'metadata.theme');
+  const customCSS: CustomCSS = get(resume, 'metadata.css');
+  const template: string = get(resume, 'metadata.template');
+  const typography: Typography = get(resume, 'metadata.typography');
+
+  const themeCSS = useMemo(() => !isEmpty(theme) && generateThemeStyles(theme), [theme]);
+  const typographyCSS = useMemo(() => !isEmpty(typography) && generateTypographyStyles(typography), [typography]);
+  const TemplatePage: React.FC<PageProps> | null = useMemo(() => templateMap[template].component, [template]);
+
+  return (
+    <div data-page={page + 1} className={styles.container}>
+      <div
+        className={clsx({
+          reset: true,
+          [styles.page]: true,
+          [styles.break]: breakLine,
+          [css(themeCSS)]: true,
+          [css(typographyCSS)]: true,
+          [css(customCSS.value)]: customCSS.visible,
+        })}
+      >
+        {TemplatePage && <TemplatePage page={page} />}
+      </div>
+
+      {showPageNumbers && (
+        <h4 className={styles.pageNumber}>
+          {t('builder.common.glossary.page')} {page + 1}
+        </h4>
+      )}
+    </div>
+  );
+};
+
+export default Page;

client/components/build/LeftSidebar/LeftSidebar.module.scss

@@ -0,0 +1,45 @@
+.container {
+  @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
+  @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
+  @apply relative flex border-r-2 border-neutral-50/10;
+
+  nav {
+    @apply absolute inset-y-0 left-0;
+    @apply w-14 py-4 md:w-16 md:px-2;
+    @apply bg-neutral-100 shadow dark:bg-neutral-800;
+    @apply flex flex-col items-center justify-between;
+
+    hr {
+      @apply mt-2;
+    }
+
+    > div {
+      @apply grid gap-2;
+    }
+
+    .sections svg {
+      @apply opacity-75 transition-opacity hover:opacity-100;
+    }
+  }
+
+  main {
+    @apply overflow-y-scroll p-4;
+    @apply absolute inset-y-0 left-12 right-0 md:left-16;
+
+    > section {
+      @apply grid gap-4;
+      @apply pt-5 pb-7 first:pt-0;
+      @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
+
+      hr {
+        @apply my-2;
+      }
+    }
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

client/components/build/LeftSidebar/LeftSidebar.tsx

@@ -0,0 +1,126 @@
+import { Add, Star } from '@mui/icons-material';
+import { Button, Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import { Section as SectionRecord } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import { validate } from 'uuid';
+
+import Logo from '@/components/shared/Logo';
+import { getCustomSections, left } from '@/config/sections';
+import { setSidebarState } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { addSection } from '@/store/resume/resumeSlice';
+
+import styles from './LeftSidebar.module.scss';
+import Section from './sections/Section';
+
+const LeftSidebar = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const sections = useAppSelector((state) => state.resume.sections);
+  const { open } = useAppSelector((state) => state.build.sidebar.left);
+
+  const customSections = useMemo(() => getCustomSections(sections), [sections]);
+
+  const handleOpen = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: true } }));
+
+  const handleClose = () => dispatch(setSidebarState({ sidebar: 'left', state: { open: false } }));
+
+  const handleClick = (id: string) => {
+    const elementId = validate(id) ? `#section-${id}` : `#${id}`;
+    const section = document.querySelector(elementId);
+
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  const handleAddSection = () => {
+    const newSection: SectionRecord = {
+      name: 'Custom Section',
+      type: 'custom',
+      visible: true,
+      columns: 2,
+      items: [],
+    };
+
+    dispatch(addSection({ value: newSection }));
+  };
+
+  return (
+    <SwipeableDrawer
+      open={open}
+      anchor="left"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      PaperProps={{ className: '!shadow-lg' }}
+      variant={isDesktop ? 'persistent' : 'temporary'}
+    >
+      <div className={styles.container}>
+        <nav>
+          <div>
+            <Link href="/dashboard">
+              <a className="inline-flex">
+                <Logo size={40} />
+              </a>
+            </Link>
+            <Divider />
+          </div>
+
+          <div className={styles.sections}>
+            {left.map(({ id, icon }) => (
+              <Tooltip
+                arrow
+                key={id}
+                placement="right"
+                title={get(sections, `${id}.name`, t<string>(`builder.leftSidebar.sections.${id}.heading`))}
+              >
+                <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
+              </Tooltip>
+            ))}
+
+            {customSections.map(({ id }) => (
+              <Tooltip key={id} title={get(sections, `${id}.name`, '')} placement="right" arrow>
+                <IconButton onClick={() => handleClick(id)}>
+                  <Star />
+                </IconButton>
+              </Tooltip>
+            ))}
+          </div>
+
+          <div />
+        </nav>
+
+        <main>
+          {left.map(({ id, component }) => (
+            <section key={id} id={id}>
+              {component}
+            </section>
+          ))}
+
+          {customSections.map(({ id }) => (
+            <section key={id} id={`section-${id}`}>
+              <Section path={`sections.${id}`} isEditable isHideable isDeletable />
+            </section>
+          ))}
+
+          <div className="py-6 text-right">
+            <Button fullWidth variant="outlined" startIcon={<Add />} onClick={handleAddSection}>
+              {t('builder.common.actions.add', { token: t('builder.leftSidebar.sections.section.heading') })}
+            </Button>
+          </div>
+        </main>
+      </div>
+    </SwipeableDrawer>
+  );
+};
+
+export default LeftSidebar;

client/components/build/LeftSidebar/sections/Basics.tsx

@@ -0,0 +1,81 @@
+import { PhotoFilter } from '@mui/icons-material';
+import { Button, Divider, Popover } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+import PhotoFilters from './PhotoFilters';
+import PhotoUpload from './PhotoUpload';
+
+const Basics = () => {
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Heading path="sections.basics" name={t('builder.leftSidebar.sections.basics.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="flex flex-col items-center gap-4 sm:col-span-2 sm:flex-row">
+          <PhotoUpload />
+
+          <div className="flex w-full flex-col-reverse gap-4 sm:flex-col sm:gap-2">
+            <ResumeInput label={t('builder.leftSidebar.sections.basics.name.label')} path="basics.name" />
+
+            <Button variant="outlined" startIcon={<PhotoFilter />} onClick={handleClick}>
+              {t('builder.leftSidebar.sections.basics.actions.photo-filters')}
+            </Button>
+
+            <Popover
+              open={Boolean(anchorEl)}
+              anchorEl={anchorEl}
+              onClose={handleClose}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'center',
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'center',
+              }}
+            >
+              <PhotoFilters />
+            </Popover>
+          </div>
+        </div>
+
+        <ResumeInput label={t('builder.common.form.email.label')} path="basics.email" className="sm:col-span-2" />
+        <ResumeInput label={t('builder.common.form.phone.label')} path="basics.phone" />
+        <ResumeInput label={t('builder.common.form.url.label')} path="basics.website" />
+
+        <Divider className="sm:col-span-2" />
+
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.basics.headline.label')}
+          path="basics.headline"
+          className="sm:col-span-2"
+        />
+        <ResumeInput
+          type="textarea"
+          label={t('builder.common.form.summary.label')}
+          path="basics.summary"
+          className="sm:col-span-2"
+          markdownSupported
+        />
+      </div>
+    </>
+  );
+};
+
+export default Basics;

client/components/build/LeftSidebar/sections/Location.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import ResumeInput from '@/components/shared/ResumeInput';
+
+const Location = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="sections.location" name={t('builder.leftSidebar.sections.location.heading')} />
+
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.address.label')}
+          path="basics.location.address"
+          className="sm:col-span-2"
+        />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.city.label')} path="basics.location.city" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.region.label')} path="basics.location.region" />
+        <ResumeInput label={t('builder.leftSidebar.sections.location.country.label')} path="basics.location.country" />
+        <ResumeInput
+          label={t('builder.leftSidebar.sections.location.postal-code.label')}
+          path="basics.location.postalCode"
+        />
+      </div>
+    </>
+  );
+};
+
+export default Location;

client/components/build/LeftSidebar/sections/PhotoFilters.tsx

@@ -0,0 +1,97 @@
+import { Circle, Square, SquareRounded } from '@mui/icons-material';
+import { Checkbox, Divider, FormControlLabel, Slider, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { Photo, PhotoShape } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const PhotoFilters = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+  const size: number = get(photo, 'filters.size', 128);
+  const shape: PhotoShape = get(photo, 'filters.shape', 'square');
+  const grayscale: boolean = get(photo, 'filters.grayscale', false);
+  const border: boolean = get(photo, 'filters.border', false);
+
+  const handleChangeSize = (size: number | number[]) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.size', value: size }));
+
+  const handleChangeShape = (shape: PhotoShape) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.shape', value: shape }));
+
+  const handleSetGrayscale = (value: boolean) =>
+    dispatch(setResumeState({ path: 'basics.photo.filters.grayscale', value }));
+
+  const handleSetBorder = (value: boolean) => dispatch(setResumeState({ path: 'basics.photo.filters.border', value }));
+
+  return (
+    <div className="flex flex-col gap-2 p-5 dark:bg-neutral-800">
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.size.heading')}</h4>
+
+        <div className="mx-2">
+          <Slider
+            min={32}
+            max={512}
+            step={2}
+            marks={[
+              { value: 32, label: '32' },
+              { value: 128, label: '128' },
+              { value: 256, label: '256' },
+              { value: 512, label: '512' },
+            ]}
+            value={size}
+            onChange={(_, value: number | number[]) => handleChangeSize(value)}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div>
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.effects.heading')}</h4>
+
+        <div className="flex items-center">
+          <FormControlLabel
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.grayscale.label')}
+            control={
+              <Checkbox color="secondary" checked={grayscale} onChange={(_, value) => handleSetGrayscale(value)} />
+            }
+          />
+
+          <FormControlLabel
+            label={t<string>('builder.leftSidebar.sections.basics.photo-filters.effects.border.label')}
+            control={<Checkbox color="secondary" checked={border} onChange={(_, value) => handleSetBorder(value)} />}
+          />
+        </div>
+      </div>
+
+      <Divider />
+
+      <div className="flex flex-col gap-2">
+        <h4 className="font-medium">{t('builder.leftSidebar.sections.basics.photo-filters.shape.heading')}</h4>
+
+        <ToggleButtonGroup exclusive value={shape} onChange={(_, value) => handleChangeShape(value)}>
+          <ToggleButton size="small" value="square" className="w-14">
+            <Square fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="rounded-square" className="w-14">
+            <SquareRounded fontSize="small" />
+          </ToggleButton>
+
+          <ToggleButton size="small" value="circle" className="w-14">
+            <Circle fontSize="small" />
+          </ToggleButton>
+        </ToggleButtonGroup>
+      </div>
+    </div>
+  );
+};
+
+export default PhotoFilters;

client/components/build/LeftSidebar/sections/PhotoUpload.tsx

@@ -0,0 +1,83 @@
+import { Avatar, IconButton, Skeleton, Tooltip } from '@mui/material';
+import { Photo, Resume } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import React, { useRef } from 'react';
+import toast from 'react-hot-toast';
+import { useMutation } from 'react-query';
+
+import { ServerError } from '@/services/axios';
+import { deletePhoto, DeletePhotoParams, uploadPhoto, UploadPhotoParams } from '@/services/resume';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const FILE_UPLOAD_MAX_SIZE = 2000000; // 2 MB
+
+const PhotoUpload: React.FC = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const id: number = useAppSelector((state) => get(state.resume, 'id'));
+  const photo: Photo = useAppSelector((state) => get(state.resume, 'basics.photo'));
+
+  const { mutateAsync: uploadMutation, isLoading } = useMutation<Resume, ServerError, UploadPhotoParams>(uploadPhoto);
+
+  const { mutateAsync: deleteMutation } = useMutation<Resume, ServerError, DeletePhotoParams>(deletePhoto);
+
+  const handleClick = async () => {
+    if (fileInputRef.current) {
+      if (!isEmpty(photo.url)) {
+        try {
+          await deleteMutation({ id });
+        } finally {
+          dispatch(setResumeState({ path: 'basics.photo.url', value: '' }));
+        }
+      } else {
+        fileInputRef.current.click();
+      }
+
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (event.target.files && event.target.files[0]) {
+      const file = event.target.files[0];
+
+      if (file.size > FILE_UPLOAD_MAX_SIZE) {
+        toast.error(t('common.toast.error.upload-photo-size'));
+        return;
+      }
+
+      const resume = await uploadMutation({ id, file });
+
+      dispatch(setResumeState({ path: 'basics.photo.url', value: get(resume, 'basics.photo.url', '') }));
+    }
+  };
+
+  return (
+    <IconButton onClick={handleClick}>
+      {isLoading ? (
+        <Skeleton variant="circular" width={96} height={96} />
+      ) : (
+        <Tooltip
+          title={
+            isEmpty(photo.url)
+              ? t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.upload')
+              : t<string>('builder.leftSidebar.sections.basics.photo-upload.tooltip.remove')
+          }
+        >
+          <Avatar sx={{ width: 96, height: 96 }} src={photo.url} />
+        </Tooltip>
+      )}
+
+      <input hidden type="file" ref={fileInputRef} onChange={handleChange} accept="image/*" />
+    </IconButton>
+  );
+};
+
+export default PhotoUpload;

client/components/build/LeftSidebar/sections/Profiles.tsx

@@ -0,0 +1,52 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import List from '@/components/shared/List';
+import { useAppDispatch } from '@/store/hooks';
+import { setModalState } from '@/store/modal/modalSlice';
+import { duplicateItem } from '@/store/resume/resumeSlice';
+
+const Profiles = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const handleAdd = () => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    dispatch(setModalState({ modal: 'builder.sections.profile', state: { open: true, payload: { item } } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => {
+    dispatch(duplicateItem({ path: 'basics.profiles', value: item }));
+  };
+
+  return (
+    <>
+      <Heading path="sections.profiles" name={t('builder.leftSidebar.sections.profiles.heading')} />
+
+      <List
+        path="basics.profiles"
+        titleKey="username"
+        subtitleKey="network"
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+      />
+
+      <footer className="flex justify-end">
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', {
+            section: t('builder.leftSidebar.sections.profiles.heading', { count: 1 }),
+          })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Profiles;

client/components/build/LeftSidebar/sections/Section.tsx

@@ -0,0 +1,84 @@
+import { Add } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { ListItem } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { validate } from 'uuid';
+
+import Heading from '@/components/shared/Heading';
+import List from '@/components/shared/List';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { ModalName, setModalState } from '@/store/modal/modalSlice';
+import { duplicateItem } from '@/store/resume/resumeSlice';
+
+import SectionSettings from './SectionSettings';
+
+type Props = {
+  path: `sections.${string}`;
+  name?: string;
+  titleKey?: string;
+  subtitleKey?: string;
+  isEditable?: boolean;
+  isHideable?: boolean;
+  isDeletable?: boolean;
+};
+
+const Section: React.FC<Props> = ({
+  path,
+  name = 'Section Name',
+  titleKey = 'title',
+  subtitleKey = 'subtitle',
+  isEditable = false,
+  isHideable = false,
+  isDeletable = false,
+}) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const heading = useAppSelector<string>((state) => get(state.resume, `${path}.name`, name));
+  const visibility = useAppSelector<boolean>((state) => get(state.resume, `${path}.visible`, true));
+
+  const handleAdd = () => {
+    const id = path.split('.').at(-1) as string;
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+
+    dispatch(setModalState({ modal, state: { open: true, payload: { path } } }));
+  };
+
+  const handleEdit = (item: ListItem) => {
+    const id = path.split('.').at(-1) as string;
+    const modal: ModalName = validate(id) ? 'builder.sections.custom' : `builder.${path}`;
+    const payload = validate(id) ? { path, item } : { item };
+
+    dispatch(setModalState({ modal, state: { open: true, payload } }));
+  };
+
+  const handleDuplicate = (item: ListItem) => dispatch(duplicateItem({ path: `${path}.items`, value: item }));
+
+  return (
+    <>
+      <Heading path={path} name={name} isEditable={isEditable} isHideable={isHideable} isDeletable={isDeletable} />
+
+      <List
+        path={`${path}.items`}
+        titleKey={titleKey}
+        subtitleKey={subtitleKey}
+        onEdit={handleEdit}
+        onDuplicate={handleDuplicate}
+        className={clsx({ 'opacity-50': !visibility })}
+      />
+
+      <footer className="flex items-center justify-between">
+        <SectionSettings path={path} />
+
+        <Button variant="outlined" startIcon={<Add />} onClick={handleAdd}>
+          {t('builder.common.actions.add', { token: heading })}
+        </Button>
+      </footer>
+    </>
+  );
+};
+
+export default Section;

client/components/build/LeftSidebar/sections/SectionSettings.tsx

@@ -0,0 +1,66 @@
+import { ViewWeek } from '@mui/icons-material';
+import { ButtonBase, Popover, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useState } from 'react';
+
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+type Props = {
+  path: string;
+};
+
+const SectionSettings: React.FC<Props> = ({ path }) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const columns = useAppSelector<number>((state) => get(state.resume, `${path}.columns`, 2));
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const handleSetColumns = (index: number) => dispatch(setResumeState({ path: `${path}.columns`, value: index }));
+
+  return (
+    <div>
+      <Tooltip title={t<string>('builder.common.columns.tooltip')}>
+        <ButtonBase onClick={handleClick} sx={{ padding: 1, borderRadius: 1 }} className="opacity-50 hover:opacity-75">
+          <ViewWeek /> <span className="ml-1.5 text-xs">{columns}</span>
+        </ButtonBase>
+      </Tooltip>
+
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'left',
+        }}
+      >
+        <div className="p-5 dark:bg-neutral-800">
+          <h4 className="mb-2 font-medium">{t('builder.common.columns.heading')}</h4>
+
+          <ToggleButtonGroup exclusive value={columns} onChange={(_, value: number) => handleSetColumns(value)}>
+            {[1, 2, 3, 4].map((index) => (
+              <ToggleButton key={index} value={index} size="small" className="w-12">
+                {index}
+              </ToggleButton>
+            ))}
+          </ToggleButtonGroup>
+        </div>
+      </Popover>
+    </div>
+  );
+};
+
+export default SectionSettings;

client/components/build/RightSidebar/RightSidebar.module.scss

@@ -0,0 +1,50 @@
+.container {
+  @apply h-screen w-[95vw] md:w-[70vw] lg:w-[50vw] xl:w-[30vw] 2xl:w-[28vw];
+  @apply bg-neutral-50 text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50;
+  @apply relative flex border-l-2 border-neutral-50/10;
+
+  nav {
+    @apply absolute inset-y-0 right-0;
+    @apply w-12 py-4 md:w-16 md:px-2;
+    @apply bg-neutral-100 shadow dark:bg-neutral-800;
+    @apply flex flex-col items-center justify-between;
+
+    hr {
+      @apply mt-2;
+    }
+
+    > div {
+      @apply grid gap-2;
+    }
+
+    .sections svg {
+      @apply opacity-75 transition-opacity hover:opacity-100;
+    }
+  }
+
+  main {
+    @apply overflow-y-scroll p-4;
+    @apply absolute inset-y-0 right-12 left-0 md:right-16;
+
+    > section {
+      @apply grid gap-4;
+      @apply pt-5 pb-7 first:pt-0;
+      @apply border-b border-neutral-900/10 last:border-b-0 dark:border-neutral-50/10;
+
+      hr {
+        @apply my-2;
+      }
+    }
+
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .footer {
+    @apply flex flex-col items-center justify-center gap-3 py-4;
+    @apply text-center text-xs leading-normal opacity-40;
+  }
+}

client/components/build/RightSidebar/RightSidebar.tsx

@@ -0,0 +1,86 @@
+import { Divider, IconButton, SwipeableDrawer, Tooltip, useMediaQuery, useTheme } from '@mui/material';
+import { capitalize } from 'lodash';
+import { useTranslation } from 'next-i18next';
+
+import Avatar from '@/components/shared/Avatar';
+import Footer from '@/components/shared/Footer';
+import { right } from '@/config/sections';
+import { setSidebarState } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+
+import styles from './RightSidebar.module.scss';
+
+const RightSidebar = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'));
+
+  const { open } = useAppSelector((state) => state.build.sidebar.right);
+
+  const handleOpen = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: true } }));
+
+  const handleClose = () => dispatch(setSidebarState({ sidebar: 'right', state: { open: false } }));
+
+  const handleClick = (id: string) => {
+    const section = document.querySelector(`#${id}`);
+
+    if (section) {
+      section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+  };
+
+  return (
+    <SwipeableDrawer
+      open={open}
+      anchor="right"
+      onOpen={handleOpen}
+      onClose={handleClose}
+      PaperProps={{ className: '!shadow-lg' }}
+      variant={isDesktop ? 'persistent' : 'temporary'}
+    >
+      <div className={styles.container}>
+        <nav>
+          <div>
+            <Avatar size={40} />
+            <Divider />
+          </div>
+
+          <div className={styles.sections}>
+            {right.map(({ id, icon }) => (
+              <Tooltip
+                key={id}
+                arrow
+                placement="right"
+                title={t<string>(`builder.rightSidebar.sections.${id}.heading`, { defaultValue: capitalize(id) })}
+              >
+                <IconButton onClick={() => handleClick(id)}>{icon}</IconButton>
+              </Tooltip>
+            ))}
+          </div>
+
+          <div />
+        </nav>
+
+        <main>
+          {right.map(({ id, component }) => (
+            <section key={id} id={id}>
+              {component}
+            </section>
+          ))}
+
+          <footer className={styles.footer}>
+            <Footer />
+
+            <div>v{process.env.appVersion}</div>
+          </footer>
+        </main>
+      </div>
+    </SwipeableDrawer>
+  );
+};
+
+export default RightSidebar;

client/components/build/RightSidebar/sections/CustomCSS.tsx

@@ -0,0 +1,49 @@
+import Editor from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import { CustomCSS as CustomCSSType } from '@reactive-resume/schema';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+const CustomCSS = () => {
+  const theme = useTheme();
+
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const customCSS: CustomCSSType = useAppSelector((state) => get(state.resume, 'metadata.css', {}));
+
+  const handleChange = (value: string | undefined) => {
+    dispatch(setResumeState({ path: 'metadata.css.value', value }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.css" name={t('builder.rightSidebar.sections.css.heading')} isHideable />
+
+      <Editor
+        height="200px"
+        language="css"
+        value={customCSS.value}
+        onChange={handleChange}
+        className={clsx({ 'opacity-50': !customCSS.visible })}
+        theme={theme.palette.mode === 'dark' ? 'vs-dark' : 'light'}
+        options={{
+          minimap: { enabled: false },
+          overviewRulerLanes: 0,
+          scrollBeyondLastColumn: 5,
+          overviewRulerBorder: false,
+          scrollBeyondLastLine: true,
+        }}
+      />
+    </>
+  );
+};
+
+export default CustomCSS;

client/components/build/RightSidebar/sections/Export.tsx

@@ -0,0 +1,81 @@
+import { PictureAsPdf, Schema } from '@mui/icons-material';
+import { List, ListItem, ListItemButton, ListItemText } from '@mui/material';
+import get from 'lodash/get';
+import pick from 'lodash/pick';
+import { useTranslation } from 'next-i18next';
+import { useMutation } from 'react-query';
+
+import Heading from '@/components/shared/Heading';
+import { ServerError } from '@/services/axios';
+import { printResumeAsPdf, PrintResumeAsPdfParams } from '@/services/printer';
+import { useAppSelector } from '@/store/hooks';
+
+const Export = () => {
+  const { t } = useTranslation();
+
+  const resume = useAppSelector((state) => state.resume);
+
+  const { mutateAsync, isLoading } = useMutation<string, ServerError, PrintResumeAsPdfParams>(printResumeAsPdf);
+
+  const pdfListItemText = {
+    normal: {
+      primary: t('builder.rightSidebar.sections.export.pdf.normal.primary'),
+      secondary: t('builder.rightSidebar.sections.export.pdf.normal.secondary'),
+    },
+    loading: {
+      primary: t('builder.rightSidebar.sections.export.pdf.loading.primary'),
+      secondary: t('builder.rightSidebar.sections.export.pdf.loading.secondary'),
+    },
+  };
+
+  const handleExportJSON = async () => {
+    const { nanoid } = await import('nanoid');
+    const download = (await import('downloadjs')).default;
+
+    const redactedResume = pick(resume, ['basics', 'sections', 'metadata', 'public']);
+    const jsonString = JSON.stringify(redactedResume, null, 4);
+    const filename = `RxResume_JSONExport_${nanoid()}.json`;
+
+    download(jsonString, filename, 'application/json');
+  };
+
+  const handleExportPDF = async () => {
+    const download = (await import('downloadjs')).default;
+
+    const slug = get(resume, 'slug');
+    const username = get(resume, 'user.username');
+
+    const url = await mutateAsync({ username, slug });
+
+    download(url);
+  };
+
+  return (
+    <>
+      <Heading path="metadata.export" name={t('builder.rightSidebar.sections.export.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        <ListItem sx={{ padding: 0 }}>
+          <ListItemButton className="gap-6" onClick={handleExportJSON}>
+            <Schema />
+
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.export.json.primary')}
+              secondary={t('builder.rightSidebar.sections.export.json.secondary')}
+            />
+          </ListItemButton>
+        </ListItem>
+
+        <ListItem sx={{ padding: 0 }}>
+          <ListItemButton className="gap-6" onClick={handleExportPDF} disabled={isLoading}>
+            <PictureAsPdf />
+
+            <ListItemText {...(isLoading ? pdfListItemText.loading : pdfListItemText.normal)} />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default Export;

client/components/build/RightSidebar/sections/Layout.module.scss

@@ -0,0 +1,43 @@
+.page {
+  @apply relative border pl-4 pb-4 dark:border-neutral-100/10;
+  @apply rounded bg-neutral-100 dark:bg-neutral-800;
+
+  .delete {
+    @apply opacity-50 hover:opacity-75;
+    @apply rotate-0 hover:rotate-90;
+    @apply transition-[opacity,transform];
+  }
+
+  .container {
+    @apply grid grid-cols-2 gap-2;
+  }
+
+  .heading {
+    @apply relative z-10 my-3;
+    @apply text-xs font-semibold;
+  }
+}
+
+.column {
+  @apply relative w-full px-4;
+
+  .heading {
+    @apply relative z-10 my-3;
+    @apply text-xs font-semibold;
+  }
+
+  .base {
+    @apply absolute inset-0 w-4/5;
+    @apply rounded bg-neutral-200 dark:bg-neutral-700;
+  }
+}
+
+.section {
+  @apply relative my-3 w-full px-4 py-2;
+  @apply cursor-move break-all rounded text-xs capitalize;
+  @apply bg-neutral-800/90 text-neutral-50 dark:bg-neutral-50/90 dark:text-neutral-800;
+
+  &.disabled {
+    @apply opacity-60;
+  }
+}

client/components/build/RightSidebar/sections/Layout.tsx

@@ -0,0 +1,143 @@
+import { Add, Close, Restore } from '@mui/icons-material';
+import { Button, IconButton, Tooltip } from '@mui/material';
+import clsx from 'clsx';
+import cloneDeep from 'lodash/cloneDeep';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { DragDropContext, Draggable, DraggableLocation, Droppable, DropResult } from 'react-beautiful-dnd';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { addPage, deletePage, setResumeState } from '@/store/resume/resumeSlice';
+
+import styles from './Layout.module.scss';
+
+const getIndices = (location: DraggableLocation) => ({
+  page: +location.droppableId.split('.')[0],
+  column: +location.droppableId.split('.')[1],
+  section: +location.index,
+});
+
+const Layout = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const layout = useAppSelector((state) => state.resume.metadata.layout);
+  const resumeSections = useAppSelector((state) => state.resume.sections);
+
+  const onDragEnd = (dropResult: DropResult) => {
+    const { source: srcLoc, destination: destLoc } = dropResult;
+
+    if (!destLoc) return;
+
+    const newLayout = cloneDeep(layout);
+
+    const srcIndex = getIndices(srcLoc);
+    const destIndex = getIndices(destLoc);
+    const section = layout[srcIndex.page][srcIndex.column][srcIndex.section];
+
+    // Remove item at source
+    newLayout[srcIndex.page][srcIndex.column].splice(srcIndex.section, 1);
+
+    // Insert item at destination
+    newLayout[destIndex.page][destIndex.column].splice(destIndex.section, 0, section);
+
+    dispatch(setResumeState({ path: 'metadata.layout', value: newLayout }));
+  };
+
+  const handleAddPage = () => dispatch(addPage());
+
+  const handleDeletePage = (page: number) => dispatch(deletePage({ page }));
+
+  const handleResetLayout = () => {
+    for (let i = layout.length - 1; i > 0; i--) {
+      handleDeletePage(i);
+    }
+  };
+
+  return (
+    <>
+      <Heading
+        path="metadata.layout"
+        name={t('builder.rightSidebar.sections.layout.heading')}
+        action={
+          <Tooltip title={t<string>('builder.rightSidebar.sections.layout.tooltip.reset-layout')}>
+            <IconButton onClick={handleResetLayout}>
+              <Restore />
+            </IconButton>
+          </Tooltip>
+        }
+      />
+
+      <DragDropContext onDragEnd={onDragEnd}>
+        {/* Pages */}
+        {layout.map((columns, pageIndex) => (
+          <div key={pageIndex} className={styles.page}>
+            <div className="flex items-center justify-between pr-3">
+              <p className={styles.heading}>
+                {t('builder.common.glossary.page')} {pageIndex + 1}
+              </p>
+
+              <div className={clsx(styles.delete, { hidden: pageIndex === 0 })}>
+                <Tooltip
+                  title={t<string>('builder.common.actions.delete', { token: t('builder.common.glossary.page') })}
+                >
+                  <IconButton size="small" onClick={() => handleDeletePage(pageIndex)}>
+                    <Close fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </div>
+            </div>
+
+            <div className={styles.container}>
+              {/* Sections */}
+              {columns.map((sections, columnIndex) => {
+                const index = `${pageIndex}.${columnIndex}`;
+
+                return (
+                  <Droppable key={index} droppableId={index}>
+                    {(provided) => (
+                      <div ref={provided.innerRef} className={styles.column} {...provided.droppableProps}>
+                        <p className={styles.heading}>{columnIndex ? 'Sidebar' : 'Main'}</p>
+
+                        <div className={styles.base} />
+
+                        {/* Sections */}
+                        {sections.map((sectionId, sectionIndex) => (
+                          <Draggable key={sectionId} draggableId={sectionId} index={sectionIndex}>
+                            {(provided) => (
+                              <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
+                                <div
+                                  className={clsx(styles.section, {
+                                    [styles.disabled]: !get(resumeSections, `${sectionId}.visible`, true),
+                                  })}
+                                >
+                                  {get(resumeSections, `${sectionId}.name`)}
+                                </div>
+                              </div>
+                            )}
+                          </Draggable>
+                        ))}
+
+                        {provided.placeholder}
+                      </div>
+                    )}
+                  </Droppable>
+                );
+              })}
+            </div>
+          </div>
+        ))}
+
+        <div className="flex items-center justify-end">
+          <Button variant="outlined" startIcon={<Add />} onClick={handleAddPage}>
+            {t('builder.common.actions.add', { token: t('builder.common.glossary.page') })}
+          </Button>
+        </div>
+      </DragDropContext>
+    </>
+  );
+};
+
+export default Layout;

client/components/build/RightSidebar/sections/Links.module.scss

@@ -0,0 +1,20 @@
+.container {
+  @apply grid gap-4;
+
+  .section {
+    @apply grid gap-2 rounded p-6;
+    @apply bg-neutral-100 dark:bg-neutral-800;
+
+    h2 {
+      @apply inline-flex items-center gap-2 text-base font-medium;
+    }
+
+    p {
+      @apply mb-3 text-xs leading-loose;
+    }
+  }
+
+  a {
+    @apply hover:no-underline;
+  }
+}

client/components/build/RightSidebar/sections/Links.tsx

@@ -0,0 +1,56 @@
+import { BugReport, Coffee, GitHub, Link, Savings } from '@mui/icons-material';
+import { Button } from '@mui/material';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import { DONATION_URL, GITHUB_ISSUES_URL, GITHUB_URL } from '@/constants/index';
+
+import styles from './Links.module.scss';
+
+const Links = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="metadata.links" name={t('builder.rightSidebar.sections.links.heading')} />
+
+      <div className={styles.container}>
+        <div className={styles.section}>
+          <h2>
+            <Savings fontSize="small" />
+            {t('builder.rightSidebar.sections.links.donate.heading')}
+          </h2>
+
+          <p>{t('builder.rightSidebar.sections.links.donate.body')}</p>
+
+          <a href={DONATION_URL} target="_blank" rel="noreferrer">
+            <Button startIcon={<Coffee />}>{t('builder.rightSidebar.sections.links.donate.button')}</Button>
+          </a>
+        </div>
+
+        <div className={styles.section}>
+          <h2>
+            <BugReport fontSize="small" />
+            {t('builder.rightSidebar.sections.links.bugs-features.heading')}
+          </h2>
+
+          <p>{t('builder.rightSidebar.sections.links.bugs-features.body')}</p>
+
+          <a href={GITHUB_ISSUES_URL} target="_blank" rel="noreferrer">
+            <Button startIcon={<GitHub />}>{t('builder.rightSidebar.sections.links.bugs-features.button')}</Button>
+          </a>
+        </div>
+
+        <div>
+          <a href={GITHUB_URL} target="_blank" rel="noreferrer">
+            <Button variant="text" startIcon={<Link />}>
+              {t('builder.rightSidebar.sections.links.github')}
+            </Button>
+          </a>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Links;

client/components/build/RightSidebar/sections/Settings.tsx

@@ -0,0 +1,199 @@
+import { Anchor, DeleteForever, Palette } from '@mui/icons-material';
+import {
+  Autocomplete,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  ListSubheader,
+  Switch,
+  TextField,
+} from '@mui/material';
+import { DateConfig, Resume } from '@reactive-resume/schema';
+import dayjs from 'dayjs';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useMemo } from 'react';
+import { useMutation } from 'react-query';
+
+import Heading from '@/components/shared/Heading';
+import ThemeSwitch from '@/components/shared/ThemeSwitch';
+import { Language, languageMap, languages } from '@/config/languages';
+import { ServerError } from '@/services/axios';
+import queryClient from '@/services/react-query';
+import { loadSampleData, LoadSampleDataParams, resetResume, ResetResumeParams } from '@/services/resume';
+import { setTheme, togglePageBreakLine, togglePageOrientation } from '@/store/build/buildSlice';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import { dateFormatOptions } from '@/utils/date';
+
+const Settings = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const resume = useAppSelector((state) => state.resume);
+  const theme = useAppSelector((state) => state.build.theme);
+  const breakLine = useAppSelector((state) => state.build.page.breakLine);
+  const orientation = useAppSelector((state) => state.build.page.orientation);
+
+  const id: number = useMemo(() => get(resume, 'id'), [resume]);
+  const slug: string = useMemo(() => get(resume, 'slug'), [resume]);
+  const username: string = useMemo(() => get(resume, 'user.username'), [resume]);
+  const language: string = useMemo(() => get(resume, 'metadata.language'), [resume]);
+  const dateConfig: DateConfig = useMemo(() => get(resume, 'metadata.date'), [resume]);
+
+  const isDarkMode = useMemo(() => theme === 'dark', [theme]);
+  const exampleString = useMemo(() => `Eg. ${dayjs().format(dateConfig.format)}`, [dateConfig.format]);
+  const themeString = useMemo(() => (isDarkMode ? 'Matte Black Everything' : 'As bright as your future'), [isDarkMode]);
+
+  const { mutateAsync: loadSampleDataMutation } = useMutation<Resume, ServerError, LoadSampleDataParams>(
+    loadSampleData
+  );
+  const { mutateAsync: resetResumeMutation } = useMutation<Resume, ServerError, ResetResumeParams>(resetResume);
+
+  const handleSetTheme = (value: boolean) => dispatch(setTheme({ theme: value ? 'dark' : 'light' }));
+
+  const handleChangeDateFormat = (value: string | null) =>
+    dispatch(setResumeState({ path: 'metadata.date.format', value }));
+
+  const handleChangeLanguage = (value: Language | null) =>
+    dispatch(setResumeState({ path: 'metadata.language', value: value?.code }));
+
+  const handleLoadSampleData = async () => {
+    await loadSampleDataMutation({ id });
+
+    queryClient.invalidateQueries(`resume/${username}/${slug}`);
+  };
+
+  const handleResetResume = async () => {
+    await resetResumeMutation({ id });
+
+    queryClient.invalidateQueries(`resume/${username}/${slug}`);
+  };
+
+  return (
+    <>
+      <Heading path="metadata.settings" name={t('builder.rightSidebar.sections.settings.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        {/* Global Settings */}
+        <>
+          <ListSubheader className="rounded">
+            {t('builder.rightSidebar.sections.settings.global.heading')}
+          </ListSubheader>
+
+          <ListItem>
+            <ListItemIcon>
+              <Palette />
+            </ListItemIcon>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.global.theme.primary')}
+              secondary={themeString}
+            />
+            <ThemeSwitch checked={isDarkMode} onChange={(_, value: boolean) => handleSetTheme(value)} />
+          </ListItem>
+
+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t('builder.rightSidebar.sections.settings.global.date.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.global.date.secondary')}
+            />
+            <Autocomplete<string, false, boolean, false>
+              disableClearable
+              className="my-2 w-full"
+              options={dateFormatOptions}
+              value={dateConfig.format}
+              onChange={(_, value) => handleChangeDateFormat(value)}
+              renderInput={(params) => <TextField {...params} helperText={exampleString} />}
+            />
+          </ListItem>
+
+          <ListItem className="flex-col">
+            <ListItemText
+              className="w-full"
+              primary={t('builder.rightSidebar.sections.settings.global.language.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.global.language.secondary')}
+            />
+            <Autocomplete<Language, false, boolean, false>
+              disableClearable
+              className="my-2 w-full"
+              options={languages}
+              value={languageMap[language]}
+              getOptionLabel={(language) => {
+                if (language.localName) {
+                  return `${language.name} (${language.localName})`;
+                }
+
+                return language.name;
+              }}
+              isOptionEqualToValue={(a, b) => a.code === b.code}
+              onChange={(_, value) => handleChangeLanguage(value)}
+              renderInput={(params) => <TextField {...params} />}
+            />
+          </ListItem>
+        </>
+
+        {/* Page Settings */}
+        <>
+          <ListSubheader className="rounded">{t('builder.rightSidebar.sections.settings.page.heading')}</ListSubheader>
+
+          <ListItem>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.page.orientation.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.page.orientation.secondary')}
+            />
+            <Switch
+              color="secondary"
+              checked={orientation === 'horizontal'}
+              onChange={() => dispatch(togglePageOrientation())}
+            />
+          </ListItem>
+
+          <ListItem>
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.settings.page.break-line.primary')}
+              secondary={t('builder.rightSidebar.sections.settings.page.break-line.secondary')}
+            />
+            <Switch color="secondary" checked={breakLine} onChange={() => dispatch(togglePageBreakLine())} />
+          </ListItem>
+        </>
+
+        {/* Resume Settings */}
+        <>
+          <ListSubheader className="rounded">
+            {t('builder.rightSidebar.sections.settings.resume.heading')}
+          </ListSubheader>
+
+          <ListItem>
+            <ListItemButton onClick={handleLoadSampleData}>
+              <ListItemIcon>
+                <Anchor />
+              </ListItemIcon>
+              <ListItemText
+                primary={t('builder.rightSidebar.sections.settings.resume.sample.primary')}
+                secondary={t('builder.rightSidebar.sections.settings.resume.sample.secondary')}
+              />
+            </ListItemButton>
+          </ListItem>
+
+          <ListItem>
+            <ListItemButton onClick={handleResetResume}>
+              <ListItemIcon>
+                <DeleteForever />
+              </ListItemIcon>
+              <ListItemText
+                primary={t('builder.rightSidebar.sections.settings.resume.reset.primary')}
+                secondary={t('builder.rightSidebar.sections.settings.resume.reset.secondary')}
+              />
+            </ListItemButton>
+          </ListItem>
+        </>
+      </List>
+    </>
+  );
+};
+
+export default Settings;

client/components/build/RightSidebar/sections/Sharing.tsx

@@ -0,0 +1,78 @@
+import { CopyAll } from '@mui/icons-material';
+import { Checkbox, FormControlLabel, IconButton, List, ListItem, ListItemText, Switch, TextField } from '@mui/material';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+import { useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import getResumeUrl from '@/utils/getResumeUrl';
+
+const Sharing = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const [showShortUrl, setShowShortUrl] = useState(false);
+
+  const resume = useAppSelector((state) => state.resume);
+  const isPublic = useMemo(() => get(resume, 'public'), [resume]);
+  const url = useMemo(() => getResumeUrl(resume, { withHost: true }), [resume]);
+  const shortUrl = useMemo(() => getResumeUrl(resume, { withHost: true, shortUrl: true }), [resume]);
+
+  const handleSetVisibility = (value: boolean) => dispatch(setResumeState({ path: 'public', value }));
+
+  const handleCopyToClipboard = async () => {
+    const text = showShortUrl ? shortUrl : url;
+
+    await navigator.clipboard.writeText(text);
+
+    toast.success(t('common.toast.success.resume-link-copied'));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.sharing" name={t('builder.rightSidebar.sections.sharing.heading')} />
+
+      <List sx={{ padding: 0 }}>
+        <ListItem className="flex flex-col" sx={{ padding: 0 }}>
+          <div className="flex w-full items-center justify-between">
+            <ListItemText
+              primary={t('builder.rightSidebar.sections.sharing.visibility.title')}
+              secondary={t('builder.rightSidebar.sections.sharing.visibility.subtitle')}
+            />
+            <Switch color="secondary" checked={isPublic} onChange={(_, value) => handleSetVisibility(value)} />
+          </div>
+
+          <div className="mt-2 w-full">
+            <TextField
+              disabled
+              fullWidth
+              value={showShortUrl ? shortUrl : url}
+              InputProps={{
+                endAdornment: (
+                  <IconButton onClick={handleCopyToClipboard}>
+                    <CopyAll />
+                  </IconButton>
+                ),
+              }}
+            />
+          </div>
+
+          <div className="mt-1 flex w-full">
+            <FormControlLabel
+              label={t<string>('builder.rightSidebar.sections.sharing.short-url.label')}
+              control={
+                <Checkbox className="mr-1" checked={showShortUrl} onChange={(_, value) => setShowShortUrl(value)} />
+              }
+            />
+          </div>
+        </ListItem>
+      </List>
+    </>
+  );
+};
+
+export default Sharing;

client/components/build/RightSidebar/sections/Templates.module.scss

@@ -0,0 +1,22 @@
+.container {
+  @apply grid grid-cols-2 gap-4;
+}
+
+.template {
+  @apply grid text-center;
+
+  .preview {
+    aspect-ratio: 1 / 1.4142;
+
+    @apply relative grid rounded;
+    @apply border-2 border-transparent;
+
+    &.selected {
+      @apply border-black dark:border-white;
+    }
+  }
+
+  .label {
+    @apply mt-1 text-xs font-medium;
+  }
+}

client/components/build/RightSidebar/sections/Templates.tsx

@@ -0,0 +1,46 @@
+import { ButtonBase } from '@mui/material';
+import clsx from 'clsx';
+import get from 'lodash/get';
+import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+
+import Heading from '@/components/shared/Heading';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+import templateMap, { TemplateMeta } from '@/templates/templateMap';
+
+import styles from './Templates.module.scss';
+
+const Templates = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const currentTemplate: string = useAppSelector((state) => get(state.resume, 'metadata.template'));
+
+  const handleChange = (template: TemplateMeta) => {
+    dispatch(setResumeState({ path: 'metadata.template', value: template.id }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.templates" name={t('builder.rightSidebar.sections.templates.heading')} />
+
+      <div className={styles.container}>
+        {Object.values(templateMap).map((template) => (
+          <div key={template.id} className={styles.template}>
+            <div className={clsx(styles.preview, { [styles.selected]: template.id === currentTemplate })}>
+              <ButtonBase onClick={() => handleChange(template)}>
+                <Image src={template.preview} alt={template.name} className="rounded-sm" layout="fill" />
+              </ButtonBase>
+            </div>
+
+            <p className={styles.label}>{template.name}</p>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default Templates;

client/components/build/RightSidebar/sections/Theme.module.scss

@@ -0,0 +1,8 @@
+.container {
+  @apply grid sm:grid-cols-2 gap-4;
+}
+
+.colorOptions {
+  @apply col-span-2 mb-4;
+  @apply grid grid-cols-8 gap-y-2 justify-items-center;
+}

client/components/build/RightSidebar/sections/Theme.tsx

@@ -0,0 +1,57 @@
+import { Theme } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import { useTranslation } from 'next-i18next';
+
+import ColorAvatar from '@/components/shared/ColorAvatar';
+import ColorPicker from '@/components/shared/ColorPicker';
+import Heading from '@/components/shared/Heading';
+import { colorOptions } from '@/config/colors';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+import styles from './Theme.module.scss';
+
+const Theme = () => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const { background, text, primary } = useAppSelector<Theme>((state) => get(state.resume, 'metadata.theme'));
+
+  const handleChange = (property: string, color: string) => {
+    dispatch(setResumeState({ path: `metadata.theme.${property}`, value: color }));
+  };
+
+  return (
+    <>
+      <Heading path="metadata.theme" name={t('builder.rightSidebar.sections.theme.heading')} />
+
+      <div className={styles.container}>
+        <div className={styles.colorOptions}>
+          {colorOptions.map((color) => (
+            <ColorAvatar key={color} color={color} onClick={(color) => handleChange('primary', color)} />
+          ))}
+        </div>
+
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.primary.label')}
+          color={primary}
+          className="col-span-2"
+          onChange={(color) => handleChange('primary', color)}
+        />
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.background.label')}
+          color={background}
+          onChange={(color) => handleChange('background', color)}
+        />
+        <ColorPicker
+          label={t('builder.rightSidebar.sections.theme.form.text.label')}
+          color={text}
+          onChange={(color) => handleChange('text', color)}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Theme;

client/components/build/RightSidebar/sections/Typography.module.scss

@@ -0,0 +1,11 @@
+.container {
+  @apply grid gap-4 xl:grid-cols-2;
+}
+
+.subheading {
+  @apply mt-2 font-medium;
+}
+
+.slider {
+  @apply px-6;
+}

client/components/build/RightSidebar/sections/Typography.tsx

@@ -0,0 +1,106 @@
+import { Autocomplete, Skeleton, Slider, TextField } from '@mui/material';
+import { Font, TypeCategory, TypeProperty, Typography as TypographyType } from '@reactive-resume/schema';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import { useTranslation } from 'next-i18next';
+import { useQuery } from 'react-query';
+
+import Heading from '@/components/shared/Heading';
+import { FONTS_QUERY } from '@/constants/index';
+import { fetchFonts } from '@/services/fonts';
+import { useAppDispatch, useAppSelector } from '@/store/hooks';
+import { setResumeState } from '@/store/resume/resumeSlice';
+
+import styles from './Typography.module.scss';
+
+const TypographySkeleton: React.FC = () => (
+  <>
+    <Skeleton variant="text" />
+    <div className={styles.container}>
+      <Skeleton variant="rectangular" height={60} />
+      <Skeleton variant="rectangular" height={60} />
+    </div>
+  </>
+);
+
+type WidgetProps = {
+  label: string;
+  category: TypeCategory;
+};
+
+const Widgets: React.FC<WidgetProps> = ({ label, category }) => {
+  const { t } = useTranslation();
+
+  const dispatch = useAppDispatch();
+
+  const { family, size } = useAppSelector<TypographyType>((state) => get(state.resume, 'metadata.typography'));
+
+  const { data: fonts } = useQuery(FONTS_QUERY, fetchFonts, {
+    select: (fonts) => fonts.sort((a, b) => a.category.localeCompare(b.category)),
+  });
+
+  const handleChange = (property: TypeProperty, value: number | number[] | Font | null) => {
+    if (!value) return;
+
+    dispatch(
+      setResumeState({
+        path: `metadata.typography.${property}.${category}`,
+        value: property === 'family' ? (value as Font).family : value,
+      })
+    );
+  };
+
+  if (!fonts || isEmpty(fonts)) return <TypographySkeleton />;
+
+  return (
+    <>
+      <h5 className={styles.subheading}>{label}</h5>
+
+      <div className={styles.container}>
+        <div className={styles.slider}>
+          <Slider
+            min={12}
+            max={36}
+            step={1}
+            marks={[
+              { value: 12, label: '12px' },
+              { value: 24, label: t('builder.rightSidebar.sections.typography.form.font-size.label') },
+              { value: 36, label: '36px' },
+            ]}
+            valueLabelDisplay="auto"
+            value={size[category]}
+            onChange={(_, size: number | number[]) => handleChange('size', size)}
+          />
+        </div>
+
+        <Autocomplete<Font, false, boolean, false>
+          options={fonts}
+          disableClearable={true}
+          groupBy={(font) => font.category}
+          getOptionLabel={(font) => font.family}
+          isOptionEqualToValue={(a, b) => a.family === b.family}
+          value={fonts.find((font) => font.family === family[category])}
+          onChange={(_, font: Font | null) => handleChange('family', font)}
+          renderInput={(params) => (
+            <TextField {...params} label={t('builder.rightSidebar.sections.typography.form.font-family.label')} />
+          )}
+        />
+      </div>
+    </>
+  );
+};
+
+const Typography = () => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <Heading path="metadata.typography" name={t('builder.rightSidebar.sections.typography.heading')} />
+
+      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.headings.label')} category="heading" />
+      <Widgets label={t('builder.rightSidebar.sections.typography.widgets.body.label')} category="body" />
+    </>
+  );
+};
+
+export default Typography;