aboutsummaryrefslogtreecommitdiff
path: root/src/frontend/app/components/layout/Header.css
diff options
context:
space:
mode:
authorAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:04:55 +0100
committerAriel Costas Guerrero <ariel@costas.dev>2025-11-19 15:05:34 +0100
commitd51169f6411b68a226d76d2d39826904de484929 (patch)
tree4d8a403dfcc5b17671a92b8cc1e5d71d20ed9537 /src/frontend/app/components/layout/Header.css
parentd434204860fc0409ad6343e815d0057b97ce3573 (diff)
feat: Add About and Favourites pages, update routing and context management
- Added new routes for About and Favourites pages. - Implemented About page with version information and credits. - Created Favourites page with a placeholder message for empty favourites. - Refactored RegionConfig import paths for consistency. - Introduced PageTitleContext to manage page titles dynamically. - Updated various components to utilize the new context for setting page titles. - Enhanced AppShell layout with a responsive Drawer for navigation. - Added CSS styles for new components and pages. - Integrated commit hash display in the About page for version tracking.
Diffstat (limited to 'src/frontend/app/components/layout/Header.css')
-rw-r--r--src/frontend/app/components/layout/Header.css41
1 files changed, 41 insertions, 0 deletions
diff --git a/src/frontend/app/components/layout/Header.css b/src/frontend/app/components/layout/Header.css
new file mode 100644
index 0000000..c95226f
--- /dev/null
+++ b/src/frontend/app/components/layout/Header.css
@@ -0,0 +1,41 @@
+.app-header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.5rem 1rem;
+ background-color: var(--background-color);
+ border-bottom: 1px solid var(--border-color);
+ height: 60px;
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.app-header__left {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.app-header__menu-btn {
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: var(--text-color);
+ padding: 0.5rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 50%;
+ transition: background-color 0.2s;
+}
+
+.app-header__menu-btn:hover {
+ background-color: rgba(0, 0, 0, 0.05);
+}
+
+.app-header__title {
+ font-size: 1.25rem;
+ font-weight: 600;
+ margin: 0;
+ color: var(--text-color);
+}