fix: dom nesting bugs
This commit is contained in:
anik-ghosh-au7
parent
de44c40de5
commit
0433d64737
|
|
@ -1,4 +1,4 @@
|
|||
import React, { ReactNode } from "react";
|
||||
import React, { Fragment, ReactNode } from 'react';
|
||||
import {
|
||||
IconButton,
|
||||
Box,
|
||||
|
|
@ -23,7 +23,7 @@ import {
|
|||
AccordionItem,
|
||||
AccordionIcon,
|
||||
useMediaQuery,
|
||||
} from "@chakra-ui/react";
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FiHome,
|
||||
FiUser,
|
||||
|
|
@ -34,21 +34,21 @@ import {
|
|||
FiUsers,
|
||||
FiChevronDown,
|
||||
FiShieldOff,
|
||||
} from "react-icons/fi";
|
||||
import { BiCustomize } from "react-icons/bi";
|
||||
import { AiOutlineKey } from "react-icons/ai";
|
||||
import { SiOpenaccess, SiJsonwebtokens } from "react-icons/si";
|
||||
import { MdSecurity } from "react-icons/md";
|
||||
import { RiDatabase2Line } from "react-icons/ri";
|
||||
import { BsCheck2Circle } from "react-icons/bs";
|
||||
import { HiOutlineMail, HiOutlineOfficeBuilding } from "react-icons/hi";
|
||||
import { IconType } from "react-icons";
|
||||
import { ReactText } from "react";
|
||||
import { useMutation, useQuery } from "urql";
|
||||
import { NavLink, useNavigate, useLocation } from "react-router-dom";
|
||||
import { useAuthContext } from "../contexts/AuthContext";
|
||||
import { AdminLogout } from "../graphql/mutation";
|
||||
import { MetaQuery } from "../graphql/queries";
|
||||
} from 'react-icons/fi';
|
||||
import { BiCustomize } from 'react-icons/bi';
|
||||
import { AiOutlineKey } from 'react-icons/ai';
|
||||
import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
|
||||
import { MdSecurity } from 'react-icons/md';
|
||||
import { RiDatabase2Line } from 'react-icons/ri';
|
||||
import { BsCheck2Circle } from 'react-icons/bs';
|
||||
import { HiOutlineMail, HiOutlineOfficeBuilding } from 'react-icons/hi';
|
||||
import { IconType } from 'react-icons';
|
||||
import { ReactText } from 'react';
|
||||
import { useMutation, useQuery } from 'urql';
|
||||
import { NavLink, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { useAuthContext } from '../contexts/AuthContext';
|
||||
import { AdminLogout } from '../graphql/mutation';
|
||||
import { MetaQuery } from '../graphql/queries';
|
||||
|
||||
interface SubRoutes {
|
||||
name: string;
|
||||
|
|
@ -64,57 +64,57 @@ interface LinkItemProps {
|
|||
}
|
||||
const LinkItems: Array<LinkItemProps> = [
|
||||
{
|
||||
name: "Environment ",
|
||||
name: 'Environment ',
|
||||
icon: FiSettings,
|
||||
route: "/",
|
||||
route: '/',
|
||||
subRoutes: [
|
||||
{
|
||||
name: "OAuth Config",
|
||||
name: 'OAuth Config',
|
||||
icon: AiOutlineKey,
|
||||
route: "/oauth-setting",
|
||||
route: '/oauth-setting',
|
||||
},
|
||||
|
||||
{ name: "Roles", icon: FiUser, route: "/roles" },
|
||||
{ name: 'Roles', icon: FiUser, route: '/roles' },
|
||||
{
|
||||
name: "JWT Secrets",
|
||||
name: 'JWT Secrets',
|
||||
icon: SiJsonwebtokens,
|
||||
route: "/jwt-config",
|
||||
route: '/jwt-config',
|
||||
},
|
||||
{
|
||||
name: "Session Storage",
|
||||
name: 'Session Storage',
|
||||
icon: RiDatabase2Line,
|
||||
route: "/session-storage",
|
||||
route: '/session-storage',
|
||||
},
|
||||
{
|
||||
name: "Email Configurations",
|
||||
name: 'Email Configurations',
|
||||
icon: HiOutlineMail,
|
||||
route: "/email-config",
|
||||
route: '/email-config',
|
||||
},
|
||||
{
|
||||
name: "Domain White Listing",
|
||||
name: 'Domain White Listing',
|
||||
icon: BsCheck2Circle,
|
||||
route: "/whitelist-variables",
|
||||
route: '/whitelist-variables',
|
||||
},
|
||||
{
|
||||
name: "Organization Info",
|
||||
name: 'Organization Info',
|
||||
icon: HiOutlineOfficeBuilding,
|
||||
route: "/organization-info",
|
||||
route: '/organization-info',
|
||||
},
|
||||
{ name: "Access Token", icon: SiOpenaccess, route: "/access-token" },
|
||||
{ name: 'Access Token', icon: SiOpenaccess, route: '/access-token' },
|
||||
{
|
||||
name: "UI Customization",
|
||||
name: 'UI Customization',
|
||||
icon: BiCustomize,
|
||||
route: "/ui-customization",
|
||||
route: '/ui-customization',
|
||||
},
|
||||
{ name: "Database", icon: RiDatabase2Line, route: "/db-cred" },
|
||||
{ name: 'Database', icon: RiDatabase2Line, route: '/db-cred' },
|
||||
{
|
||||
name: " Security",
|
||||
name: ' Security',
|
||||
icon: MdSecurity,
|
||||
route: "/admin-secret",
|
||||
route: '/admin-secret',
|
||||
},
|
||||
],
|
||||
},
|
||||
{ name: "Users", icon: FiUsers, route: "/users" },
|
||||
{ name: 'Users', icon: FiUsers, route: '/users' },
|
||||
];
|
||||
|
||||
interface SidebarProps extends BoxProps {
|
||||
|
|
@ -124,14 +124,14 @@ interface SidebarProps extends BoxProps {
|
|||
export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
||||
const { pathname } = useLocation();
|
||||
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
||||
const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)");
|
||||
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
||||
return (
|
||||
<Box
|
||||
transition="3s ease"
|
||||
bg={useColorModeValue("white", "gray.900")}
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
borderRight="1px"
|
||||
borderRightColor={useColorModeValue("gray.200", "gray.700")}
|
||||
w={{ base: "full", md: 60 }}
|
||||
borderRightColor={useColorModeValue('gray.200', 'gray.700')}
|
||||
w={{ base: 'full', md: 60 }}
|
||||
pos="fixed"
|
||||
h="full"
|
||||
{...rest}
|
||||
|
|
@ -149,29 +149,31 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
</Text>
|
||||
</Flex>
|
||||
</NavLink>
|
||||
<CloseButton display={{ base: "flex", md: "none" }} onClick={onClose} />
|
||||
<CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
|
||||
</Flex>
|
||||
|
||||
<Accordion defaultIndex={[0]} allowMultiple>
|
||||
<AccordionItem textAlign="center" border="none" w="100%">
|
||||
{LinkItems.map((link) =>
|
||||
link?.subRoutes ? (
|
||||
<NavLink key={link.name} to={link.route}>
|
||||
<div key={link.name}>
|
||||
<AccordionButton>
|
||||
<Text fontSize="md">
|
||||
<Text as="div" fontSize="md">
|
||||
<NavItem
|
||||
icon={link.icon}
|
||||
color={pathname === link.route ? "blue.500" : ""}
|
||||
style={{outline: "unset"}}
|
||||
color={pathname === link.route ? 'blue.500' : ''}
|
||||
style={{ outline: 'unset' }}
|
||||
height={12}
|
||||
ml={-1}
|
||||
mb={isNotSmallerScreen ? -1 : -4}
|
||||
w={isNotSmallerScreen ? "100%" : "310%"}
|
||||
w={isNotSmallerScreen ? '100%' : '310%'}
|
||||
>
|
||||
<Fragment>
|
||||
{link.name}
|
||||
<Box display={{ base: "none", md: "flex" }} ml={12}>
|
||||
<Box display={{ base: 'none', md: 'flex' }} ml={12}>
|
||||
<FiChevronDown />
|
||||
</Box>
|
||||
</Fragment>
|
||||
</NavItem>
|
||||
</Text>
|
||||
</AccordionButton>
|
||||
|
|
@ -182,32 +184,32 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
to={sublink.route}
|
||||
onClick={onClose}
|
||||
>
|
||||
{" "}
|
||||
<Text fontSize="xs" ml={2}>
|
||||
{' '}
|
||||
<Text as="div" fontSize="xs" ml={2}>
|
||||
<NavItem
|
||||
icon={sublink.icon}
|
||||
color={pathname === sublink.route ? "blue.500" : ""}
|
||||
color={pathname === sublink.route ? 'blue.500' : ''}
|
||||
height={8}
|
||||
>
|
||||
{sublink.name}
|
||||
</NavItem>{" "}
|
||||
</NavItem>{' '}
|
||||
</Text>
|
||||
</NavLink>
|
||||
))}
|
||||
</AccordionPanel>
|
||||
</NavLink>
|
||||
</div>
|
||||
) : (
|
||||
<NavLink key={link.name} to={link.route}>
|
||||
{" "}
|
||||
<Text fontSize="md" w="100%" mt={-2}>
|
||||
{' '}
|
||||
<Text as="div" fontSize="md" w="100%" mt={-2}>
|
||||
<NavItem
|
||||
icon={link.icon}
|
||||
color={pathname === link.route ? "blue.500" : ""}
|
||||
color={pathname === link.route ? 'blue.500' : ''}
|
||||
height={12}
|
||||
onClick={onClose}
|
||||
>
|
||||
{link.name}
|
||||
</NavItem>{" "}
|
||||
</NavItem>{' '}
|
||||
</Text>
|
||||
</NavLink>
|
||||
)
|
||||
|
|
@ -216,9 +218,9 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
href="/playground"
|
||||
target="_blank"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
_focus={{ _boxShadow: "none" }}
|
||||
_focus={{ _boxShadow: 'none' }}
|
||||
>
|
||||
<NavItem icon={FiCode}>API Playground</NavItem>
|
||||
</Link>
|
||||
|
|
@ -227,7 +229,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
|
||||
{data?.meta?.version && (
|
||||
<Flex alignContent="center">
|
||||
{" "}
|
||||
{' '}
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
|
|
@ -246,7 +248,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
|
||||
interface NavItemProps extends FlexProps {
|
||||
icon: IconType;
|
||||
children: ReactText;
|
||||
children: ReactText | JSX.Element | JSX.Element[];
|
||||
}
|
||||
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
||||
return (
|
||||
|
|
@ -258,8 +260,8 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
|||
role="group"
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
bg: "blue.500",
|
||||
color: "white",
|
||||
bg: 'blue.500',
|
||||
color: 'white',
|
||||
}}
|
||||
{...rest}
|
||||
>
|
||||
|
|
@ -268,7 +270,7 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
|||
mr="4"
|
||||
fontSize="16"
|
||||
_groupHover={{
|
||||
color: "white",
|
||||
color: 'white',
|
||||
}}
|
||||
as={icon}
|
||||
/>
|
||||
|
|
@ -289,7 +291,7 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
|||
const handleLogout = async () => {
|
||||
await logout();
|
||||
setIsLoggedIn(false);
|
||||
navigate("/", { replace: true });
|
||||
navigate('/', { replace: true });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -301,15 +303,15 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
|||
right="0"
|
||||
left="0"
|
||||
alignItems="center"
|
||||
bg={useColorModeValue("white", "gray.900")}
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
borderBottomWidth="1px"
|
||||
borderBottomColor={useColorModeValue("gray.200", "gray.700")}
|
||||
justifyContent={{ base: "space-between", md: "flex-end" }}
|
||||
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
|
||||
justifyContent={{ base: 'space-between', md: 'flex-end' }}
|
||||
zIndex={99}
|
||||
{...rest}
|
||||
>
|
||||
<IconButton
|
||||
display={{ base: "flex", md: "none" }}
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
onClick={onOpen}
|
||||
variant="outline"
|
||||
aria-label="open menu"
|
||||
|
|
@ -320,35 +322,35 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
|||
src="https://authorizer.dev/images/logo.png"
|
||||
alt="logo"
|
||||
height="36px"
|
||||
display={{ base: "flex", md: "none" }}
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
/>
|
||||
|
||||
<HStack spacing={{ base: "0", md: "6" }}>
|
||||
<Flex alignItems={"center"}>
|
||||
<HStack spacing={{ base: '0', md: '6' }}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
py={2}
|
||||
transition="all 0.3s"
|
||||
_focus={{ boxShadow: "none" }}
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<HStack mr={5}>
|
||||
<FiUser />
|
||||
<VStack
|
||||
display={{ base: "none", md: "flex" }}
|
||||
display={{ base: 'none', md: 'flex' }}
|
||||
alignItems="flex-start"
|
||||
spacing="1px"
|
||||
ml="2"
|
||||
>
|
||||
<Text fontSize="sm">Admin</Text>
|
||||
</VStack>
|
||||
<Box display={{ base: "none", md: "flex" }}>
|
||||
<Box display={{ base: 'none', md: 'flex' }}>
|
||||
<FiChevronDown />
|
||||
</Box>
|
||||
</HStack>
|
||||
</MenuButton>
|
||||
<MenuList
|
||||
bg={useColorModeValue("white", "gray.900")}
|
||||
borderColor={useColorModeValue("gray.200", "gray.700")}
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
borderColor={useColorModeValue('gray.200', 'gray.700')}
|
||||
>
|
||||
<MenuItem onClick={handleLogout}>Sign out</MenuItem>
|
||||
</MenuList>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user