ademondev Posts - Answer Overflow

ademondev

Explore posts from servers

KPCKevin Powell - Community SIASapphire - Imagine a framework

Posts Comments

KPCKevin Powell - Community

•Created by ademondev on 9/28/2023 in #front-end

weird white gap on the bottom while scrolling down mobile

27 replies

KPCKevin Powell - Community

•Created by ademondev on 3/18/2023 in #ui-ux

I'm making my first blog, feedback?

29 replies

KPCKevin Powell - Community

•Created by ademondev on 3/7/2023 in #front-end

Why is my nav not responsive?

I don't know why my header is not responsive. I've been looking around for about an hour and I can't seem to find what's wrong. What's the problem with my code? I'm using tailwind for the styling, the rest is pure React.

import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
    {
        content: 'Download'
    },
    {
        content: 'Nitro'
    },
    {
        content: 'Discover'
    },
    {
        content: 'Safety'
    },
    {
        content: 'Support'
    },
    {
        content: 'Blog'
    },
    {
        content: 'Careers'
    }
];

export const Header: FC<Props> = (props) => {
    return (
        <header>
            <nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
                <DiscordLogo className='text-white' />
                <ul className='flex flex-row'>
                    {headerLinks.map((link, index) => (
                        <HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
                        p-3 mx-3'>
                            {link.content}
                        </HeaderLink>
                    ))}
                </ul>
                <Button className='rounded-full bg-white text-black cursor-pointer 
                    hover:shadow-lg 
                    hover:text-blurple transition
                    duration-200 ease-in-out
                    '
                >
                    Login
                </Button>
            </nav>
        </header>
    )
}

interface HeaderLinkProps {
    children: ReactNode;
    content: string;
    className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
    return (
        <li className='px-4'>
            <a href='#' className={`${className}`}>
                {children}
            </a>
        </li>
    )
}

import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
    {
        content: 'Download'
    },
    {
        content: 'Nitro'
    },
    {
        content: 'Discover'
    },
    {
        content: 'Safety'
    },
    {
        content: 'Support'
    },
    {
        content: 'Blog'
    },
    {
        content: 'Careers'
    }
];

export const Header: FC<Props> = (props) => {
    return (
        <header>
            <nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
                <DiscordLogo className='text-white' />
                <ul className='flex flex-row'>
                    {headerLinks.map((link, index) => (
                        <HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
                        p-3 mx-3'>
                            {link.content}
                        </HeaderLink>
                    ))}
                </ul>
                <Button className='rounded-full bg-white text-black cursor-pointer 
                    hover:shadow-lg 
                    hover:text-blurple transition
                    duration-200 ease-in-out
                    '
                >
                    Login
                </Button>
            </nav>
        </header>
    )
}

interface HeaderLinkProps {
    children: ReactNode;
    content: string;
    className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
    return (
        <li className='px-4'>
            <a href='#' className={`${className}`}>
                {children}
            </a>
        </li>
    )
}

10 replies

Gaming

Programming