Merge pull request 'Added optionbar for mobile' (#2) from Fran314/orario:mobile-header into dev

Reviewed-on: phc/orario#2

src/components/HamburgerMenu.jsx

@@ -22,7 +22,7 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
 					<img src="logo-circuit-board.svg" alt="logo" /> / <span>Orario</span>
 				</div>
 			</div>
-            <div class="options">
+			{/* <div class="options">
 				<div class="label">Gruppo Corsi</div>
 				<ComboBox
 					value={source}
@@ -47,7 +47,7 @@ export const HamburgerMenu = ({ onClose, mode, setMode, source, setSource, theme
 					]}
 				/>
 			</div>
-            <hr />
+			<hr /> */}
 			<div class="help">
 				<h2>
 					<Icon name="info" />

src/components/Optionbar.jsx

@@ -0,0 +1,41 @@
+import { CompoundButton } from './CompoundButton.jsx'
+import { MODE_COURSE, MODE_SCHEDULE, MODE_WORKWEEK, MODE_WORKWEEK_GRID } from './EventsView.jsx'
+import { Icon } from './Icon.jsx'
+
+export const Optionbar = ({ mode, setMode, source, setSource, onHelp }) => {
+	return (
+		<div class="optionbar">
+			<div class="option-group">
+				<div class="item option">
+					<CompoundButton
+						options={[
+							{ value: 'anno-1', label: 'I' },
+							{ value: 'anno-2', label: 'II' },
+							{ value: 'anno-3', label: 'III' },
+							{ value: 'magistrale', label: 'M' },
+							{ value: 'tutti', label: <Icon name="apps" /> },
+						]}
+						value={source}
+						setValue={setSource}
+					/>
+				</div>
+			</div>
+			<div class="option-group">
+				<div class="item option">
+					<CompoundButton
+						options={[
+							{ value: MODE_COURSE, label: <Icon name="list" /> },
+							{
+								value: MODE_WORKWEEK_GRID,
+								label: <Icon name="calendar_view_month" />,
+							},
+							{ value: MODE_SCHEDULE, label: <Icon name="calendar_view_day" /> },
+						]}
+						value={mode}
+						setValue={setMode}
+					/>
+				</div>
+			</div>
+		</div>
+	)
+}

src/main.jsx

@@ -9,6 +9,7 @@ import { Help } from './components/Help.jsx'
 import { Icon } from './components/Icon.jsx'
 import { Popup } from './components/Popup.jsx'
 import { Toolbar } from './components/Toolbar.jsx'
+import { Optionbar } from './components/Optionbar.jsx'
 
 window._ = _
 window.dataBuffer = {}
@@ -130,6 +131,15 @@ const App = ({}) => {
 					setTheme,
 				}}
 			/>
+			<Optionbar
+				{...{
+					mode,
+					setMode,
+					source,
+					setSource,
+					onHelp: () => setHelpVisible(true),
+				}}
+			/>
 			<EventsView
 				mode={mode}
 				selection={selectedCourses}

src/styles/main.scss

@@ -28,7 +28,6 @@ html {
     --accent-500: #6cc16c;
     --accent-900: #244624;
 
-
     --bubble-red: hsl(359, 100%, 92%);
     --bubble-purple: hsl(274, 100%, 92%);
     --bubble-blue: hsl(241, 100%, 92%);
@@ -74,7 +73,6 @@ body.dark-mode {
     --accent-500: hsl(269, 40%, 70%);
     --accent-900: hsl(269, 30%, 90%);
 
-
     --bubble-red: hsl(359, 40%, 25%);
     --bubble-purple: hsl(274, 40%, 25%);
     --bubble-blue: hsl(241, 40%, 25%);
@@ -450,9 +448,38 @@ body {
         }
     }
 }
+.optionbar {
+    @extend .panel;
+
+    padding: 1rem 0.75rem 1rem 1rem;
+
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid var(--border-500);
+
+    height: 4rem;
+
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        display: flex;
+    }
+
+    .option-group {
+        display: flex;
+        align-items: center;
+
+        gap: 0.75rem;
+    }
+}
 
 .events-view {
     height: calc(100vh - 4rem);
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        height: calc(100vh - 8rem);
+    }
 
     .course-view {
         padding: 1rem;
@@ -889,7 +916,6 @@ body {
             border: 2px solid var(--border-500);
             border-radius: 10px 10px 0 0;
 
-
             @media screen and (max-width: $device-s-width), (pointer: coarse) {
                 font-size: 12px;
             }