diff --git a/cubeseed_login/src/assets/icons/TransparentCubeseed.png b/cubeseed_login/src/assets/icons/TransparentCubeseed.png new file mode 100644 index 0000000..8b09f99 Binary files /dev/null and b/cubeseed_login/src/assets/icons/TransparentCubeseed.png differ diff --git a/cubeseed_login/src/assets/icons/TransparentSmallCubeseed.png b/cubeseed_login/src/assets/icons/TransparentSmallCubeseed.png new file mode 100644 index 0000000..16d38ee Binary files /dev/null and b/cubeseed_login/src/assets/icons/TransparentSmallCubeseed.png differ diff --git a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx index 44a9937..2419a2e 100644 --- a/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx +++ b/cubeseed_login/src/pages/dashboard/marketplace_dashboard/marketplace_sidebar.tsx @@ -1,11 +1,230 @@ -const MarketplaceSidebar = () => { - return ( - <> -
- asd -
- - ) +import { useState } from "react" +import MarketPlaceSideBarStyle from "@/styles/MarketPlaceSideBar.module.css" +import logo from "../../../assets/icons/TransparentCubeseed.png" +import smallLogo from "../../../assets/icons/TransparentSmallCubeseed.png" + +const MarketPlaceSideBar = () => { + const [selected, setSelected] = useState(false); + const [id, setId] = useState("Home"); + + const toggleSideBar = () => { + setSelected((prev) => !prev); + } + + const customSelect = (selectedName: string) => { + if (selectedName == "Home") { + setId("Home") + } else if (selectedName === "Purchase") { + setId("Purchase") + } else if (selectedName === "Quotes") { + setId("Quotes") + } else if (selectedName === "Favorite") { + setId("Favorite") + } else if (selectedName === "Profile") { + setId("Profile") + } + } + + return ( +
+
+ + + + +
+
+
+
customSelect("Home")} + > + + + + + + + + +

Home

+
+
customSelect("Purchase")} + > + + + + + + + + +

Purchase Orders

+
+
customSelect("Quotes")} + > + + + + + + + + +

Quotations

+
+
customSelect("Favorite")} + > + + + +

Favorites

+
+
customSelect("Profile")} + > + + + +

Profiles

+
+
+ +
+
+ + + +

Settings

+
+
+ + + +

Support

+
+
+

Sign Out

+
+
+
+ ) } -export default MarketplaceSidebar +export default MarketPlaceSideBar diff --git a/cubeseed_login/src/styles/MarketPlaceSideBar.module.css b/cubeseed_login/src/styles/MarketPlaceSideBar.module.css new file mode 100644 index 0000000..51c8294 --- /dev/null +++ b/cubeseed_login/src/styles/MarketPlaceSideBar.module.css @@ -0,0 +1,131 @@ +/*************************** CONTAINER *******************************/ + +.sideBarOpenContainer { + display: flex; + width: 360px; + height: 100vh; + padding: 20px 12px 12px 12px; + flex-direction: column; + align-items: center; + gap: var(--dimentions-d-2, 15px); + background-color: #F0F6F6; + transition: .3s; +} + +.mainOptionsContainer { + display: flex; + flex-direction: column; + gap: 12px; +} + +.userSettingContainer { + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + display: flex; + flex-direction: column; + bottom: 0; + position: absolute; + padding-bottom: 2rem; +} + +/*************************** OPEN SIDEBAR *******************************/ + +.logoOpen { + display: flex; + padding: var(--dimentions-d-0, 0px) 40px var(--dimentions-d-0, 0px) var(--dimentions-d-4, 16px); + align-items: center; + gap: 20px; +} + +.logoOpen > * { + cursor: pointer; +} + +.dividerOpen { + width: 304px; + height: var(--dimentions-d-0, 1px); + border-radius: var(--dimentions-d-0, 0px); + background: #D0DAD7; +} + +.mainOptionsOpen { + display: flex; + align-items: center; + justify-content: flex-start; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 14px; + height: 56px; + padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) var(--dimentions-d-4, 16px); + width: 336px; + gap: 12px; + font-weight: 500; +} + +.mainOptionsOpen:hover { + cursor: pointer; + border-radius: 3rem; +} + +.selectedOpen { + display: flex; + padding: var(--dimentions-d-4, 16px) 24px var(--dimentions-d-4, 16px) var(--dimentions-d-4, 16px); + align-items: center; + gap: 12px; + flex: 1 0 0; + align-self: stretch; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 14px; + color: white; + font-weight: 500; + background: #03656B; + border-radius: 3rem; +} + +/***************************** CLOSED SIDEBAR **********************************/ + +.dividerClosed { + width: 24px; + height: var(--dimentions-d-0, 1px); + border-radius: var(--dimentions-d-0, 0px); + background: #D0DAD7; +} + +.selectedClosed { + background: #03656B; + border-radius: 3rem; +} + +.sideBarClosedContainer { + transition: .4s; + display: flex; + flex-direction: column; + align-items: center; + height: 100vh; + width: 80px; + padding: 20px 12px 12px 12px; + gap: var(--dimentions-d-2, 15px); + background-color: #F0F6F6; +} + +.logoClosed { + padding: 0; +} + +.logoClosed > * { + cursor: pointer; +} + +.mainOptionsClosedContainer { + display: flex; + align-items: center; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 14px; + height: 56px; + width: 56px; + font-weight: 500; + justify-content: center; + cursor: pointer; +} + +.hidden { + display: none; +}