fix: github link and light theme hover nav link

This commit is contained in:
iCrawl
2022-08-23 01:21:28 +02:00
parent a55545850a
commit 0b56184ba7
2 changed files with 29 additions and 10 deletions

View File

@@ -81,6 +81,10 @@ const useStyles = createStyles((theme) => ({
'&:hover': { '&:hover': {
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0], backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark![6] : theme.colors.gray![0],
color: theme.colorScheme === 'dark' ? theme.white : theme.black, color: theme.colorScheme === 'dark' ? theme.white : theme.black,
'&[data-active]': {
color: theme.white,
},
}, },
}, },
})); }));

View File

@@ -26,7 +26,7 @@ import Image from 'next/future/image';
import Link from 'next/link'; import Link from 'next/link';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { type PropsWithChildren, useState } from 'react'; import { type PropsWithChildren, useState } from 'react';
import { VscChevronDown, VscPackage, VscVersions } from 'react-icons/vsc'; import { VscChevronDown, VscGithubInverted, VscPackage, VscVersions } from 'react-icons/vsc';
import { WiDaySunny, WiNightClear } from 'react-icons/wi'; import { WiDaySunny, WiNightClear } from 'react-icons/wi';
import useSWR from 'swr'; import useSWR from 'swr';
import { SidebarItems } from './SidebarItems'; import { SidebarItems } from './SidebarItems';
@@ -110,7 +110,6 @@ export function SidebarLayout({
); );
const theme = useMantineTheme(); const theme = useMantineTheme();
const { colorScheme, toggleColorScheme } = useMantineColorScheme(); const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const dark = colorScheme === 'dark';
const [opened, setOpened] = useState(false); const [opened, setOpened] = useState(false);
const [openedLibPicker, setOpenedLibPicker] = useState(false); const [openedLibPicker, setOpenedLibPicker] = useState(false);
@@ -239,14 +238,29 @@ export function SidebarLayout({
<Breadcrumbs>{breadcrumbs}</Breadcrumbs> <Breadcrumbs>{breadcrumbs}</Breadcrumbs>
</MediaQuery> </MediaQuery>
</Box> </Box>
<ActionIcon <Group>
variant="outline" <Link href="https://github.com/discordjs/discord.js" passHref>
color={dark ? 'yellow' : 'blurple'} <ActionIcon
onClick={() => toggleColorScheme()} component="a"
title="Toggle color scheme" target="_blank"
> rel="noopener noreferrer"
{dark ? <WiDaySunny size={20} /> : <WiNightClear size={20} />} variant="transparent"
</ActionIcon> color="dark"
title="GitHub repository"
>
<VscGithubInverted size={20} />
</ActionIcon>
</Link>
<ActionIcon
variant="subtle"
color={colorScheme === 'dark' ? 'yellow' : 'blue'}
onClick={() => toggleColorScheme()}
title="Toggle color scheme"
radius="xs"
>
{colorScheme === 'dark' ? <WiDaySunny size={30} /> : <WiNightClear size={30} />}
</ActionIcon>
</Group>
</Box> </Box>
</Header> </Header>
} }
@@ -267,6 +281,7 @@ export function SidebarLayout({
</Box> </Box>
<Box sx={{ height: 200 }}></Box> <Box sx={{ height: 200 }}></Box>
<Box <Box
component="footer"
sx={(theme) => ({ sx={(theme) => ({
position: 'fixed', position: 'fixed',
bottom: 0, bottom: 0,