Merge pull request #32 from ilyasbozdemir/case-project

app layer panel layotu updated
ilyasbozdemir · May 3, 2024 · e99b685 · e99b685
2 parents ac17ab5 + a885d73
commit e99b685
Show file tree

Hide file tree

Showing 14 changed files with 736 additions and 153 deletions.
diff --git a/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx b/LibraryTrackingApp/src/frontend/components/ThemeSwitcher.jsx
@@ -42,12 +42,11 @@ function ThemeSwitcher() {
     <>
       <IconButton
         id={"theme-switcher"}
-        aria-label="Color Switcher"  
-         variant={"ghost"}
+        aria-label="Color Switcher"
+        variant={"ghost"}
         onClick={handleToggleColorMode}
         icon={<Icon as={icon === darkIcon ? BsMoon : BsSun} fontSize="lg" />}
         p={3}
-
       />
     </>
   );

diff --git a/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx b/LibraryTrackingApp/src/frontend/constants/appSidebarItems.jsx
@@ -1,9 +1,4 @@
-import {
-  FiHome,
-  FiSettings,
-  FiLogOut,
-  FiBook,
-} from "react-icons/fi";
+import { FiHome, FiSettings, FiLogOut, FiBook } from "react-icons/fi";
 import {
   BsArrowLeftRight,
   BsBook,
@@ -265,42 +260,3 @@ export const sidebarItems = [
     target: "_self",
   },
 ];
-
-export const items = [
-  {
-    title: "Kütüphane",
-    description: "Kütüphane bilgilerini düzenleyin, yeni kütüphaneler ekleyin.",
-    link: "/app/library",
-  },
-  {
-    title: "Üyeler",
-    description: "Üyeleri yönetin, yeni üyeler ekleyin.",
-    link: "/app/member",
-  },
-  {
-    title: "Kitaplar",
-    description: "Kitapları düzenleyin, yeni kitaplar ekleyin.",
-    link: "/app/book",
-  },
-  {
-    title: "Personel",
-    description: "Personel bilgilerini yönetin, yeni personel ekleyin.",
-    link: "/app/staff",
-  },
-  {
-    title: "Ödünç Verme",
-    description: "Kitap ödünç verme işlemlerini yönetin.",
-    link: "/app/borrow",
-  },
-  {
-    title: "Kitap Türleri",
-    description: "Kitap türlerini düzenleyin, yeni türler ekleyin.",
-    link: "/app/genre",
-  },
-  {
-    title: "Kitap Etiketleri",
-    description:
-      "Arama terimlerini yönetin, popüler arama terimlerini görüntüleyin ve düzenleyin.",
-    link: "/app/book-tag",
-  },
-];
diff --git a/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Admin/components/Navbar/index.jsx
@@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
-      boxShadow="sm"
-      border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
-      bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
-      justifyContent={"space-between"}
-      p={2}
+    boxShadow="sm"
+    border="0 solid #e5e7eb"
+    bg={useColorModeValue("gray.100", "gray.700")}
+    justifyContent={"space-between"}
+    p={2}
+    zIndex={15}
+    width={isOpen ? "calc(100% - 275px)" : "100%"}
+    transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+     transition="0.3s ease-in"
     >
       <HStack spacing={3}>
         <Icon

diff --git a/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx b/LibraryTrackingApp/src/frontend/layouts/Admin/layout.jsx
@@ -31,7 +31,6 @@ function Layout({ children }) {
           ml={isSidebarOpen ? "300px" : "0px"}
           mt={isSidebarOpen ? "20" : "20"}
           transition="margin-left 0.5s ease-in-out"
-          p={6}
         >
           {children}
         </Box>

diff --git a/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx b/LibraryTrackingApp/src/frontend/layouts/Anon/components/HeroSection.jsx
@@ -76,7 +76,7 @@ const HeroSection = () => {
                     maxH="52px"
                     w="max-content"
                     color="white"
-                    bgGradient="linear(to-br, #228be6, #15aabf)"
+                    bgGradient="linear(to-br, teal.500, teal.300)"
                     rounded="md"
                   >
                     {feature.icon}
@@ -108,9 +108,9 @@ const HeroSection = () => {
                 <chakra.button
                   h={12}
                   px={6}
-                  bgGradient="linear(to-br, #228be6, #15aabf)"
+                  bgGradient="linear(to-br, teal.500, teal.300)"
                   color="white"
-                  _hover={{ bgGradient: "linear(to-br, #228be6, #228be6)" }}
+                  _hover={{ bgGradient: "linear(to-br, teal.500, teal.400)" }}
                   variant="solid"
                   size="lg"
                   rounded="md"

diff --git a/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx b/LibraryTrackingApp/src/frontend/layouts/Anon/components/Navbar.jsx
@@ -57,13 +57,23 @@ export default function Navbar() {
           <ThemeSwitcher />
 
           <Link href="/register" passHref target="_blank">
-            <Button colorScheme="white" variant="outline">
+            <Button colorScheme="white" variant="outline"
+             px={6}
+
+            >
               Kayıt Ol
             </Button>
           </Link>
 
           <Link href="/login" passHref target="_blank">
-            <Button colorScheme="teal">Giriş Yap</Button>
+            <Button
+              bgGradient="linear(to-br, teal.500, teal.300)"
+              color="white"
+              _hover={{ bgGradient: "linear(to-br, teal.500, teal.400)" }}
+              px={6}
+            >
+              Giriş Yap
+            </Button>
           </Link>
         </Flex>
 

diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Navbar/index.jsx
@@ -20,6 +20,7 @@ import LanguageSwitcher from "../../../../components/LanguageSwitcher";
 
 import { FiMinimize, FiMaximize } from "react-icons/fi";
 import { HiMenuAlt2 } from "react-icons/hi";
+import { CloseIcon } from "@chakra-ui/icons";
 
 const Navbar = ({ isOpen, onMenuToggle }) => {
   const [isMaximized, setIsMaximized] = useState(false);
@@ -54,30 +55,40 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
       boxShadow="sm"
       border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
       bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
       justifyContent={"space-between"}
       p={2}
+      zIndex={15}
+      width={isOpen ? "calc(100% - 275px)" : "100%"}
+      transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+      transition="0.3s ease-in"
+
     >
       <HStack spacing={3}>
-        <Icon
-          cursor={"pointer"}
-          as={HiMenuAlt2}
-          boxSize={18}
-          onClick={onMenuToggle}
-        />
+        {isOpen ? (
+          <CloseIcon
+            boxSize={4}
+            cursor={"pointer"}
+            onClick={onMenuToggle}
+            _hover={{ color: "red" }}
+          />
+        ) : (
+          <Icon
+            cursor={"pointer"}
+            as={HiMenuAlt2}
+            boxSize={18}
+            onClick={onMenuToggle}
+          />
+        )}
       </HStack>
-
-      <NavItem
-        isMaximized={isMaximized}
-        handleMaximizeToggle={handleMaximizeToggle}
-      />
+      <Box >
+        <NavItem
+          isMaximized={isMaximized}
+          handleMaximizeToggle={handleMaximizeToggle}
+        />
+      </Box>
     </Flex>
   );
 };

diff --git a/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/App/components/Sidebar/index.jsx
@@ -17,7 +17,7 @@ import { useRouter } from "next/router";
 import { sidebarItems } from "@/constants/appSidebarItems";
 import { useState } from "react";
 
-function Sidebar({ isOpen, toggleSidebar }) {
+function Sidebar({ isOpen }) {
   const router = useRouter();
 
   return (
@@ -33,21 +33,12 @@ function Sidebar({ isOpen, toggleSidebar }) {
       transition="0.3s ease-in-out"
       transform={isOpen ? "translateX(0)" : "translateX(-275px)"}
       boxShadow="md"
-      zIndex="2"
     >
       <Flex alignItems="center" mb="8">
         <Avatar size="sm" name="Admin" />
         <Text ml="3" fontSize="lg" fontWeight="bold" color="white">
           Application Panel
         </Text>
-        <Box ml="auto" onClick={toggleSidebar}>
-          <CloseIcon
-            boxSize={4}
-            color="white"
-            cursor={"pointer"}
-            _hover={{ color: "red" }}
-          />
-        </Box>
       </Flex>
       <VStack spacing="4" align="stretch">
         {sidebarItems.map((item, index) => (

diff --git a/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx b/LibraryTrackingApp/src/frontend/layouts/Me/components/Navbar/index.jsx
@@ -54,16 +54,15 @@ const Navbar = ({ isOpen, onMenuToggle }) => {
 
   return (
     <Flex
-      py="2"
-      boxShadow="sm"
-      border="0 solid #e5e7eb"
-      position="fixed"
-      top="0"
-      bg={useColorModeValue("gray.100", "gray.700")}
-      width="100%"
-      transition="0.3s ease-in-out"
-      justifyContent={"space-between"}
-      p={2}
+    boxShadow="sm"
+    border="0 solid #e5e7eb"
+    bg={useColorModeValue("gray.100", "gray.700")}
+    justifyContent={"space-between"}
+    p={2}
+    zIndex={15}
+    width={isOpen ? "calc(100% - 275px)" : "100%"}
+    transform={isOpen ? "translateX(275px)" : "translateX(0)"}
+     transition="0.3s ease-in"
     >
       <HStack spacing={3}>
         <Icon