diff --git a/app/client/src/icons/FormIcons.tsx b/app/client/src/icons/FormIcons.tsx index 773d22267d..65b0d80d04 100644 --- a/app/client/src/icons/FormIcons.tsx +++ b/app/client/src/icons/FormIcons.tsx @@ -16,6 +16,11 @@ export const FormIcons: { ), + HOME_ICON: (props: IconProps) => ( + + + + ), DELETE_ICON: (props: IconProps) => ( diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index f1c7448497..b69648ea35 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -77,6 +77,7 @@ class AppViewer extends Component< > { public state = { registered: false, + isSideNavOpen: true, }; componentDidMount() { editorInitializer().then(() => { @@ -88,6 +89,10 @@ class AppViewer extends Component< } } + toggleCollapse = (open: boolean) => { + this.setState({ isSideNavOpen: open }); + }; + public render() { const { isInitialized, currentApplication } = this.props; const userPermissions = currentApplication?.userPermissions ?? []; @@ -118,12 +123,19 @@ class AppViewer extends Component< - + ` + && a { + :hover { + text-decoration: none; + } + color: ${props => props.theme.colors.textDefault}; + } display: flex; - justify-content: flex-end; + justify-content: flex-start; + padding-left: ${props => + props.open ? props.theme.sideNav.maxWidth : props.theme.sideNav.minWidth}px; `; const StyledButton = styled(Button)` max-width: 200px; + display: flex; + justify-content: flex-end; +`; + +const StyledApplicationName = styled.span` + font-size: 15px; + padding-left: 8px; `; type AppViewerHeaderProps = { url?: string; + open: boolean; permissionRequired: string; permissions: string[]; + currentApplicationDetails?: ApplicationPayload; }; export const AppViewerHeader = (props: AppViewerHeaderProps) => { @@ -28,8 +57,27 @@ export const AppViewerHeader = (props: AppViewerHeaderProps) => { props.permissionRequired, ); + const { currentApplicationDetails, open } = props; + return ( + {currentApplicationDetails && ( + + + + + {currentApplicationDetails.name} + + + + )} {props.url && hasPermission && ( void; }; /* eslint-disable no-unexpected-multiline */ @@ -66,7 +68,7 @@ const ToggleButton = styled(Button)<{ `; export const SideNav = (props: SideNavProps) => { - const [open, setopen] = useState(true); + const { open, toggleCollapse } = props; const renderItems = (sideNavItems?: SideNavItemProps[]) => { let items = sideNavItems; if (!items) { @@ -88,15 +90,14 @@ export const SideNav = (props: SideNavProps) => { ); }); }; - const toggleCollapse = () => { - setopen(!open); - }; return ( { + toggleCollapse(!open); + }} icon={open ? "double-chevron-left" : "menu"} minimal open={open}