From 387d443a6ee0c3d48c7b64165435d1cfad29a05d Mon Sep 17 00:00:00 2001
From: Mika Munterud <mika.munterud@digitalist.se>
Date: Fri, 19 Jan 2024 10:37:50 +0100
Subject: [PATCH 1/3] DIGG-217-beta: Updating ContainerPage structure and
 fixing sticky nav

---
 components/content/ContainerPage/index.tsx   | 77 ++++++++------------
 components/navigation/ContainerNav/index.tsx |  5 +-
 components/navigation/StickyNav/index.tsx    | 35 ++++++---
 3 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/components/content/ContainerPage/index.tsx b/components/content/ContainerPage/index.tsx
index 2dde4fac2..94739d4d5 100644
--- a/components/content/ContainerPage/index.tsx
+++ b/components/content/ContainerPage/index.tsx
@@ -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"),
@@ -137,54 +137,41 @@ 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]`}
+            >
+              <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>
   );
diff --git a/components/navigation/ContainerNav/index.tsx b/components/navigation/ContainerNav/index.tsx
index f290cff6e..7c6255388 100644
--- a/components/navigation/ContainerNav/index.tsx
+++ b/components/navigation/ContainerNav/index.tsx
@@ -33,7 +33,8 @@ export const ContainerNav: React.FC<ContainerDpDwnProps> = ({
 
   return (
     <nav
-      className={`relative mb-lg flex h-fit xl:col-span-1 xl:col-start-1 xl:row-span-2 xl:mb-xl`}
+      className="relative"
+      /*  className={`relative mb-lg flex h-fit xl:col-span-1 xl:col-start-1 xl:row-span-2 xl:mb-xl`} */
     >
       {expanded && (
         <div className="fixed left-none top-none z-30 h-screen w-screen bg-brownOpaque5 md:hidden" />
@@ -51,7 +52,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"
diff --git a/components/navigation/StickyNav/index.tsx b/components/navigation/StickyNav/index.tsx
index 3a17faa28..89bcd1e85 100644
--- a/components/navigation/StickyNav/index.tsx
+++ b/components/navigation/StickyNav/index.tsx
@@ -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 = () => {
@@ -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`);
+        }
       }
     };
 
@@ -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"

From 679c433caa68e308bc114e196ea678ee3b008c56 Mon Sep 17 00:00:00 2001
From: Mika Munterud <mika.munterud@digitalist.se>
Date: Fri, 19 Jan 2024 10:42:32 +0100
Subject: [PATCH 2/3] DIGG-217-beta: Removing outcommented code

---
 components/navigation/ContainerNav/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/navigation/ContainerNav/index.tsx b/components/navigation/ContainerNav/index.tsx
index 7c6255388..89b885a73 100644
--- a/components/navigation/ContainerNav/index.tsx
+++ b/components/navigation/ContainerNav/index.tsx
@@ -32,10 +32,7 @@ export const ContainerNav: React.FC<ContainerDpDwnProps> = ({
   };
 
   return (
-    <nav
-      className="relative"
-      /*  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" />
       )}

From 54aaa3d41801d8feb1b732e9874d3fdb2019e8b2 Mon Sep 17 00:00:00 2001
From: Mika Munterud <mika.munterud@digitalist.se>
Date: Fri, 19 Jan 2024 11:03:43 +0100
Subject: [PATCH 3/3] DIGG-217-beta: Updating active url

---
 components/content/ContainerPage/index.tsx   | 4 +++-
 components/navigation/ContainerNav/index.tsx | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/content/ContainerPage/index.tsx b/components/content/ContainerPage/index.tsx
index 94739d4d5..3a8a0bd48 100644
--- a/components/content/ContainerPage/index.tsx
+++ b/components/content/ContainerPage/index.tsx
@@ -167,7 +167,9 @@ export const ContainerPage: React.FC<ContainerPageProps> = ({
               id="content"
               className={`flex w-full max-w-md flex-col space-y-lg md:space-y-xl lg:min-w-[620px]`}
             >
-              <p className="text-lg text-brown-600">{checkLang(preamble)}</p>
+              {preamble && (
+                <p className="text-lg text-brown-600">{checkLang(preamble)}</p>
+              )}
               {blocks && blocks.length > 0 && <BlockList blocks={blocks} />}
             </main>
           </div>
diff --git a/components/navigation/ContainerNav/index.tsx b/components/navigation/ContainerNav/index.tsx
index 89b885a73..906f6d5fd 100644
--- a/components/navigation/ContainerNav/index.tsx
+++ b/components/navigation/ContainerNav/index.tsx
@@ -24,8 +24,8 @@ 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;
     }