suhaylmv Posts - Answer Overflow

suhaylmv

Explore posts from servers

KPCKevin Powell - Community NNuxt SSolidJS

•Created by suhaylmv on 9/24/2023 in #support

Custom cursor not working

I have this simple custom cursor component. When I try to hover over some sections (all sections except headers for some reason) it starts jumping and disappears. I have no idea what that could be. Am I missing something? Btw it's used on an Astro project, in case it's relevant

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

import { createMousePosition } from "@solid-primitives/mouse"
import "../styles/Cursor.css"

const Cursor = () => {
  const pos = createMousePosition(window)

  return (
    <>
      <div style={{ left: `${pos.x}px`, top: `${pos.y}px` }} class="ring"></div>
      <div class="dot" style={{ left: `${pos.x}px`, top: `${pos.y}px` }}></div>
    </>
  )
}

export default Cursor

7 replies

SSolidJS

•Created by suhaylmv on 6/12/2023 in #support

Invisible solid-icons

6 replies

SSolidJS

•Created by suhaylmv on 6/2/2023 in #support

Disabling transition on load?

I have a sticky navbar lower in the page which uses an intersection observer to transition to another color when it reaches the top. But the problem is that there's a transition on page load, is there a smart SolidJS way to fix it?

3 replies

SSolidJS

•Created by suhaylmv on 5/29/2023 in #support

How to make a sticky navbar change color when it has reached the top? Like in solidjs homepage

I think I should use this https://github.com/solidjs-community/solid-primitives/tree/main/packages/intersection-observer#readme , but I can't think of a way of implementing that. Code:

const Navbar = () => {
  const [getNav, setNav] = createSignal(true);
  const navHandler = () => {
    setNav(!getNav());
  };

  const [getBgColor, setBgColor] = createSignal(false);

  return (
    <nav
      class={
        "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
        (getBgColor()
          ? "bg-primary-light transition duration-500 ease-linear"
          : "")
      }
      id="navbar"
    >
      <img
        src="/public/logo.png"
        alt="logo"
        class="2xl:h-18 h-12 lg:h-14 xl:h-16"
      />
      <ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
        <a href="/" class="xl:mx-3 2xl:mx-4">
          Inicio
        </a>
        <a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
          Quienes somos?
        </a>
        <a href="escuela/" class="xl:mx-3 2xl:mx-4">
          Escuela
        </a>
        <a href="eventos/" class="xl:mx-3 2xl:mx-4">
          Eventos
        </a>
        <a href="blog/" class="xl:mx-3 2xl:mx-4">
          Blog
        </a>
        <button class="block">Unirme</button>
      </ul>
      <div onClick={navHandler} class="block sm:hidden">
        {!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
      </div>
      <div
        class={
          !getNav()
            ? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
            : "fixed left-[-100%] h-screen"
        }
      >
        <ul class="h-screen pt-12 font-display text-primary-light">
          <li class="p-4">Inicio</li>
          <li class="p-4">Quienes somos?</li>
          <li class="p-4">Eventos</li>
          <li class="p-4">Blog</li>
          <button class="block p-4">Unirme</button>
        </ul>
      </div>
    </nav>
  );
};

const Navbar = () => {
  const [getNav, setNav] = createSignal(true);
  const navHandler = () => {
    setNav(!getNav());
  };

  const [getBgColor, setBgColor] = createSignal(false);

  return (
    <nav
      class={
        "sticky top-0 flex w-full items-center justify-between px-7 py-3 font-display font-bold text-secondary " +
        (getBgColor()
          ? "bg-primary-light transition duration-500 ease-linear"
          : "")
      }
      id="navbar"
    >
      <img
        src="/public/logo.png"
        alt="logo"
        class="2xl:h-18 h-12 lg:h-14 xl:h-16"
      />
      <ul class="hidden items-center gap-6 sm:flex 2xl:text-lg">
        <a href="/" class="xl:mx-3 2xl:mx-4">
          Inicio
        </a>
        <a href="quienes-somos/" class="xl:mx-3 2xl:mx-4">
          Quienes somos?
        </a>
        <a href="escuela/" class="xl:mx-3 2xl:mx-4">
          Escuela
        </a>
        <a href="eventos/" class="xl:mx-3 2xl:mx-4">
          Eventos
        </a>
        <a href="blog/" class="xl:mx-3 2xl:mx-4">
          Blog
        </a>
        <button class="block">Unirme</button>
      </ul>
      <div onClick={navHandler} class="block sm:hidden">
        {!getNav() ? <AiOutlineClose size={20} /> : <AiOutlineMenu size={20} />}
      </div>
      <div
        class={
          !getNav()
            ? "fixed left-0 top-0 w-2/5 bg-blue-950 duration-500 ease-in-out"
            : "fixed left-[-100%] h-screen"
        }
      >
        <ul class="h-screen pt-12 font-display text-primary-light">
          <li class="p-4">Inicio</li>
          <li class="p-4">Quienes somos?</li>
          <li class="p-4">Eventos</li>
          <li class="p-4">Blog</li>
          <button class="block p-4">Unirme</button>
        </ul>
      </div>
    </nav>
  );
};

7 replies

SSolidJS

•Created by suhaylmv on 5/11/2023 in #support

How to make the navbar change color when it's sticky like in the Solidjs homepage?

5 replies

Gaming

Programming