login page vertically responsive
This commit is contained in:
akash.dutta
parent
28bed69b2e
commit
3e51a7bd01
|
|
@ -24,17 +24,7 @@ import {
|
|||
AccordionIcon,
|
||||
useMediaQuery,
|
||||
} from '@chakra-ui/react';
|
||||
import {
|
||||
FiHome,
|
||||
FiUser,
|
||||
FiGlobe,
|
||||
FiCode,
|
||||
FiSettings,
|
||||
FiMenu,
|
||||
FiUsers,
|
||||
FiChevronDown,
|
||||
FiShieldOff,
|
||||
} from 'react-icons/fi';
|
||||
import { FiUser, FiCode, FiSettings, FiMenu, FiUsers, FiChevronDown } from 'react-icons/fi';
|
||||
import { BiCustomize } from 'react-icons/bi';
|
||||
import { AiOutlineKey } from 'react-icons/ai';
|
||||
import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si';
|
||||
|
|
@ -127,24 +117,20 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
||||
return (
|
||||
<Box
|
||||
transition="3s ease"
|
||||
transition='3s ease'
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
borderRight="1px"
|
||||
borderRight='1px'
|
||||
borderRightColor={useColorModeValue('gray.200', 'gray.700')}
|
||||
w={{ base: 'full', md: 60 }}
|
||||
pos="fixed"
|
||||
h="full"
|
||||
pos='fixed'
|
||||
h='full'
|
||||
{...rest}
|
||||
>
|
||||
<Flex h="20" alignItems="center" mx="18" justifyContent="space-between">
|
||||
<NavLink to="/">
|
||||
<Flex alignItems="center">
|
||||
<Image
|
||||
src="https://authorizer.dev/images/logo.png"
|
||||
alt="logo"
|
||||
height="36px"
|
||||
/>
|
||||
<Text fontSize="large" ml="2" letterSpacing="3">
|
||||
<Flex h='20' alignItems='center' mx='18' justifyContent='space-between' flexDirection='column'>
|
||||
<NavLink to='/'>
|
||||
<Flex alignItems='center' mt='6'>
|
||||
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='36px' />
|
||||
<Text fontSize='large' ml='2' letterSpacing='3'>
|
||||
AUTHORIZER
|
||||
</Text>
|
||||
</Flex>
|
||||
|
|
@ -153,12 +139,12 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
</Flex>
|
||||
|
||||
<Accordion defaultIndex={[0]} allowMultiple>
|
||||
<AccordionItem textAlign="center" border="none" w="100%">
|
||||
<AccordionItem textAlign='center' border='none' w='100%'>
|
||||
{LinkItems.map((link) =>
|
||||
link?.subRoutes ? (
|
||||
<div key={link.name}>
|
||||
<AccordionButton>
|
||||
<Text as="div" fontSize="md">
|
||||
<Text as='div' fontSize='md'>
|
||||
<NavItem
|
||||
icon={link.icon}
|
||||
color={pathname === link.route ? 'blue.500' : ''}
|
||||
|
|
@ -179,18 +165,10 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
{link.subRoutes?.map((sublink) => (
|
||||
<NavLink
|
||||
key={sublink.name}
|
||||
to={sublink.route}
|
||||
onClick={onClose}
|
||||
>
|
||||
<NavLink key={sublink.name} to={sublink.route} onClick={onClose}>
|
||||
{' '}
|
||||
<Text as="div" fontSize="xs" ml={2}>
|
||||
<NavItem
|
||||
icon={sublink.icon}
|
||||
color={pathname === sublink.route ? 'blue.500' : ''}
|
||||
height={8}
|
||||
>
|
||||
<Text as='div' fontSize='xs' ml={2}>
|
||||
<NavItem icon={sublink.icon} color={pathname === sublink.route ? 'blue.500' : ''} height={8}>
|
||||
{sublink.name}
|
||||
</NavItem>{' '}
|
||||
</Text>
|
||||
|
|
@ -201,7 +179,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
) : (
|
||||
<NavLink key={link.name} to={link.route}>
|
||||
{' '}
|
||||
<Text as="div" 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' : ''}
|
||||
|
|
@ -215,8 +193,8 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
)
|
||||
)}
|
||||
<Link
|
||||
href="/playground"
|
||||
target="_blank"
|
||||
href='/playground'
|
||||
target='_blank'
|
||||
style={{
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
|
|
@ -228,16 +206,9 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
|
|||
</Accordion>
|
||||
|
||||
{data?.meta?.version && (
|
||||
<Flex alignContent="center">
|
||||
<Flex alignContent='center'>
|
||||
{' '}
|
||||
<Text
|
||||
color="gray.400"
|
||||
fontSize="sm"
|
||||
textAlign="center"
|
||||
position="absolute"
|
||||
bottom="5"
|
||||
left="7"
|
||||
>
|
||||
<Text color='gray.400' fontSize='sm' textAlign='center' position='absolute' bottom='5' left='7'>
|
||||
Current Version: {data.meta.version}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
|
@ -253,12 +224,12 @@ interface NavItemProps extends FlexProps {
|
|||
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
||||
return (
|
||||
<Flex
|
||||
align="center"
|
||||
p="3"
|
||||
mx="3"
|
||||
borderRadius="md"
|
||||
role="group"
|
||||
cursor="pointer"
|
||||
align='center'
|
||||
p='3'
|
||||
mx='3'
|
||||
borderRadius='md'
|
||||
role='group'
|
||||
cursor='pointer'
|
||||
_hover={{
|
||||
bg: 'blue.500',
|
||||
color: 'white',
|
||||
|
|
@ -267,8 +238,8 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
|
|||
>
|
||||
{icon && (
|
||||
<Icon
|
||||
mr="4"
|
||||
fontSize="16"
|
||||
mr='4'
|
||||
fontSize='16'
|
||||
_groupHover={{
|
||||
color: 'white',
|
||||
}}
|
||||
|
|
@ -298,13 +269,13 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
|||
<Flex
|
||||
ml={{ base: 0, md: 60 }}
|
||||
px={{ base: 4, md: 4 }}
|
||||
height="20"
|
||||
position="fixed"
|
||||
right="0"
|
||||
left="0"
|
||||
alignItems="center"
|
||||
height='20'
|
||||
position='fixed'
|
||||
right='0'
|
||||
left='0'
|
||||
alignItems='center'
|
||||
bg={useColorModeValue('white', 'gray.900')}
|
||||
borderBottomWidth="1px"
|
||||
borderBottomWidth='1px'
|
||||
borderBottomColor={useColorModeValue('gray.200', 'gray.700')}
|
||||
justifyContent={{ base: 'space-between', md: 'flex-end' }}
|
||||
zIndex={99}
|
||||
|
|
@ -313,35 +284,26 @@ export const MobileNav = ({ onOpen, ...rest }: MobileProps) => {
|
|||
<IconButton
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
onClick={onOpen}
|
||||
variant="outline"
|
||||
aria-label="open menu"
|
||||
variant='outline'
|
||||
aria-label='open menu'
|
||||
icon={<FiMenu />}
|
||||
/>
|
||||
|
||||
<Image
|
||||
src="https://authorizer.dev/images/logo.png"
|
||||
alt="logo"
|
||||
height="36px"
|
||||
src='https://authorizer.dev/images/logo.png'
|
||||
alt='logo'
|
||||
height='36px'
|
||||
display={{ base: 'flex', md: 'none' }}
|
||||
/>
|
||||
|
||||
<HStack spacing={{ base: '0', md: '6' }}>
|
||||
<Flex alignItems={'center'}>
|
||||
<Menu>
|
||||
<MenuButton
|
||||
py={2}
|
||||
transition="all 0.3s"
|
||||
_focus={{ boxShadow: 'none' }}
|
||||
>
|
||||
<MenuButton py={2} transition='all 0.3s' _focus={{ boxShadow: 'none' }}>
|
||||
<HStack mr={5}>
|
||||
<FiUser />
|
||||
<VStack
|
||||
display={{ base: 'none', md: 'flex' }}
|
||||
alignItems="flex-start"
|
||||
spacing="1px"
|
||||
ml="2"
|
||||
>
|
||||
<Text fontSize="sm">Admin</Text>
|
||||
<VStack display={{ base: 'none', md: 'flex' }} alignItems='flex-start' spacing='1px' ml='2'>
|
||||
<Text fontSize='sm'>Admin</Text>
|
||||
</VStack>
|
||||
<Box display={{ base: 'none', md: 'flex' }}>
|
||||
<FiChevronDown />
|
||||
|
|
|
|||
|
|
@ -6,16 +6,9 @@ import { MetaQuery } from '../graphql/queries';
|
|||
export function AuthLayout({ children }: { children: React.ReactNode }) {
|
||||
const [{ fetching, data }] = useQuery({ query: MetaQuery });
|
||||
const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)');
|
||||
const [isVerticalRes] = useMediaQuery('(max-height:600px)');
|
||||
return (
|
||||
<Stack
|
||||
h='100vh'
|
||||
bg='gray.100'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
direction={['column', 'column']}
|
||||
spacing={6}
|
||||
>
|
||||
<Flex h='100vh' bg='gray.100' alignItems='center' justifyContent='center' direction={['column', 'column']}>
|
||||
{/* <Flex alignItems='center' direction={['column', 'column']} ml={isNotSmallerScreen ? 0 : 8}> */}
|
||||
<Flex alignItems='center'>
|
||||
<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='50' />
|
||||
<Text fontSize='x-large' ml='3' letterSpacing='3'>
|
||||
|
|
@ -35,6 +28,7 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
|
|||
</Text>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
{/* </Flex> */}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user