Brijesh619 commented on code in PR #688:
URL: https://github.com/apache/atlas/pull/688#discussion_r3586809087
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -246,38 +386,87 @@ const SideBarBody = (props: {
backgroundColor: "#034858",
}}
>
- {/* Collapsed sidebar logo */}
+ {/* Collapsed sidebar logo and module icons */}
{!open && (
- <div
- style={{
- width: "100%",
- textAlign: "center",
- paddingLeft: "12px",
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- minHeight: "64px",
- cursor: "pointer",
- boxSizing: "border-box",
- }}
- role="button"
- tabIndex={0}
- aria-label="Atlas home — refresh dashboard"
- onClick={handleAtlasLogoClick}
- onKeyDown={handleAtlasLogoKeyDown}
- data-cy="apache-atlas-logo-collapsed"
+ <Stack
+ alignItems="center"
+ sx={{ width: "100%", flex: 1, minHeight: 0, overflowY: "auto",
overflowX: "hidden", boxSizing: "border-box", pb: "60px" }}
>
- <img
- src={apacheAtlasLogo}
- alt="Apache Atlas logo"
+ <div
style={{
- width: "29px",
- height: "auto",
- maxWidth: "100%",
- display: "block",
+ width: "100%",
+ textAlign: "center",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ minHeight: "64px",
+ cursor: "pointer",
+ boxSizing: "border-box",
+ marginBottom: "1rem",
}}
- />
- </div>
+ role="button"
+ tabIndex={0}
+ aria-label="Atlas home — refresh dashboard"
+ onClick={handleAtlasLogoClick}
+ onKeyDown={handleAtlasLogoKeyDown}
+ data-cy="apache-atlas-logo-collapsed"
+ >
+ <img
+ src={apacheAtlasLogo}
+ alt="Apache Atlas logo"
+ style={{
+ width: "29px",
+ height: "auto",
+ maxWidth: "100%",
+ display: "block",
+ }}
+ />
+ </div>
+
+ {/* Module Icons for Mini Drawer */}
+ <Stack alignItems="stretch" gap="1rem" sx={{ width: "100%" }}>
+ {/* Search */}
+ <Box sx={{ display: "flex", justifyContent: "center",
borderLeft: "4px solid transparent", borderRight: "4px solid transparent",
background: "transparent" }}>
+ <Tooltip title="Search" placement="right">
+ <IconButton onClick={() => setOpen(true)} sx={{ '&:hover':
{ background: 'rgba(255, 255, 255, 0.1)' } }}>
+ <img src="/img/sidebar-icons/icon-search.svg" style={{
width: "20px", height: "20px", opacity: 1 }} alt="search" />
+ </IconButton>
Review Comment:
Resolved the style duplication by externalizing the search field into a new
shared SidebarSearchInput component and moving inline styles to SCSS.
##########
dashboard/src/views/SideBar/SideBarBody.tsx:
##########
@@ -39,25 +41,25 @@ import {
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import { IconButton } from "@components/muiComponents";
-import { useSelector } from "react-redux";
-import SearchIcon from "@mui/icons-material/Search";
-import { InputBase, Paper, Stack } from "@mui/material";
-import { TypeHeaderState } from "@models/treeStructureType.js";
+
+import ClearIcon from "@mui/icons-material/Clear";
+import { getVersion } from "@api/apiMethods/headerApiMethods";
Review Comment:
Fixed the TypeScript build failure by removing the unused getVersion import,
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
