Skip to content

Commit

Permalink
Merge pull request #1337 from MiracleDevs/dev
Browse files Browse the repository at this point in the history 
Navigation Bar and Footer Updates
  • Loading branch information
@bradjohnl
bradjohnl authored Nov 30, 2023
2 parents 4a96d66 + 4e2081e commit 8c253a4
Show file tree
Hide file tree
Showing 18 changed files with 246 additions and 297 deletions.
2 changes: 1 addition & 1 deletion docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ module.exports = {
directusGraphqlUrl: process.env.DIRECTUS_GRAPHQL_URL,
directusToken: process.env.DIRECTUS_TOKEN,
query:
"query { header { translations { languages_code { code } login_text search_placeholder logo { id } nav_items { header_nav_item_id { title columns { header_nav_column_id { groups { header_link_column_id { title links { link_id { title type url open_in_new_tab children { related_link_id { title type url open_in_new_tab }}}}}}}}}}}} social_media { name url icon { id }} footer { translations { title description manage_cookies_text logo { id title } link_column { footer_link_column_id { title links { link_id { title type url open_in_new_tab } } } } bottom_links { link_id { title type url open_in_new_tab } } languages_code { code } } }}",
"query { header { translations { languages_code { code } login_text search_placeholder logo { id } navigation_tree nav_items { header_nav_item_id { title columns { header_nav_column_id { groups { header_link_column_id { title links { link_id { title type url open_in_new_tab children { related_link_id { title type url open_in_new_tab }}}}}}}}}}}} social_media { name url icon { id }} footer { translations { title description manage_cookies_text logo { id title } link_column { footer_link_column_id { title links { link_id { title type url open_in_new_tab } } } } bottom_links { link_id { title type url open_in_new_tab } } languages_code { code } footer_tree } }}",
},
],
[
Expand Down
109 changes: 10 additions & 99 deletions src/plugins/docusaurus-plugin-navdata/src/convertData.ts
View file
Original file line number Diff line number Diff line change
@@ -1,98 +1,48 @@
import IColumn from './interfaces/navbar/column';
import IFooterColumn from './interfaces/navbar/footerColumn';
import IFooterData from './interfaces/navbar/footerData';
import IGroup from './interfaces/navbar/group';
import ILink from './interfaces/navbar/link';
import INavData from './interfaces/navbar/navData';
import INavItem from './interfaces/navbar/navItem';
import ISocialMedia from './interfaces/navbar/socialMedia';

const convertData = (
source: any
): {
socialMedia: Array<ISocialMedia>;
navData: Array<INavData>;
footerData: Array<IFooterData>;
navTree: Array<any>;
footerTree: Array<any>;
} => {
const socialMedias: Array<ISocialMedia> = [];

for (const socialMedia of source.data.social_media) {
socialMedias.push(convertSocialMedia(socialMedia));
}

const navDatas: Array<INavData> = [];
const navTreeTranslations = [];
for (const translation of source.data.header.translations) {
const navData: INavData = convertNavData(translation);

for (const sourceNavItem of translation.nav_items) {
const navItem: INavItem = convertNavItem(
sourceNavItem.header_nav_item_id
);

for (const sourceColumn of sourceNavItem.header_nav_item_id.columns) {
const column: IColumn = convertColumn(
sourceColumn.header_nav_column_id
);

for (const sourceGroup of sourceColumn.header_nav_column_id.groups) {
const group: IGroup = convertGroup(sourceGroup.header_link_column_id);

for (const sourceLink of sourceGroup.header_link_column_id.links) {
const link: ILink = convertLink(sourceLink.link_id);

for (const sourceSubLink of sourceLink.link_id.children) {
const subLink: ILink = convertLink(sourceSubLink.related_link_id);

link.children.push(subLink);
}
group.links.push(link);
}
column.groups.push(group);
}
navItem.columns.push(column);
}
navData.navItems.push(navItem);
}
navDatas.push(navData);
navTreeTranslations.push(translation);
}

const footerTreeTranslations = [];
for (const translation of source.data.footer.translations) {
footerTreeTranslations.push(translation);
}
const footerDatas: Array<IFooterData> = [];
for (const translation of source.data.footer.translations) {
if (!translation.logo || !translation.title) {
continue;
}
const footerData: IFooterData = convertFooterData(translation);

for (const columnSource of translation.link_column) {
const column: IFooterColumn = convertFooterColumn(
columnSource.footer_link_column_id
);

for (const sourceLink of columnSource.footer_link_column_id.links) {
const link: ILink = convertLink(sourceLink.link_id);

column.links.push(link);
}
footerData.columns.push(column);
}

for (const sourceLink of translation.bottom_links) {
const link: ILink = convertLink(sourceLink.link_id);

footerData.bottomLinks.push(link);
}
footerDatas.push(footerData);
}

return {
socialMedia: socialMedias,
navData: navDatas,
footerData: footerDatas,
navTree: navTreeTranslations,
footerTree: footerTreeTranslations,
};
};

export default convertData;

const convertLink = (source: any): ILink => {
return {
title: source.title,
Expand All @@ -102,27 +52,6 @@ const convertLink = (source: any): ILink => {
openInNewTab: source.open_in_new_tab ?? false,
};
};

const convertGroup = (source: any): IGroup => {
return {
title: source.title,
links: [],
};
};

const convertColumn = (_: any): IColumn => {
return {
groups: [],
};
};

const convertNavItem = (source: any): INavItem => {
return {
title: source.title,
columns: [],
};
};

const convertSocialMedia = (source: any): ISocialMedia => {
return {
name: source.name,
Expand All @@ -132,17 +61,6 @@ const convertSocialMedia = (source: any): ISocialMedia => {
};
};

const convertNavData = (source: any): INavData => {
return {
languageCode: source.languages_code.code.toLocaleLowerCase(),
loginText: source.login_text,
searchPlaceholder: source.search_placeholder,
logoId: source.logo.id,
logo: '',
navItems: [],
};
};

const convertFooterData = (source: any): IFooterData => {
return {
languageCode: source.languages_code.code.toLocaleLowerCase(),
Expand All @@ -155,10 +73,3 @@ const convertFooterData = (source: any): IFooterData => {
manage_cookies_text: source?.manage_cookies_text,
};
};

const convertFooterColumn = (source: any): IFooterColumn => {
return {
title: source.title,
links: [],
};
};
23 changes: 8 additions & 15 deletions src/plugins/docusaurus-plugin-navdata/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import {
} from '@miracledevs/paradigm-web-fetch';
import convertData from './convertData';
import IFooterData from './interfaces/navbar/footerData';
import INavData from './interfaces/navbar/navData';
import ISocialMedia from './interfaces/navbar/socialMedia';

// import imageToBase64 from 'image-to-base64';
Expand Down Expand Up @@ -48,14 +47,12 @@ const navDataLoader = (
const json = await response.json();

const data = convertData(json);

const promises = [];

for (const media of data.socialMedia) {
promises.push(loadSocialMediaImages(media, httpClient, directusUrl));
}

for (const navData of data.navData) {
for (const navData of data.navTree) {
promises.push(loadLogos(navData, httpClient, directusUrl));
}

Expand Down Expand Up @@ -87,30 +84,26 @@ const loadSocialMediaImages = async (
media.icon = text;
};

const loadLogos = async (
navData: INavData,
const loadFooterLogos = async (
footerData: IFooterData,
httpClient: HttpClient,
url: string
) => {
const response = await httpClient.get(`${url}assets/${navData.logoId}`);
const response = await httpClient.get(`${url}assets/${footerData.logoId}`);
if (response.status != 200) {
throw new Error(await response.text());
}
const text = await response.text();
navData.logo = text;
footerData.logo = text;
};

const loadFooterLogos = async (
footerData: IFooterData,
httpClient: HttpClient,
url: string
) => {
const response = await httpClient.get(`${url}assets/${footerData.logoId}`);
const loadLogos = async (navData: any, httpClient: HttpClient, url: string) => {
const response = await httpClient.get(`${url}assets/${navData.logo.id}`);
if (response.status != 200) {
throw new Error(await response.text());
}
const text = await response.text();
footerData.logo = text;
navData.logo = text;
};

export default navDataLoader;
26 changes: 21 additions & 5 deletions src/theme/Footer/ExtendedFooter/Nav/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,36 @@ import Link from "@docusaurus/Link";

interface INavProps {
footer: IFooterData;
renderLink: (type: string, title: string, url: string, openInNewTab: boolean) => any;
footerTree: any;
getExternalLink: (path: string) => string;
getLink: (path: string) => string;
}

function Nav({ footer, renderLink, getExternalLink }: INavProps) {
function Nav({ footer, footerTree, getExternalLink, getLink }: INavProps) {
const renderLink = ({ title, open_in_new_tab, link_type, url }) => {
if (link_type === "internal") {
return (
<a key={`${title}`} href={getLink(url)}>
{title}
</a>
);
} else {
return (
<a key={`${title}`} href={url} target={open_in_new_tab ? "_blank" : "_self"}>
{title}
</a>
);
}
};
return (
<nav className={`${styles.nav}`}>
{footer.columns.map((column, i) => {
{footerTree.footer_tree.items.map((column, i) => {
return (
<div key={`footer_column_${i}`} className={styles.nav_category}>
<p className={`primaryParagraph ${styles.nav_category_title}`}>{column.title}</p>
<div className={styles.nav_category_links}>
{column.links.map((link, i) => {
return renderLink(link.type, link.title, link.url, link.openInNewTab);
{column.children.map((link, i) => {
return renderLink(link);
})}
</div>
</div>
Expand Down
13 changes: 11 additions & 2 deletions src/theme/Footer/ExtendedFooter/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,19 @@ export default function ExtendedFooter() {
const internalLocale = path.split("/")[0];

const externalLocale = useLocaleMap(internalLocale);
const data = usePluginData("docusaurus-plugin-navdata") as { socialMedia: Array<ISocialMedia>; navData: Array<INavData>; footerData: Array<IFooterData> };
const data = usePluginData("docusaurus-plugin-navdata") as {
socialMedia: Array<ISocialMedia>;
navData: Array<INavData>;
footerTree: Array<any>;
footerData: Array<IFooterData>;
};
const footerData =
data?.footerData.find((x) => x.languageCode === externalLocale) || data?.footerData.find((x) => x.languageCode === customFields.defaultExternalLocales);

const footerTree =
data?.footerTree.find((x) => x.languages_code.code.toLowerCase() === externalLocale) ||
data?.footerTree.find((x) => x.languages_code.code.toLowerCase() === siteConfig.customFields.defaultExternalLocales);

const getExternalLink = (path: string) => {
const url = siteUrl.endsWith("/") ? siteUrl.slice(0, -1) : siteUrl;
const truncatedPath = path.startsWith("/") ? path.slice(1) : path;
Expand Down Expand Up @@ -91,7 +100,7 @@ export default function ExtendedFooter() {
</div>
)}
</div>
{footerData.columns && <Nav footer={footerData} getExternalLink={getExternalLink} renderLink={renderLink} />}
{footerTree && <Nav footer={footerData} footerTree={footerTree} getExternalLink={getExternalLink} getLink={getLink} />}
</div>
{footerData.bottomLinks && (
<div className={styles.footer_container_bottomData}>
Expand Down
36 changes: 29 additions & 7 deletions src/theme/Navbar/ExtendedNavbar/Nav/Nav.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
@use "../../../../assets/scss/mixins";
@import "../../../../assets/scss/mixins";

.navbar_list {
height: 55px;
width: 25%;
min-width: 470px;
max-height: 55px;
min-width: 490px;

font-size: 16px;
line-height: 24px;
letter-spacing: 0.05em;
text-transform: capitalize;
overflow-x: scroll;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 5%;
text-decoration: none;
text-transform: none;
@include mixins.custom_scrollbar(var(--black) var(--casperWhite));

&::-webkit-scrollbar {
width: 8px;
height: 4px;
}

.navbar_list_container {
position: relative;
Expand Down Expand Up @@ -37,6 +54,7 @@
font-weight: 500;
font-size: 16px;
line-height: 24px;
text-wrap: nowrap;
}

> svg {
Expand Down Expand Up @@ -72,17 +90,21 @@
}
}

.fullWidth {
width: 100%;
}

@media (max-width: 996px) {
.navbar_list {
width: 100%;
min-width: 200px;
height: unset;
max-height: unset;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
.navbar_list_container {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 20px;
width: 100%;

.navbar_list_container_button {
width: 100%;
.navbar_list_item {
Expand Down
Loading

0 comments on commit 8c253a4

Please sign in to comment.