nav issue

lenincompres · Oct 31, 2024 · 0da3e3d · 0da3e3d
1 parent 998e04e
commit 0da3e3d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 35 deletions.
diff --git a/index.js b/index.js
@@ -148,32 +148,36 @@ DOM.set({
         borderRadius: _isMobile.as("0.5em", 0),
         margin: _isMobile.as("2em 0 0 1.1em", 0),
         position: _isMobile.as("absolute", "relative"),
-        content: Pager.getLinkMenu(name => ({
-          color: STYLE.COLOR.PAGE,
-          width: "5em",
-          padding: ".25em",
-          margin: "0.2em",
-          fontSize: "1.25em",
-          textAlign: "center",
-          borderRadius: "0.25em",
-          fontWeight: "normal",
-          whiteSpace: "nowrap",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          backgroundColor: Pager._key.as({
-            [name]: STYLE.COLOR.LINK_DARK,
-            default: STYLE.COLOR.LINK,
-          }),
-          display: _isMobile.as(val => (val || name !== Pager.keys.slice(-1)[0]) && name !== Pager.keys[0], "none", "block"),
-          boxShadow: {
-            bind: [_hoverPage, Pager._key],
-            as: (over, current) => current === name ? STYLE.SHADOW.INSET : over === name ? STYLE.SHADOW.HIGHLIGHT : STYLE.SHADOW.NORMAL,
-          },
-          text: Copy.get(name),
-          mouseover: e => _hoverPage.value = name,
-          mouseout: e => _hoverPage.value = false,
-        })),
-        //onready: queueDown
+        ul: {
+          style: STYLE.FLEX,
+          flexDirection: _isMobile.as("column", "row"),
+          li: Pager.keys.map(name => ({
+            color: STYLE.COLOR.PAGE,
+            width: "5em",
+            padding: ".25em",
+            margin: "0.2em",
+            fontSize: "1.25em",
+            textAlign: "center",
+            borderRadius: "0.25em",
+            fontWeight: "normal",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            backgroundColor: Pager._key.as({
+              [name]: STYLE.COLOR.LINK_DARK,
+              default: STYLE.COLOR.LINK,
+            }),
+            display: _isMobile.as(val => (val || name !== Pager.keys.slice(-1)[0]) && name !== Pager.keys[0], "none", "block"),
+            boxShadow: {
+              bind: [_hoverPage, Pager._key],
+              as: (over, current) => current === name ? STYLE.SHADOW.INSET : over === name ? STYLE.SHADOW.HIGHLIGHT : STYLE.SHADOW.NORMAL,
+            },
+            text: Copy.get(name),
+            onclick: e => Pager.key = name,
+            mouseover: e => _hoverPage.value = name,
+            mouseout: e => _hoverPage.value = false,
+          })),
+        },
       },
       article: {
         model: STYLE.FLEX,
@@ -197,7 +201,7 @@ DOM.set({
         markdown: Copy.text({
           es: "Creador por Lenin Comprés usando [DOM.js](https://github.com/lenincompres/DOM.js/blob/main/README.md).",
           en: "Created by Lenin Comprés using [DOM.js](https://github.com/lenincompres/DOM.js/blob/main/README.md).",
-        })
+        }),
       },
     },
   },

diff --git a/src/pages.js b/src/pages.js
@@ -50,7 +50,7 @@ Pager.add({
   [Copy.KEY.bio]: {
     section: {
       style: STYLE.PAGE,
-      model: STYLE.SLIDE(0, "left"),
+      model: STYLE.SLIDE("left", 2),
       lineHeight: "1.5em",
       content: {
         p: Copy.text({
@@ -97,7 +97,7 @@ Pager.add({
     },
     section: projects.map((project, i) => ({
       style: STYLE.PAGE,
-      model: STYLE.SLIDE(),
+      model: STYLE.SLIDE(i),
       position: "relative",
       fontSize: "1em",
       width: "23em",
@@ -160,11 +160,16 @@ Pager.add({
     menu: {
       fontSize: "3.43em",
       marginTop: "1em",
-      textAlign: "center",
-      a: SOCIAL_LINKS.map(a => Object.assign({
-        model: STYLE.SLIDE(),
-        margin: "0.25em",
-      }, a))
+      ul: {
+        style: STYLE.FLEX,
+        justifyContent: "center",
+        li: SOCIAL_LINKS.map((a, i) => ({
+          a: {
+            model: [a, STYLE.SLIDE(i)],
+            margin: "0.25em",
+          }
+        }))
+      }
     }
   },
 });
diff --git a/src/style.js b/src/style.js
@@ -37,7 +37,7 @@ let slideDelay = 0;
 
 export const SLIDE = (from = "top", delay, interval = 200) => {
   if (typeof from === "number") {
-    delay = top;
+    delay = from;
     from = "top"
   };
   if (delay === undefined) delay = slideDelay++;