Daniel Sousa @TutoDS Comments

const navigatioItemVariants = cva(
  [
    'h-14',
    'px-4',
    'inline-flex items-center justify-center',
    'font-semibold',
    'transition ease-in-out duration-300',
    'relative before:content-[""] before:w-full before:h-0.5 before:bg-transparent before:absolute before:top-0 before:inset-x-0 before:rounded-b-sm',
  ],
  {
    variants: {
      isActive: {
        true: [],
        false: [],
      },
      mode: {
        transparent: ['text-gray-50', 'hover:text-white hover:before:bg-white'],
        solid: ['text-gray-800', 'hover:text-gray-900 hover:before:bg-gray-900'],
      },
    },
    compoundVariants: [
      {
        isActive: true,
        mode: 'solid',
        class: ['before:bg-gray-900', 'text-gray-900'],
      },
      {
        isActive: true,
        mode: 'transparent',
        class: ['before:bg-white', 'text-white'],
      },
    ],
    defaultVariants: {
      isActive: false,
      mode: 'transparent',
    },
  },
);

const navigatioItemVariants = cva(
  [
    'h-14',
    'px-4',
    'inline-flex items-center justify-center',
    'font-semibold',
    'transition ease-in-out duration-300',
    'relative before:content-[""] before:w-full before:h-0.5 before:bg-transparent before:absolute before:top-0 before:inset-x-0 before:rounded-b-sm',
  ],
  {
    variants: {
      isActive: {
        true: [],
        false: [],
      },
      mode: {
        transparent: ['text-gray-50', 'hover:text-white hover:before:bg-white'],
        solid: ['text-gray-800', 'hover:text-gray-900 hover:before:bg-gray-900'],
      },
    },
    compoundVariants: [
      {
        isActive: true,
        mode: 'solid',
        class: ['before:bg-gray-900', 'text-gray-900'],
      },
      {
        isActive: true,
        mode: 'transparent',
        class: ['before:bg-white', 'text-white'],
      },
    ],
    defaultVariants: {
      isActive: false,
      mode: 'transparent',
    },
  },
);

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

This is my code

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

function Header({ mode = 'transparent', className = '' }: HeaderProps) {
  const scroll = useWindowScrollPosition();
  const deviceType = useDeviceType();

  const modeAfterScroll = createMemo(() =>
    scroll.y > 100 && mode === 'transparent' ? 'solid' : mode,
  );

  console.log(modeAfterScroll(), '<-');

  return (
    <header
      class={twMerge(
        headerVariants({
          mode: modeAfterScroll(),
          class: className,
        }),
      )}
    >
      <div class={twMerge(headerContainerVariants({ mode }))}>
        <a href="/" class={cn([{ 'text-white': modeAfterScroll() === 'transparent' }])}>
          MC Ocidente charmoso
        </a>

        <Switch>
          <Match when={deviceType() === 'desktop'}>
            <Navigation mode={modeAfterScroll()} />
          </Match>

          <Match when={['mobile', 'tablet'].includes(deviceType())}>
            <MobileNavigation mode={modeAfterScroll()} />
          </Match>
        </Switch>
      </div>
    </header>
  );
}

function Header({ mode = 'transparent', className = '' }: HeaderProps) {
  const scroll = useWindowScrollPosition();
  const deviceType = useDeviceType();

  const modeAfterScroll = createMemo(() =>
    scroll.y > 100 && mode === 'transparent' ? 'solid' : mode,
  );

  console.log(modeAfterScroll(), '<-');

  return (
    <header
      class={twMerge(
        headerVariants({
          mode: modeAfterScroll(),
          class: className,
        }),
      )}
    >
      <div class={twMerge(headerContainerVariants({ mode }))}>
        <a href="/" class={cn([{ 'text-white': modeAfterScroll() === 'transparent' }])}>
          MC Ocidente charmoso
        </a>

        <Switch>
          <Match when={deviceType() === 'desktop'}>
            <Navigation mode={modeAfterScroll()} />
          </Match>

          <Match when={['mobile', 'tablet'].includes(deviceType())}>
            <MobileNavigation mode={modeAfterScroll()} />
          </Match>
        </Switch>
      </div>
    </header>
  );
}

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

Hi @peerreynders Sorry to bother you

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/24/2024 in #support

Phosphor icons

How I'm using it? 1. Install the package @phosphor-icons/web; 2. On app.tsx add the import import '@phosphor-icons/web/regular/style.css'; 3. Use like <i class="ph ph-arrow-right" />

4 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

Thanks again

25 replies

SSolidJS

•Created by Daniel Sousa @TutoDS on 6/22/2024 in #support

Different header for specific routes

function useDeviceType() {
  const size = useWindowSize();
  const [deviceType, setDeviceType] = createSignal<'desktop' | 'tablet' | 'mobile'>(
    'desktop',
  );

  createEffect(() => {
    if (size.width > 480 && size.width < 1024) {
      setDeviceType('tablet');
      return;
    }

    if (size.width <= 480) {
      setDeviceType('mobile');
      return;
    }

    setDeviceType('desktop');
  }, size);

  return deviceType;
}

function useDeviceType() {
  const size = useWindowSize();
  const [deviceType, setDeviceType] = createSignal<'desktop' | 'tablet' | 'mobile'>(
    'desktop',
  );

  createEffect(() => {
    if (size.width > 480 && size.width < 1024) {
      setDeviceType('tablet');
      return;
    }

    if (size.width <= 480) {
      setDeviceType('mobile');
      return;
    }

    setDeviceType('desktop');
  }, size);

  return deviceType;
}