Skip to content

Commit

Permalink
Merge pull request #175 from diggsweden/DIGG-217-beta
Browse files Browse the repository at this point in the history
Digg 217 beta
  • Loading branch information
MikaMunterud authored Jan 19, 2024
2 parents 6f2e245 + 54aaa3d commit 52d194c
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 63 deletions.
79 changes: 34 additions & 45 deletions components/content/ContainerPage/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export const highlightCodeBlock = async () => {
const getLinks = () => {
const menuItems: Anchorlink[] = [];
const cont: HTMLElement =
document.querySelector(".content") || document.createElement("div");
document.querySelector("#content") || document.createElement("div");

const hTags = Array.prototype.slice.call(
cont.querySelectorAll("h2") || document.createElement("div"),
Expand Down Expand Up @@ -137,54 +137,43 @@ export const ContainerPage: React.FC<ContainerPageProps> = ({

return (
<Container>
<article
className={`grid max-w-md grid-cols-1 lg:max-w-xl
lg:grid-cols-[620px_1fr] lg:gap-x-xl ${
hasRelatedContent ? "xl:grid-cols-[200px_620px_1fr]" : ""
}`}
>
<article className="flex w-full flex-col gap-md lg:gap-xl xl:flex-row">
{hasRelatedContent && (
<ContainerNav related={related} domain={domain} />
)}

{!image && heading && (
<Heading
size={"lg"}
level={1}
className={`col-span-2 row-span-1 ${
hasRelatedContent ? "xl:col-start-2 xl:mb-xl" : ""
}`}
>
{checkLang(heading)}
</Heading>
)}

{menuItems.length > 2 && (
<div
id="stickyNav"
className={`col-start-1 row-start-3 w-full lg:relative lg:right-none lg:col-start-2
lg:h-full ${
hasRelatedContent && image
? "lg:row-start-2 xl:col-span-1 xl:col-start-3 xl:row-start-1 "
: hasRelatedContent && !image
? "lg:row-start-3 xl:col-span-1 xl:col-start-3 xl:row-start-2"
: "lg:row-start-2"
}`}
>
<StickyNav
menuHeading={t("common|content-menu-heading")}
menuItems={menuItems}
/>
<div className="flex w-full flex-col">
{!image && heading && (
<Heading
size={"lg"}
level={1}
className={`col-span-2 row-span-1 ${
hasRelatedContent ? "xl:col-start-2 xl:mb-xl" : ""
}`}
>
{checkLang(heading)}
</Heading>
)}
<div className="flex w-full flex-col items-start justify-end gap-xl lg:flex-row-reverse">
{menuItems.length > 2 && (
<div id="stickyNav" className="w-full">
<StickyNav
menuHeading={t("common|content-menu-heading")}
menuItems={menuItems}
/>
</div>
)}

<main
id="content"
className={`flex w-full max-w-md flex-col space-y-lg md:space-y-xl lg:min-w-[620px]`}
>
{preamble && (
<p className="text-lg text-brown-600">{checkLang(preamble)}</p>
)}
{blocks && blocks.length > 0 && <BlockList blocks={blocks} />}
</main>
</div>
)}

<main
className={`content col-start-1 max-w-md space-y-lg md:space-y-xl
${hasRelatedContent ? "xl:col-span-1 xl:col-start-2" : ""}`}
>
<p className="text-lg text-brown-600">{checkLang(preamble)}</p>
{blocks && blocks.length > 0 && <BlockList blocks={blocks} />}
</main>
</div>
</article>
</Container>
);
Expand Down
10 changes: 4 additions & 6 deletions components/navigation/ContainerNav/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,15 @@ export const ContainerNav: React.FC<ContainerDpDwnProps> = ({
}, []);

const isActive = (url: string) => {
if (url === related[0].slug) {
return pathname === related[0].slug;
if (url === related[0].slug || url.endsWith(related[0].slug)) {
return pathname === url;
} else {
return pathname.startsWith(url) && pathname !== related[0].slug;
}
};

return (
<nav
className={`relative mb-lg flex h-fit xl:col-span-1 xl:col-start-1 xl:row-span-2 xl:mb-xl`}
>
<nav className="relative">
{expanded && (
<div className="fixed left-none top-none z-30 h-screen w-screen bg-brownOpaque5 md:hidden" />
)}
Expand All @@ -51,7 +49,7 @@ export const ContainerNav: React.FC<ContainerDpDwnProps> = ({
)}

<ul
className={`absolute flex-col bg-white md:w-[320px] xl:static xl:flex xl:h-full xl:bg-transparent ${
className={`absolute flex-col bg-white md:w-[320px] xl:static xl:flex xl:h-full xl:w-[200px] xl:bg-transparent ${
expanded
? "top-[56px] z-40 h-fit max-h-[calc(100vh-292px)] w-full overflow-y-scroll md:max-h-[calc(100vh-292px)]"
: "hidden"
Expand Down
35 changes: 23 additions & 12 deletions components/navigation/StickyNav/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@ export const StickyNav: FC<StickyNavProps> = ({ menuItems, menuHeading }) => {
bottom: false,
bottomPosition: "",
});

const [width, setWidth] = useState<string>("");
let timer = useRef(0);

const watch = () => {
Expand Down Expand Up @@ -68,17 +70,23 @@ export const StickyNav: FC<StickyNavProps> = ({ menuItems, menuHeading }) => {
useEffect(() => {
const handleScroll = () => {
const stickyNav = document.getElementById("stickyNav");
const content = document.getElementById("content");
const navBox = document.getElementById("navBox");

if (navBox && stickyNav) {
if (navBox && stickyNav && content) {
const navRect = stickyNav.getBoundingClientRect();
const contentRect = content.getBoundingClientRect();
const navBoxRect = navBox.getBoundingClientRect();

setFixedNav({
top: navRect.top < 97 && window.scrollY <= navRect.height,
bottom: window.scrollY > navRect.height,
bottomPosition: `${navRect.height - navBoxRect.height - 40}px`,
top: contentRect.top < 77 && window.scrollY <= contentRect.height,
bottom: contentRect.height - navBoxRect.height + 192 < window.scrollY,
bottomPosition: `${contentRect.height - navBoxRect.height}px`,
});

if (!fixedNav.top) {
setWidth(`${navRect.width}px`);
}
}
};

Expand All @@ -92,29 +100,32 @@ export const StickyNav: FC<StickyNavProps> = ({ menuItems, menuHeading }) => {
return (
<div
id="navBox"
className={`mb-lg flex flex-col lg:w-[132px] xl:mb-xl ${
fixedNav.top
? "lg:fixed lg:top-[96px]"
className={`w-fit overflow-auto ${
fixedNav.top && !fixedNav.bottom
? `lg:fixed lg:top-[76px] lg:max-h-[calc(100vh-152px)]`
: fixedNav.bottom
? "lg:absolute"
? "lg:relative lg:max-h-[calc(100vh-152px)]"
: "static"
}`}
style={{ top: fixedNav.bottom ? fixedNav.bottomPosition : "" }}
style={{
top: fixedNav.bottom ? fixedNav.bottomPosition : "",
maxWidth: width,
}}
>
<Heading
tabIndex={0}
level={3}
size={"xs"}
className="focus--outline focus--primary focus--out text-brown-600"
className="focus--outline focus--primary focus--in text-brown-600"
>
{menuHeading}
</Heading>
<ul className={`flex w-full flex-col`}>
<ul className={``}>
{menuItems.map((item) => (
<li key={item.id}>
<Link
href={`#${item.id}`}
className={`inline-flex cursor-pointer p-sm pl-lg text-sm no-underline underline-offset-4 hover:underline ${
className={`focus--in flex cursor-pointer p-sm pl-lg text-sm no-underline underline-offset-4 hover:underline ${
latestActiveItem?.id === item.id
? "border-l-[3px] border-pink-600 pl-[18px] font-strong"
: "focus--underline border-l border-brown-200 font-normal"
Expand Down

0 comments on commit 52d194c

Please sign in to comment.