Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-24 18:51:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Responsive navigation

Browse Source
This commit is contained in:
Rihan 2022-05-17 01:03:17 +00:00
parent e95a8291d6
commit ca99d7001e
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/buttons/IconPatch.tsx
View File

@ -14,7 +14,7 @@ export function IconPatch(props: IconPatchProps) {
<div <div
className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${ className={`bg-denim-300 flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent transition-[color,transform,border-color] duration-75 ${
props.clickable props.clickable
? "hover:bg-denim-400 m-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125" ? "hover:bg-denim-400 mx-2 cursor-pointer hover:scale-110 hover:text-white active:scale-125"
: "" : ""
} ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`} } ${props.active ? "text-bink-600 border-bink-600 bg-bink-100" : ""}`}
> >

8
src/components/layout/Navigation.tsx
View File

@ -11,16 +11,16 @@ export interface NavigationProps {
export function Navigation(props: NavigationProps) { export function Navigation(props: NavigationProps) {
return ( return (
<div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7"> <div className="absolute left-0 right-0 top-0 flex items-center justify-between py-5 px-7 min-h-[88px]">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center w-full sm:w-fit">
<div className="mr-6"> <div className="mr-auto sm:mr-6">
<Link to="/"> <Link to="/">
<BrandPill clickable /> <BrandPill clickable />
</Link> </Link>
</div> </div>
{props.children} {props.children}
</div> </div>
<div className="flex"> <div className={props.children ? "hidden sm:flex" : "flex"}>
<a <a
href={DISCORD_LINK} href={DISCORD_LINK}
target="_blank" target="_blank"

2
src/components/text/ArrowLink.tsx
View File

@ -26,7 +26,7 @@ export function ArrowLink(props: ArrowLinkProps) {
const isExternal = !!(props as IArrowLinkPropsExternal).url; const isExternal = !!(props as IArrowLinkPropsExternal).url;
const isInternal = !!(props as IArrowLinkPropsInternal).to; const isInternal = !!(props as IArrowLinkPropsInternal).to;
const content = ( const content = (
<span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95"> <span className="text-bink-600 hover:text-bink-700 group inline-flex cursor-pointer items-center space-x-1 font-bold active:scale-95 mt-1 pr-1">
{direction === "left" ? ( {direction === "left" ? (
<span className="text-xl transition-transform group-hover:-translate-x-1"> <span className="text-xl transition-transform group-hover:-translate-x-1">
<Icon icon={Icons.ARROW_LEFT} /> <Icon icon={Icons.ARROW_LEFT} />