implement admin panel with login functionality and dashboard layout
This commit is contained in:
81
admin/src/Layout/Sidebar.tsx
Normal file
81
admin/src/Layout/Sidebar.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import React from "react";
|
||||
import { Box, Flex, VStack, Heading, Text, Link } from "@chakra-ui/react";
|
||||
|
||||
type SidebarProps = {
|
||||
viewAusleihen: () => void;
|
||||
viewGegenstaende: () => void;
|
||||
viewSchliessfaecher: () => void;
|
||||
viewUser: () => void;
|
||||
};
|
||||
|
||||
const Sidebar: React.FC<SidebarProps> = ({
|
||||
viewAusleihen,
|
||||
viewGegenstaende,
|
||||
viewSchliessfaecher,
|
||||
viewUser,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
as="aside"
|
||||
w="260px"
|
||||
minH="100vh"
|
||||
bg="gray.800"
|
||||
color="gray.100"
|
||||
px={6}
|
||||
py={8}
|
||||
borderRight="1px solid"
|
||||
borderColor="gray.700"
|
||||
>
|
||||
<Flex direction="column" h="full">
|
||||
<Heading size="md" mb={8} letterSpacing="wide">
|
||||
Borrow System
|
||||
</Heading>
|
||||
|
||||
<VStack align="stretch" gap={4} fontSize="sm">
|
||||
<Link
|
||||
px={3}
|
||||
py={2}
|
||||
rounded="md"
|
||||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||||
onClick={viewUser}
|
||||
>
|
||||
User
|
||||
</Link>
|
||||
<Link
|
||||
px={3}
|
||||
py={2}
|
||||
rounded="md"
|
||||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||||
onClick={viewAusleihen}
|
||||
>
|
||||
Ausleihen
|
||||
</Link>
|
||||
<Link
|
||||
px={3}
|
||||
py={2}
|
||||
rounded="md"
|
||||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||||
onClick={viewGegenstaende}
|
||||
>
|
||||
Gegenstände
|
||||
</Link>
|
||||
<Link
|
||||
px={3}
|
||||
py={2}
|
||||
rounded="md"
|
||||
_hover={{ bg: "gray.700", textDecoration: "none" }}
|
||||
onClick={viewSchliessfaecher}
|
||||
>
|
||||
Schließfächer
|
||||
</Link>
|
||||
</VStack>
|
||||
|
||||
<Box mt="auto" pt={8} fontSize="xs" color="gray.500">
|
||||
<Text>© Made with ❤️ by Theis Gaedigk</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
Reference in New Issue
Block a user