Layout revamp

Author: nekiro

src/components/DropdownButton.tsx

@@ -1,8 +1,7 @@
-import Link from "next/link";
-import React from "react";
 import { useRouter } from "next/router";
-import { IoChevronDown } from "react-icons/io5";
-import { Menu, MenuButton, MenuList, MenuItem, Button } from "@chakra-ui/react";
+import { Menu, MenuButton, MenuList, Button, useDisclosure, MenuItem } from "@chakra-ui/react";
+import { IoChevronDown, IoChevronUp } from "react-icons/io5";
+import Link from "next/link";
 
 export interface DropdownButtonProps {
 	hasMenu?: boolean;
@@ -13,22 +12,22 @@ export interface DropdownButtonProps {
 
 const DropdownButton = ({ hasMenu = false, text, href, list }: DropdownButtonProps) => {
 	const router = useRouter();
+	const { isOpen, onOpen, onClose } = useDisclosure();
 	const isActive = hasMenu ? list?.some((item) => router.asPath.startsWith(item.url)) : router.asPath === href;
 
 	if (hasMenu) {
 		return (
-			<Menu>
+			<Menu isOpen={isOpen} onOpen={onOpen} onClose={onClose}>
 				<MenuButton
-					color="white"
-					bg={isActive ? "#c3a6d9)" : "transparent"}
+					color={isActive ? "black" : "white"}
+					bg={isActive ? "#c3a6d9" : ""}
 					as={Button}
-					pt="25px"
-					pb="25px"
+					h="100%"
 					borderRadius={0}
-					rightIcon={<IoChevronDown />}
-					fontWeight="normal"
+					rightIcon={isOpen ? <IoChevronUp size="10px" /> : <IoChevronDown size="10px" />}
+					fontWeight={"normal"}
 					_hover={{ bgColor: "rgba(255, 255, 255, 0.3)" }}
-					_active={{ bgColor: " rgba(255, 255, 255, 0.3)" }}
+					_active={{ bgColor: "rgba(255, 255, 255, 0.3)" }}
 					_focus={{ outline: 0 }}
 				>
 					{text}
@@ -49,26 +48,24 @@ const DropdownButton = ({ hasMenu = false, text, href, list }: DropdownButtonPro
 				</MenuList>
 			</Menu>
 		);
-	} else if (href) {
-		return (
-			<Link href={href} passHref>
-				<Button
-					color="white"
-					bg={isActive ? "#c3a6d9" : "transparent"}
-					pt="25px"
-					pb="25px"
-					borderRadius={0}
-					fontWeight="normal"
-					_hover={{ bgColor: "rgba(255, 255, 255, 0.3)" }}
-					_active={{ bgColor: " rgba(255, 255, 255, 0.3)" }}
-					_focus={{ outline: "0" }}
-					alignSelf="self-end"
-				>
-					{text}
-				</Button>
-			</Link>
-		);
 	}
+
+	return (
+		<Link href={href ?? "#"} style={{ height: "100%" }} passHref>
+			<Button
+				h="100%"
+				color={isActive ? "black" : "white"}
+				bg={isActive ? "#c3a6d9" : ""}
+				borderRadius={0}
+				fontWeight="normal"
+				_hover={{ bgColor: "rgba(255, 255, 255, 0.3)" }}
+				_active={{ bgColor: "rgba(255, 255, 255, 0.3)" }}
+				_focus={{ outline: 0 }}
+			>
+				{text}
+			</Button>
+		</Link>
+	);
 };
 
 export default DropdownButton;

src/components/NewsPanel.tsx

@@ -13,7 +13,7 @@ export interface NewsPanelProps extends FlexProps {
 	isLoading?: boolean;
 }
 
-const NewsPanel = ({ header = "Loading...", date, identifier, children, isLoading = false, borderRadius = "md", ...props }: NewsPanelProps) => {
+const NewsPanel = ({ header = "Loading...", date, identifier, children, isLoading = false, borderRadius = "none", ...props }: NewsPanelProps) => {
 	return (
 		<Flex key={identifier} width="100%" flexDirection="column" color="black" bgColor="#fff" borderRadius={borderRadius} {...props}>
 			<Flex bg="#f5f5f5" borderBottomWidth="1px" borderTopWidth="1px" borderColor="#ddd" borderRadius={borderRadius}>

src/components/Panel.tsx

@@ -12,41 +12,35 @@ export interface PanelProps extends FlexProps {
 	isLoading?: boolean;
 }
 
-const Panel = ({
-	header = "Loading...",
-	date,
-	identifier,
-	children,
-	isLoading = false,
-	borderRadius = "md",
-	padding = "10px",
-	...props
-}: PanelProps) => {
+const Panel = ({ header, date, identifier, children, isLoading = false, borderRadius = "none", padding = "10px", ...props }: PanelProps) => {
 	return (
 		<Flex
 			key={identifier}
 			width="100%"
 			flexDirection="column"
-			color="black"
+			color="white"
 			border="1px"
 			borderColor="#ddd"
 			bgColor="#fff"
+			textAlign="center"
 			borderRadius={borderRadius}
 			borderBottomRadius={0}
 			{...props}
 		>
-			<Flex bg="#f5f5f5" border="1px" borderColor="#ddd" borderRadius={borderRadius}>
-				<Grid margin="10px" width="100%" templateColumns="1fr auto">
-					<Text>{header}</Text>
-					{date && (
-						<Box display="flex" justifyContent="flex-end">
-							<Text display="flex" alignItems="center">
-								<IoMdTime /> {formatDate(date)}
-							</Text>
-						</Box>
-					)}
-				</Grid>
-			</Flex>
+			{header && (
+				<Flex bg="violet.500" border="1px" borderColor="#ddd" borderRadius={borderRadius}>
+					<Grid margin="10px" width="100%" templateColumns="1fr auto">
+						<Text>{header}</Text>
+						{date && (
+							<Box display="flex" justifyContent="flex-end">
+								<Text display="flex" alignItems="center">
+									<IoMdTime /> {formatDate(date)}
+								</Text>
+							</Box>
+						)}
+					</Grid>
+				</Flex>
+			)}
 			<Box padding={padding}>{isLoading ? <Loader /> : children}</Box>
 		</Flex>
 	);

src/layout/Footer.tsx

@@ -1,5 +1,7 @@
-import { Box } from "@chakra-ui/react";
+import { Box, BoxProps } from "@chakra-ui/react";
 
-export const TopBarSeparator = () => {
-	return <Box bgColor="violet.400" w="1px" h="100%" />;
+interface TopBarSeparatorProps extends BoxProps {}
+
+export const TopBarSeparator = ({ ...props }: TopBarSeparatorProps) => {
+	return <Box bgColor="violet.400" w="1px" h="100%" {...props} />;
 };