diff options
| -rw-r--r-- | FrontEnd/src/app/App.tsx | 1 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/common/AppBar.tsx | 2 | ||||
| -rw-r--r-- | FrontEnd/src/app/views/common/ToggleIconButton.tsx | 30 |
3 files changed, 32 insertions, 1 deletions
diff --git a/FrontEnd/src/app/App.tsx b/FrontEnd/src/app/App.tsx index 6cdf2434..7bd92bf7 100644 --- a/FrontEnd/src/app/App.tsx +++ b/FrontEnd/src/app/App.tsx @@ -39,6 +39,7 @@ const App: React.FC = () => { <React.Suspense fallback={<LoadingPage />}> <Router> <AppBar /> + <div style={{ height: 56 }} /> <Switch> <Route exact path="/"> <Home /> diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx index 319bca74..d0e39f98 100644 --- a/FrontEnd/src/app/views/common/AppBar.tsx +++ b/FrontEnd/src/app/views/common/AppBar.tsx @@ -26,7 +26,7 @@ const AppBar: React.FC = (_) => { bg="primary" variant="dark" expand="md" - sticky="top" + fixed="top" expanded={expand} > <LinkContainer to="/" onClick={collapse}> diff --git a/FrontEnd/src/app/views/common/ToggleIconButton.tsx b/FrontEnd/src/app/views/common/ToggleIconButton.tsx new file mode 100644 index 00000000..76c48960 --- /dev/null +++ b/FrontEnd/src/app/views/common/ToggleIconButton.tsx @@ -0,0 +1,30 @@ +import React from "react"; +import clsx from "clsx"; + +export interface ToggleIconButtonProps + extends React.HTMLAttributes<HTMLElement> { + state: boolean; + trueIconClassName: string; + falseIconClassName: string; +} + +const ToggleIconButton: React.FC<ToggleIconButtonProps> = ({ + state, + className, + trueIconClassName, + falseIconClassName, + ...otherProps +}) => { + return ( + <i + className={clsx( + state ? trueIconClassName : falseIconClassName, + "icon-button", + className + )} + {...otherProps} + /> + ); +}; + +export default ToggleIconButton; |