ok

src/components/Header.js

@@ -4,18 +4,32 @@ import { useLocation } from "react-router-dom";
 import { useNavigationHelpers } from "../helpers/navigationHelpers";
 import Switch from "react-switch";
 
+const HeaderBarbackground = styled.div`
+  ${({ shopName }) =>
+    shopName &&
+    `
+      background: linear-gradient(360deg, rgb(255 255 255) 0%, rgb(95 121 89) 100%);
+    `}
+`;
+
 const HeaderBar = styled.div`
   pointer-events: auto;
-  margin-top:${(props) => (props.HeaderMargin)};
+  margin-top: ${(props) => props.HeaderMargin};
+  box-shadow: ${(props) => (props.shopName ? '2px 2px #c1c1c1' : 'none')};
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px 15px;
   color: black;
-  background-color: white;
+  background-color: #ffffff;
   z-index: 200;
+  border: 1px solid #00000000;
+  margin: 20px 12px;
+  border-radius: 13px;
 `;
 
+
+
 const Title = styled.h2`
   margin: 0;
   font-family: "Plus Jakarta Sans", sans-serif;
@@ -23,6 +37,7 @@ const Title = styled.h2`
   font-style: normal;
   font-size:${(props) => (props.HeaderSize)};
   color: rgba(88, 55, 50, 1);
+  text-transform: uppercase;
 `;
 
 const ProfileName = styled.h2`
@@ -113,7 +128,7 @@ const g = keyframes`
   }
   100% {
     top: 28px;
-    right: 247px;
+    right: 242px;
     width: 40px;
     height: 40px;
   }
@@ -122,7 +137,7 @@ const g = keyframes`
 const s = keyframes`
   0% {
     top: 28px;
-    right: 247px;
+    right: 242px;
     width: 40px;
     height: 40px;
   }
@@ -136,12 +151,14 @@ const s = keyframes`
 
 const grow = keyframes`
   0% {
+    right: 12px;
     width: 60px;
     height: 60px;
     border-top-left-radius: 50%;
     border-bottom-left-radius: 50%;
   }
   100% {
+    right: 28px;
     width: 300px;
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
@@ -150,20 +167,23 @@ const grow = keyframes`
 
 const shrink = keyframes`
   0% {
+    right: 12px;
     width: 300px;
     height: auto;
     border-radius: 20px;
   }
   100% {
+    right: 28px;
     width: 60px;
     height: 60px;
     border-radius: 50%;
   }
 `;
 const Rectangle = styled.div`
+  overflow-y: hidden;
   position: absolute;
-  top: 45px;
-  right: 15px;
+  top: 39px;
+  right: 12px;
   width: 200px;
   max-height: 87vh; /* or another appropriate value */
   background-color: white;
@@ -171,7 +191,6 @@ const Rectangle = styled.div`
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   animation: ${(props) => (props.animate === "grow" ? grow : shrink)} 0.5s
     forwards;
-  overflow-y: auto; /* Enable vertical scrolling */
   padding: 10px;
   box-sizing: border-box;
   overflow-x: hidden;
@@ -302,14 +321,15 @@ const Header = ({
     // Otherwise, use the possessive function
     return `${cafeName}'s menu`;
   };
-  return (
-    <HeaderBar HeaderMargin={HeaderMargin} >
+  return ( 
+    <HeaderBarbackground shopName={shopName}>
+    <HeaderBar HeaderMargin={HeaderMargin} shopName={shopName}>
       <Title HeaderSize={HeaderSize}>
         {shopName == null
           ? HeaderText == null
             ? "kedaimaster"
             : HeaderText
-          : generateMenuHeader(shopName)}
+          : shopName}
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
@@ -403,7 +423,7 @@ const Header = ({
                     <Child>{shopName}</Child>
 
                     <Child>
-                      Mode edit&nbsp;
+                      Mode pengembangan&nbsp;
                       <Switch
                         borderRadius={0}
                         checked={isEditMode}
@@ -411,8 +431,21 @@ const Header = ({
                       />
                     </Child>
                     <Child onClick={() => setModal("add_material")}>
-                      stok
+                      Kelola bahan baku
                     </Child>
+
+                    <Child hasChildren>
+                        <Child>Konfigurasi</Child>
+                        <Child onClick={() => setModal("welcome_config")}>
+                          Desain kafe
+                        </Child>
+                        <Child onClick={() => setModal("edit_tables")}>
+                          Identifikasi kedai
+                        </Child>
+                        <Child onClick={() => setModal("payment_option")}>
+                          Metode pembayaran
+                        </Child>
+                      </Child>
                     {user.username !== undefined &&
                       user.roleId == 2 &&
                       user.cafeId == shopId && (
@@ -449,7 +482,7 @@ const Header = ({
           </Rectangle>
         )}
       </div>
-    </HeaderBar>
+    </HeaderBar></HeaderBarbackground>
   );
 };
 

src/components/Item.module.css

@@ -53,6 +53,7 @@
   width: 26vw;
   height: 26vw;
   border-radius: 12px;
+  object-fit: cover;
 }
 
 .overlay {