Skip to content

Commit

Permalink
fix(header): 📱 Responsive Dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nudelsuppe42
Nudelsuppe42 committed Jan 14, 2024
1 parent caa2bb9 commit c9ef186
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 60 deletions.
68 changes: 34 additions & 34 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
import {
Discord,
Instagram,
Reddit,
Tiktok,
Twitch,
Twitter,
Youtube,
} from '@icons-pack/react-simple-icons';
import {
ActionIcon,
Anchor,
Expand All @@ -30,7 +21,16 @@ import {
useMantineColorScheme,
useMantineTheme,
} from '@mantine/core';
import { useClickOutside, useDisclosure } from '@mantine/hooks';
import { ChevronDown, FileSearch, Logout, World } from 'tabler-icons-react';
import {
Discord,
Instagram,
Reddit,
Tiktok,
Twitch,
Twitter,
Youtube,
} from '@icons-pack/react-simple-icons';
import {
IconDots,
IconMoonStars,
Expand All @@ -42,17 +42,17 @@ import {
IconUser,
IconUsers,
} from '@tabler/icons-react';
import React, { CSSProperties, useState } from 'react';
import { motion, useScroll, useTransform } from 'framer-motion';
import { signIn, signOut, useSession } from 'next-auth/react';
import React, { CSSProperties, useState } from 'react';
import { ChevronDown, FileSearch, Logout, World } from 'tabler-icons-react';
import { useClickOutside, useDisclosure } from '@mantine/hooks';

import Icon from './Icon';
import Link from 'next/link';
import classes from '../styles/components/Header.module.css';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';
import { useUser } from '../hooks/useUser';
import classes from '../styles/components/Header.module.css';
import Icon from './Icon';

interface HeaderProps {
links: {
Expand All @@ -69,7 +69,6 @@ const Header = ({ links, style }: HeaderProps) => {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const router = useRouter();
const theme = useMantineTheme();
const mobilePaperRef = useClickOutside(() => handler.close());
const { data: session, status } = useSession();
const user = useUser();
const items = links.map((link) => (
Expand All @@ -86,7 +85,7 @@ const Header = ({ links, style }: HeaderProps) => {
</Anchor>
));
return (
<Box className={classes.root} /*fixed*/ style={{ ...style, height: 60 }}>
<Box className={classes.root} style={{ ...style, height: 60 }}>
<Container className={classes.header} size={'xl'}>
<Group gap={5} className={classes.logo} onClick={() => router.push('/')}>
<img src="/logo.gif" alt="Logo" height="40" style={{ marginRight: '4px' }} />
Expand All @@ -105,6 +104,7 @@ const Header = ({ links, style }: HeaderProps) => {
<IconSearch stroke={1.5} style={{ width: '70%', height: '70%' }} />
</ActionIcon>
</Group>

<Group gap={5} className={classes.links}>
{session != null && session?.user ? (
<Menu
Expand Down Expand Up @@ -201,32 +201,32 @@ const Header = ({ links, style }: HeaderProps) => {
</Group>

<Group gap={5} className={classes.burger}>
<Burger opened={opened} onClick={() => handler.open()} size="sm" />
<Burger
opened={opened}
onClick={() => {
handler.toggle();
}}
size="sm"
/>
</Group>

<Transition transition="scale-y" duration={200} mounted={opened}>
{(styles: CSSProperties) => (
<Paper className={classes.dropdown} withBorder style={styles} ref={mobilePaperRef}>
<Paper className={classes.dropdown} withBorder style={styles}>
{items}
{session != null && session?.user ? (
<>
<Divider />
<UnstyledButton
className={classes.user}
onClick={() => router.push('/profile')}
data-useractive={userMenuOpened}
>
<UnstyledButton className={classes.user} onClick={() => router.push('/me')}>
<Group gap={7}>
<Indicator color="red" inline size={8} disabled={session.user.email_verified}>
<Avatar
alt={session.user.username || session.user.email || 'User Avatar'}
radius="xl"
size={'sm'}
color="blue"
>
{(session.user.username || session.user.email).charAt(0)}
</Avatar>
</Indicator>
<Avatar
alt={session.user.username || session.user.email || 'User Avatar'}
radius="xl"
size={'sm'}
color="blue"
>
{(session.user.username || session.user.email).charAt(0)}
</Avatar>
<Text fw={500} fs="sm" style={{ lineHeight: 1 }} mr={3}>
{session.user.username || session.user.email}
</Text>
Expand All @@ -238,7 +238,7 @@ const Header = ({ links, style }: HeaderProps) => {
<Divider />
<UnstyledButton className={classes.user} data-useractive={userMenuOpened}>
<Group gap={7}>
<Button onClick={() => router.push('/getstarted')}>{t('auth.signup')}</Button>
<Button onClick={() => router.push('/join')}>{t('auth.signup')}</Button>
<Button ml="md" onClick={() => signIn('keycloak')} variant="outline">
{t('auth.signin')}
</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ const Page = (props: PageProps) => {
style={{
color: '#ffffff',
fontSize: 'calc(var(--mantine-font-size-xl) * 2)',
zIndex: '99',
zIndex: '22',
marginTop: '60px',
marginRight: theme.spacing.md,
marginLeft: theme.spacing.md,
Expand Down
63 changes: 38 additions & 25 deletions src/styles/components/Header.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@

.dropdown {
position: absolute;
top: 60;
top: 60px;
left: 0;
right: 0;
z-index: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
border-top-width: 0;
z-index: 88;
border:none;
border-radius: 0;
overflow: hidden;
box-shadow: var(--mantine-shadow-md);
border-bottom: 1px solid var(--mantine-color-default-border);
border-top: 1px solid var(--mantine-color-default-border);

@media (min-width: $mantine-breakpoint-sm) {
@media (min-width: $mantine-breakpoint-md) {
display: none;
}
}
Expand Down Expand Up @@ -43,7 +44,7 @@
}

.links {
@media (max-width: $mantine-breakpoint-sm) {
@media (max-width: $mantine-breakpoint-md) {
display: none;
}
}
Expand All @@ -53,29 +54,41 @@
justify-content: space-between;
align-items: center;

@media (min-width: $mantine-breakpoint-sm) {
@media (min-width: $mantine-breakpoint-md) {
display: none;
}
}

.link {
display: block;
line-height: 1;
padding: 8px 12px;
cursor: pointer;
border-radius: 0;
text-decoration: none;
color: light-dark(#666, var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-sm);
transition: all 0.2s ease-in-out;

@media (min-width: $mantine-breakpoint-sm) {
@media (min-width: $mantine-breakpoint-md) {
border-radius: var(--mantine-radius-sm);
display: block;
line-height: 1;
padding: 8px 12px;
cursor: pointer;
text-decoration: none;
color: light-dark(#666, var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-sm);
transition: all 0.2s ease-in-out;
&:hover {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
color: light-dark(#000, var(--mantine-color-dark-0));
}
}

&:hover {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
color: light-dark(#000, var(--mantine-color-dark-0));
@media (max-width: $mantine-breakpoint-md) {
border-radius: 0;
display: block;
line-height: 1;
padding: var(--mantine-spacing-md) 28px;
cursor: pointer;
text-decoration: none;
color: light-dark(#666, var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-md);
transition: all 0.2s ease-in-out;
&:hover {
background-color: light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5));
color: light-dark(#000, var(--mantine-color-dark-0));
}
}
}

Expand All @@ -95,7 +108,7 @@
color: light-dark(var(--mantine-color-gray-7), var(--mantine-color-dark-0));
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm);
marginleft: var(--mantine-spacing-xs);
margin-left: var(--mantine-spacing-xs);
transition: background-color 100ms ease;
@media (max-width: $mantine-breakpoint-sm) {
border-radius: 0;
Expand All @@ -104,6 +117,6 @@
width: 100%;
}
&:hover {
backgroundcolor: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
}
}

0 comments on commit c9ef186

Please sign in to comment.