implement admin panel with login functionality and dashboard layout

This commit is contained in:
2025-08-31 18:07:49 +02:00
parent 8fb70ccccd
commit 217803ba8f
16 changed files with 409 additions and 2 deletions

View 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>&copy; Made with by Theis Gaedigk</Text>
</Box>
</Flex>
</Box>
);
};
export default Sidebar;