chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

active buttons highlighted

Browse Source 
the current active button is now highlighting a bolder color.
This commit is contained in:
vkuchenik
2025-07-10 14:59:13 +00:00
committed by vkuchenik
parent 97f769d63e
commit 6bb10060e5
1 changed files with 34 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/sidebar.jsx
+34 -13
View File
@@ -10,7 +10,7 @@ export const PushPin = createIcon({
fill: "none", fill: "none",
path: ( path: (
<> <>
<path d="M6.21967 0.21967C6.36032 0.0790176 6.55109 0 6.75 0H17.25C17.6642 0 18 0.335786 18 0.75C18 1.76907 17.4871 2.51108 17.0303 2.96783C16.8422 3.15598 16.6554 3.30457 16.5 3.41487V10.0621C16.5369 10.0844 16.5757 10.1082 16.6162 10.1335C16.9211 10.3241 17.3307 10.6053 17.7439 10.9668C18.5387 11.6623 19.5 12.7902 19.5 14.25C19.5 14.6642 19.1642 15 18.75 15H12.75V21.75C12.75 22.1642 12.4142 24 12 24C11.5858 24 11.25 22.1642 11.25 21.75V15H5.25C4.83579 15 4.5 14.6642 4.5 14.25C4.5 12.7902 5.46131 11.6623 6.25612 10.9668C6.66928 10.6053 7.07891 10.3241 7.38375 10.1335C7.42429 10.1082 7.46311 10.0844 7.5 10.0621V3.41487C7.34463 3.30457 7.15782 3.15598 6.96967 2.96783C6.51292 2.51108 6 1.76907 6 0.75C6 0.551088 6.07902 0.360322 6.21967 0.21967ZM8.58919 2.33108L8.58592 2.32943L8.58919 2.33108ZM8.58592 2.32943L8.58919 2.33108C8.84107 2.45881 9 2.71734 9 3V10.5C9 10.7838 8.83978 11.0433 8.58608 11.1705L8.58325 11.1719L8.56493 11.1814C8.54758 11.1906 8.52023 11.2051 8.48433 11.225C8.41243 11.2648 8.3068 11.3255 8.17875 11.4055C7.92109 11.5666 7.58072 11.8009 7.24388 12.0957C6.7667 12.5132 6.36575 12.9903 6.15636 13.5H17.8436C17.6343 12.9903 17.2333 12.5132 16.7561 12.0957C16.4193 11.8009 16.0789 11.5666 15.8213 11.4055C15.6932 11.3255 15.5876 11.2648 15.5157 11.225C15.4798 11.2051 15.4524 11.1906 15.4351 11.1814L15.4168 11.1719L15.4146 11.1708C15.1607 11.0437 15 10.7839 15 10.5V3C15 2.71629 15.1601 2.45689 15.4136 2.32967C15.4185 2.32706 15.4285 2.32157 15.4423 2.31366C15.4701 2.29779 15.5139 2.27163 15.5683 2.23534C15.6785 2.16191 15.8251 2.05176 15.9697 1.90717C16.0901 1.78676 16.201 1.65123 16.29 1.5H7.71004C7.79899 1.65123 7.90992 1.78676 8.03033 1.90717C8.17492 2.05176 8.32152 2.16191 8.43165 2.23534C8.48608 2.27163 8.52987 2.29779 8.55765 2.31366C8.57149 2.32157 8.58103 2.32682 8.58592 2.32943Z" fill="#19332D"/> <path xmlns="http://www.w3.org/2000/svg" d="M6.21967 0.21967C6.36032 0.0790176 6.55109 0 6.75 0H17.25C17.6642 0 18 0.335786 18 0.75C18 1.76907 17.4871 2.51108 17.0303 2.96783C16.8422 3.15598 16.6554 3.30457 16.5 3.41487V10.0621C16.5369 10.0844 16.5757 10.1082 16.6162 10.1335C16.9211 10.3241 17.3307 10.6053 17.7439 10.9668C18.5387 11.6623 19.5 12.7902 19.5 14.25C19.5 14.6642 19.1642 15 18.75 15H12.75V21.75C12.75 22.1642 12.4142 24 12 24C11.5858 24 11.25 22.1642 11.25 21.75V15H5.25C4.83579 15 4.5 14.6642 4.5 14.25C4.5 12.7902 5.46131 11.6623 6.25612 10.9668C6.66928 10.6053 7.07891 10.3241 7.38375 10.1335C7.42429 10.1082 7.46311 10.0844 7.5 10.0621V3.41487C7.34463 3.30457 7.15782 3.15598 6.96967 2.96783C6.51292 2.51108 6 1.76907 6 0.75C6 0.551088 6.07902 0.360322 6.21967 0.21967Z" stroke="#19332D" stroke-width="1.5"/>
</> </>
), ),
}); });
@@ -58,6 +58,7 @@ export const Users = createIcon({
export default function Sidebar () { export default function Sidebar () {
const [isOpen, setIsOpen] = useState(true); const [isOpen, setIsOpen] = useState(true);
const [activeButton, setActiveButton] = useState("Dashboard")
return ( return (
<> <>
@@ -71,14 +72,24 @@ export default function Sidebar () {
justifyContent="start" justifyContent="start"
alignItems="start" alignItems="start"
gap={4} paddingTop={4} gap={4} paddingTop={4}
paddingLeft={8} paddingRight={8} paddingLeft={10} paddingRight={8}
> >
<CloseButton color="#19332D" bg= "#EDF1F1" size="sm" variant="subtle" left="-4" onClick={() => setIsOpen(!isOpen)}></CloseButton> <CloseButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" left="-6" onClick={() => setIsOpen(!isOpen)}></CloseButton>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><PushPin /> Dashboard</Button> <Button color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Globe fill="white" stroke="black" /> Global Map</Button> <PushPin fill="white" /> Dashboard
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><MapMarker fill="white" stroke="black"/> Regional Map</Button> </Button>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><FaVolcano /> Volcano</Button> <Button color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
<Button color="#19332D" _hover={{bg: "#EDF1F1"}} fontSize="xl" variant="ghost"><Users fill="white" stroke="black" /> Admin</Button> <Globe fill="white" stroke="black" /> Global Map
</Button>
<Button color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
<MapMarker fill="white" stroke="black"/> Regional Map
</Button>
<Button color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
<FaVolcano /> Volcano
</Button>
<Button color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} fontSize="xl" variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
<Users fill="white" stroke="black" /> Admin
</Button>
</Box> </Box>
)} )}
@@ -96,11 +107,21 @@ export default function Sidebar () {
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}> <IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} size="sm" variant="ghost" onClick={() => setIsOpen(!isOpen)}>
<RxHamburgerMenu /> <RxHamburgerMenu />
</IconButton> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><PushPin /> </IconButton> <IconButton color="#19332D" _hover={activeButton === "Dashboard" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Dashboard")} bg={activeButton === "Dashboard" ? "#A4B6B6" : "transparent"}>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Globe fill="white" stroke="black" /> </IconButton> <PushPin fill="white"/>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><MapMarker fill="white" stroke="black" /> </IconButton> </IconButton>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><FaVolcano /> </IconButton> <IconButton color="#19332D" _hover={activeButton === "Global" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Global")} bg={activeButton === "Global" ? "#A4B6B6" : "transparent"}>
<IconButton color="#19332D" _hover={{bg: "#EDF1F1"}} variant="ghost" ><Users fill="white" stroke="black" /> </IconButton> <Globe fill="white" stroke="black" />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Regional" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Regional")} bg={activeButton === "Regional" ? "#A4B6B6" : "transparent"}>
<MapMarker fill="white" stroke="black" />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Volcano" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Volcano")} bg={activeButton === "Volcano" ? "#A4B6B6" : "transparent"}>
<FaVolcano />
</IconButton>
<IconButton color="#19332D" _hover={activeButton === "Admin" ? {bg: "#A4B6B6"}:{bg:"#EDF1F1"}} variant="ghost" onClick={() => setActiveButton("Admin")} bg={activeButton === "Admin" ? "#A4B6B6" : "transparent"}>
<Users fill="white" stroke="black" />
</IconButton>
</Box> </Box>
)} )}
</> </>