From 15707dcf36d6d3dad777b428a358199cf6ed23f4 Mon Sep 17 00:00:00 2001 From: bluesimp1102 Date: Mon, 8 Apr 2024 18:17:33 -0700 Subject: [PATCH] Added Bottom Navigation (#141) resolves #141 Added bottom navigation for the extension --- public/index.html | 2 +- src/App.tsx | 113 +++++++++++++++++++++++++-------------- src/styles/App.css | 20 +++++-- src/styles/SearchBar.css | 9 ++-- 4 files changed, 94 insertions(+), 50 deletions(-) diff --git a/public/index.html b/public/index.html index 2899d0d..78beb3f 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,7 @@ BroncoDirectMe - +
diff --git a/src/App.tsx b/src/App.tsx index 461db8a..e9663ad 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,22 +4,35 @@ import SearchBar from './components/SearchBar'; import { MsalProvider } from '@azure/msal-react'; // eslint-disable-next-line @typescript-eslint/no-unused-vars import { msalInstance, MicrosoftOAuth } from './components/MicrosoftOath'; -import { Box, IconButton } from '@mui/material'; +import { + Box, + IconButton, + BottomNavigation, + BottomNavigationAction, + Tooltip, +} from '@mui/material'; import SettingsIcon from '@mui/icons-material/Settings'; import BugReportIcon from '@mui/icons-material/BugReport'; -import { Panel } from './components/panel_component'; import DegreeProgressBar from './components/DegreeProgressBar'; import './styles/App.css'; import UpdateAlert from './components/UpdateAlert'; import TermsOfService from './components/TermsOfService'; +import CourseSearchBar from './components/CourseSearchBar'; +import HomeIcon from '@mui/icons-material/Home'; +import SearchIcon from '@mui/icons-material/Search'; /** * @returns Main app component */ export function App(): ReactElement { - const [isPanelOpen, setPanelState] = React.useState(false); - const togglePanel = (): void => setPanelState(!isPanelOpen); - const [isSettingsButtonOpen, setSettingsButtonState] = React.useState(true); + const [value, setValue] = React.useState('home'); + + const handleChange = ( + event: React.SyntheticEvent, + newValue: string + ): void => { + setValue(newValue); + }; const handleBugReportClick = (): void => { // Specify the URL you want to open in a new tab @@ -32,46 +45,64 @@ export function App(): ReactElement { return (
- {!isPanelOpen && ( -
- - -
- -

BroncoDirectMe Search

-
+
+ + +
+ +

BroncoDirectMe

+
+ - {isSettingsButtonOpen && ( - { - togglePanel(); - setSettingsButtonState(false); - }} - id="settingsButton" - > - - - )} -
- - - {/* */} - -
- )} - {/* Hides main app components when setting panel opens */} - { - togglePanel(); - setSettingsButtonState(true); - }} + +
+ + {value === 'home' && ( + <> + + + + )} + + {value === 'search' && ( + <> + + {/* Additional components for Search Courses tab */} + + )} + + {/* Settings components */} + {value === 'settings' && ( + <> + + + )} + {/* */} +
+ - - + } + /> + } + /> + } + /> +
); diff --git a/src/styles/App.css b/src/styles/App.css index 2380ad3..4e0f92b 100644 --- a/src/styles/App.css +++ b/src/styles/App.css @@ -1,13 +1,20 @@ .App { - min-height: 250px; + height: 400px; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.App section { + padding: 3vh 5vw; + overflow-y: auto; + flex-grow: 1; } #mainContent { display: flex; justify-content: space-between; align-items: center; - padding-left: 5vw; - padding-right: 5vw; } #mainButtons { @@ -25,6 +32,7 @@ #bugReportIcon { font-size: 2rem; padding: 2px; + color: #bf0a30; } #settingsButton { @@ -36,4 +44,10 @@ #settingsIcon { font-size: 2rem; padding: 2px; + color: #2b7dff; +} + +#bottomNavBar { + border-top: solid 1px #989898b0; + flex-shrink: 0; } diff --git a/src/styles/SearchBar.css b/src/styles/SearchBar.css index bd9e362..5141567 100644 --- a/src/styles/SearchBar.css +++ b/src/styles/SearchBar.css @@ -50,15 +50,14 @@ } .search-bar { - width: 85vw; - margin-bottom: 10%; - margin-left: 5vw; - box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); + width: 100%; + margin-bottom: 3vh; } .loading-container { display: flex; - justify-content: space-between; + justify-content: center; + align-items: center; margin-bottom: 20px; }