Skip to content

Commit

Permalink
Added Bottom Navigation (#141)
Browse files Browse the repository at this point in the history
resolves #141

Added bottom navigation for the extension
  • Loading branch information
blu3eee committed Apr 9, 2024
1 parent 8416199 commit 15707dc
Show file tree
Hide file tree
Showing 4 changed files with 94 additions and 50 deletions.
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BroncoDirectMe</title>
</head>
<body style="width: 400px">
<body style="width: 400px; margin: 0">
<div id="app"></div>
<script src="./script.js"></script>
</body>
Expand Down
113 changes: 72 additions & 41 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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<Element, Event>,
newValue: string
): void => {
setValue(newValue);
};

const handleBugReportClick = (): void => {
// Specify the URL you want to open in a new tab
Expand All @@ -32,46 +45,64 @@ export function App(): ReactElement {
return (
<MsalProvider instance={msalInstance}>
<div className="App">
{!isPanelOpen && (
<section>
<UpdateAlert />
<TermsOfService />
<div id="errorElm"></div>
<Box id="mainContent">
<h1>BroncoDirectMe Search</h1>
<div id="mainButtons">
<section>
<UpdateAlert />
<TermsOfService />
<div id="errorElm"></div>
<Box id="mainContent">
<h1>BroncoDirectMe</h1>
<div id="mainButtons">
<Tooltip title={'Report bugs'}>
<IconButton id="bugReportButton" onClick={handleBugReportClick}>
<BugReportIcon id="bugReportIcon" />
</IconButton>
{isSettingsButtonOpen && (
<IconButton
onClick={() => {
togglePanel();
setSettingsButtonState(false);
}}
id="settingsButton"
>
<SettingsIcon id="settingsIcon" />
</IconButton>
)}
</div>
</Box>
<SearchBar settingBarState={isSettingsButtonOpen} />
{/* <MicrosoftOAuth /> */}
<DegreeProgressBar />
</section>
)}
{/* Hides main app components when setting panel opens */}
<Panel
title={'Settings'}
isOpen={isPanelOpen}
onClose={() => {
togglePanel();
setSettingsButtonState(true);
}}
</Tooltip>
</div>
</Box>
{value === 'home' && (
<>
<SearchBar settingBarState={true} />
<DegreeProgressBar />
</>
)}

{value === 'search' && (
<>
<CourseSearchBar />
{/* Additional components for Search Courses tab */}
</>
)}

{/* Settings components */}
{value === 'settings' && (
<>
<ToggleButton />
</>
)}
{/* <MicrosoftOAuth /> */}
</section>
<BottomNavigation
value={value}
onChange={handleChange}
showLabels
id="bottomNavBar"
>
<ToggleButton />
</Panel>
<BottomNavigationAction
label="Home"
value="home"
icon={<HomeIcon />}
/>
<BottomNavigationAction
label="Search Courses"
value="search"
icon={<SearchIcon />}
/>
<BottomNavigationAction
label="Settings"
value="settings"
icon={<SettingsIcon />}
/>
</BottomNavigation>
</div>
</MsalProvider>
);
Expand Down
20 changes: 17 additions & 3 deletions src/styles/App.css
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -25,6 +32,7 @@
#bugReportIcon {
font-size: 2rem;
padding: 2px;
color: #bf0a30;
}

#settingsButton {
Expand All @@ -36,4 +44,10 @@
#settingsIcon {
font-size: 2rem;
padding: 2px;
color: #2b7dff;
}

#bottomNavBar {
border-top: solid 1px #989898b0;
flex-shrink: 0;
}
9 changes: 4 additions & 5 deletions src/styles/SearchBar.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down

0 comments on commit 15707dc

Please sign in to comment.