login page vertically responsive

dashboard/src/components/Menu.tsx

@@ -24,17 +24,7 @@ import {
 	AccordionIcon,
 	useMediaQuery,
 } from '@chakra-ui/react';
-import {
+import { FiUser, FiCode, FiSettings, FiMenu, FiUsers, FiChevronDown } from 'react-icons/fi';
-	FiHome,
-	FiUser,
-	FiGlobe,
-	FiCode,
-	FiSettings,
-	FiMenu,
-	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';
@@ -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"
+			pos='fixed'
-			h="full"
+			h='full'
 			{...rest}
 		>
-			<Flex h="20" alignItems="center" mx="18" justifyContent="space-between">
+			<Flex h='20' alignItems='center' mx='18' justifyContent='space-between' flexDirection='column'>
-				<NavLink to="/">
+				<NavLink to='/'>
-					<Flex alignItems="center">
+					<Flex alignItems='center' mt='6'>
-						<Image
+						<Image src='https://authorizer.dev/images/logo.png' alt='logo' height='36px' />
-							src="https://authorizer.dev/images/logo.png"
+						<Text fontSize='large' ml='2' letterSpacing='3'>
-							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
+										<NavLink key={sublink.name} to={sublink.route} onClick={onClose}>
-											key={sublink.name}
-											to={sublink.route}
-											onClick={onClose}
-										>
 											{' '}
-											<Text as="div" fontSize="xs" ml={2}>
+											<Text as='div' fontSize='xs' ml={2}>
-												<NavItem
+												<NavItem icon={sublink.icon} color={pathname === sublink.route ? 'blue.500' : ''} height={8}>
-													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"
+						href='/playground'
-						target="_blank"
+						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
+					<Text color='gray.400' fontSize='sm' textAlign='center' position='absolute' bottom='5' left='7'>
-						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"
+			align='center'
-			p="3"
+			p='3'
-			mx="3"
+			mx='3'
-			borderRadius="md"
+			borderRadius='md'
-			role="group"
+			role='group'
-			cursor="pointer"
+			cursor='pointer'
 			_hover={{
 				bg: 'blue.500',
 				color: 'white',
@@ -267,8 +238,8 @@ export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
 		>
 			{icon && (
 				<Icon
-					mr="4"
+					mr='4'
-					fontSize="16"
+					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"
+			height='20'
-			position="fixed"
+			position='fixed'
-			right="0"
+			right='0'
-			left="0"
+			left='0'
-			alignItems="center"
+			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"
+				variant='outline'
-				aria-label="open menu"
+				aria-label='open menu'
 				icon={<FiMenu />}
 			/>
 
 			<Image
-				src="https://authorizer.dev/images/logo.png"
+				src='https://authorizer.dev/images/logo.png'
-				alt="logo"
+				alt='logo'
-				height="36px"
+				height='36px'
 				display={{ base: 'flex', md: 'none' }}
 			/>
 
 			<HStack spacing={{ base: '0', md: '6' }}>
 				<Flex alignItems={'center'}>
 					<Menu>
-						<MenuButton
+						<MenuButton py={2} transition='all 0.3s' _focus={{ boxShadow: 'none' }}>
-							py={2}
-							transition="all 0.3s"
-							_focus={{ boxShadow: 'none' }}
-						>
 							<HStack mr={5}>
 								<FiUser />
-								<VStack
+								<VStack display={{ base: 'none', md: 'flex' }} alignItems='flex-start' spacing='1px' ml='2'>
-									display={{ base: 'none', md: 'flex' }}
+									<Text fontSize='sm'>Admin</Text>
-									alignItems="flex-start"
-									spacing="1px"
-									ml="2"
-								>
-									<Text fontSize="sm">Admin</Text>
 								</VStack>
 								<Box display={{ base: 'none', md: 'flex' }}>
 									<FiChevronDown />

dashboard/src/layouts/AuthLayout.tsx

@@ -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
+		<Flex h='100vh' bg='gray.100' alignItems='center' justifyContent='center' direction={['column', 'column']}>
-			h='100vh'
+			{/* <Flex alignItems='center' direction={['column', 'column']} ml={isNotSmallerScreen ? 0 : 8}> */}
-			bg='gray.100'
-			alignItems='center'
-			justifyContent='center'
-			direction={['column', 'column']}
-			spacing={6}
-		>
 			<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>
 	);
 }