fix(footer): 📱 Responsive Footer

BuildTheEarth · Jan 14, 2024 · f3ed108 · f3ed108
1 parent c9ef186
commit f3ed108
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 17 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -23,22 +23,37 @@ export default function Footer({ links, style }: FooterSimpleProps) {
 	return (
 		<div className={classes.footer} style={style}>
 			<Container className={classes.inner} size="xl">
-				<Anchor<'a'> style={{ fontSize: '14px' }} c="dimmed" variant="text">
+				<Anchor<'a'>
+					style={{ fontSize: '14px' }}
+					c="dimmed"
+					variant="text"
+					className={classes.copyright1}
+				>
 					{t('copyright', { year: new Date().getFullYear() })}
 				</Anchor>
 				<Group className={classes.links}>
-					{items}
-					<ActionIcon
-						component={Link}
-						href="https://discord.gg/buildtheearth"
-						variant="transparent"
-						aria-label="Discord"
-						target="_blank"
-					>
-						<Discord />
-					</ActionIcon>
-					<LanguageSwitcher />
+					<Group justify="center" className={classes.links}>
+						{items}
+						<ActionIcon
+							component={Link}
+							href="https://discord.gg/buildtheearth"
+							variant="transparent"
+							aria-label="Discord"
+							target="_blank"
+						>
+							<Discord />
+						</ActionIcon>
+					</Group>
+					<LanguageSwitcher className={classes.language} />
 				</Group>
+				<Anchor<'a'>
+					style={{ fontSize: '14px' }}
+					c="dimmed"
+					variant="text"
+					className={classes.copyright2}
+				>
+					{t('copyright', { year: new Date().getFullYear() })}
+				</Anchor>
 			</Container>
 		</div>
 	);

diff --git a/src/components/LanguageSwitcher.tsx b/src/components/LanguageSwitcher.tsx
@@ -18,7 +18,7 @@ export const languages = [
 	{ label: '中文', code: 'zh', flag: 'cn' },
 ];
 
-export function LanguageSwitcher() {
+export function LanguageSwitcher({ className }: { className?: string }) {
 	const [opened, setOpened] = useState(false);
 	const { t } = useTranslation();
 	const router = useRouter();
@@ -55,7 +55,7 @@ export function LanguageSwitcher() {
 			width="target"
 		>
 			<Menu.Target>
-				<UnstyledButton className={classes.control} data-opened={opened}>
+				<UnstyledButton className={`${classes.control} ${className}`} data-opened={opened}>
 					<Group gap="xs">
 						<span
 							className={`fi fi-${selected && selected.flag} fis`}

diff --git a/src/styles/components/Footer.module.css b/src/styles/components/Footer.module.css
@@ -10,15 +10,39 @@
 	padding-top: var(--mantine-spacing-sm);
 	padding-bottom: var(--mantine-spacing-sm);
 
-	@media (max-width: $mantine-breakpoint-xs) {
+	@media (max-width: $mantine-breakpoint-md) {
 		flex-direction: column;
 	}
 }
 
 .links {
 	width: fit-content;
 
-	@media (max-width: $mantine-breakpoint-xs) {
-		margin-top: var(--mantine-spacing-md);
+	@media (max-width: $mantine-breakpoint-md) {
+    margin: 0 auto;
+		width:100%
+
 	}
 }
+
+.language {
+	@media (max-width: $mantine-breakpoint-md) {
+		width:100%
+	}
+}
+
+.copyright1 {
+	@media (max-width: $mantine-breakpoint-md) {
+		display: none;
+	}
+}
+.copyright2 {
+	display: none;
+	@media (max-width: $mantine-breakpoint-md) {
+		display: inherit;
+		margin-top: var(--mantine-spacing-sm);
+		width:100%;
+		text-align:center;
+		font-size: x-small !important;
+	}
+}