feat: Add responsive navigation and theme selection

- Implemented adaptive navigation (Sidebar for wide screens, Bottom Nav for narrow screens) - Added manual theme selection (Light/Dark/System) - Added accent color selection - Created ThemeProvider for dynamic styling - Added Settings page - Refactored Profile page with Quick Access links Fixes #2 Co-Authored-By: Claude <noreply@anthropic.com>
2026-04-11 00:58:27 +03:00
parent 7cbe5ab6e2
commit 67563664ce
8 changed files with 393 additions and 63 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,7 +2,10 @@ import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { Login } from './pages/Login';
 import { Profile } from './pages/Profile';
+import { Settings } from './pages/Settings';
 import { useStore } from './store/useStore';
+import { ThemeProvider } from './components/ThemeProvider';
+import { Layout } from './components/Layout';
 import './styles/globals.css';

 const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -10,25 +13,66 @@ const ProtectedRoute: React.FC<{ children: React.ReactNode }> = ({ children }) =
  if (!apiKey) {
    return <Navigate to="/login" replace />;
  }
-  return <>{children}</>;
+  return <Layout>{children}</Layout>;
 };

+const PlaceholderPage: React.FC<{ title: string }> = ({ title }) => (
+  <div style={{ padding: '20px', textAlign: 'center' }}>
+    <h1>{title}</h1>
+    <p>Coming soon...</p>
+  </div>
+);
+
 function App() {
  return (
-    <BrowserRouter>
-      <Routes>
-        <Route path="/login" element={<Login />} />
-        <Route
-          path="/profile"
-          element={
-            <ProtectedRoute>
-              <Profile />
-            </ProtectedRoute>
-          }
-        />
-        <Route path="/" element={<Navigate to="/profile" replace />} />
-      </Routes>
-    </BrowserRouter>
+    <ThemeProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<Login />} />
+          <Route
+            path="/profile"
+            element={
+              <ProtectedRoute>
+                <Profile />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/schedule"
+            element={
+              <ProtectedRoute>
+                <PlaceholderPage title="Schedule" />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/grades"
+            element={
+              <ProtectedRoute>
+                <PlaceholderPage title="Grades" />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/messages"
+            element={
+              <ProtectedRoute>
+                <PlaceholderPage title="Messages" />
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/settings"
+            element={
+              <ProtectedRoute>
+                <Settings />
+              </ProtectedRoute>
+            }
+          />
+          <Route path="/" element={<Navigate to="/profile" replace />} />
+        </Routes>
+      </BrowserRouter>
+    </ThemeProvider>
  );
 }

--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Navigation } from './Navigation';
+
+export const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return (
+    <div className="app-container">
+      <Navigation />
+      <main className="main-content">
+        {children}
+      </main>
+    </div>
+  );
+};
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { User, Calendar, GraduationCap, MessageSquare, Settings } from 'lucide-react';
+
+const navItems = [
+  { path: '/profile', label: 'Profile', icon: User },
+  { path: '/schedule', label: 'Schedule', icon: Calendar },
+  { path: '/grades', label: 'Grades', icon: GraduationCap },
+  { path: '/messages', label: 'Messages', icon: MessageSquare },
+  { path: '/settings', label: 'Settings', icon: Settings },
+];
+
+export const Navigation: React.FC = () => {
+  return (
+    <>
+      <nav className="navigation-rail">
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {navItems.map((item) => (
+            <NavLink
+              key={item.path}
+              to={item.path}
+              className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+            >
+              <div className="nav-item-icon-wrapper">
+                <item.icon size={24} />
+              </div>
+              <span className="nav-item-label">{item.label}</span>
+            </NavLink>
+          ))}
+        </div>
+      </nav>
+
+      <nav className="navigation-bar">
+        {navItems.map((item) => (
+          <NavLink
+            key={item.path}
+            to={item.path}
+            className={({ isActive }) => `nav-item ${isActive ? 'active' : ''}`}
+          >
+            <div className="nav-item-icon-wrapper">
+              <item.icon size={24} />
+            </div>
+            <span className="nav-item-label">{item.label}</span>
+          </NavLink>
+        ))}
+      </nav>
+    </>
+  );
+};
--- a/src/components/ThemeProvider.tsx
+++ b/src/components/ThemeProvider.tsx
@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { useStore } from '../store/useStore';
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { theme, seedColor } = useStore();
+
+  useEffect(() => {
+    const root = document.documentElement;
+    
+    // Set Theme Class
+    if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      root.classList.add('dark');
+      root.style.colorScheme = 'dark';
+    } else {
+      root.classList.remove('dark');
+      root.style.colorScheme = 'light';
+    }
+
+    // Set Primary Color (Seed)
+    root.style.setProperty('--md-sys-color-primary-base', seedColor);
+    
+    // Simplification: In a real app we'd use material-color-utilities here.
+    // For now we just use the seed color as primary.
+    root.style.setProperty('--md-sys-color-primary', seedColor);
+  }, [theme, seedColor]);
+
+  return <>{children}</>;
+};
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { Profile as ProfileType } from '../types/api';
-import { useStore } from '../store/useStore';
-import { useNavigate } from 'react-router-dom';
-import { LogOut, User, Mail, GraduationCap, Users } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import { User, Mail, GraduationCap, Users, Calendar, GraduationCap as GradesIcon, MessageSquare, Settings } from 'lucide-react';

 export const Profile: React.FC = () => {
  const [profile, setProfile] = useState<ProfileType | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
-  const { reset } = useStore();
  const navigate = useNavigate();

  useEffect(() => {
@@ -30,11 +28,6 @@ export const Profile: React.FC = () => {
    fetchProfile();
  }, [navigate]);

-  const handleLogout = () => {
-    reset();
-    navigate('/login');
-  };
-
  if (loading) return <div style={{ padding: '20px', textAlign: 'center' }}>Loading profile...</div>;
  if (error) return (
    <div style={{ padding: '20px', textAlign: 'center', color: 'var(--md-sys-color-error)' }}>
@@ -48,18 +41,14 @@ export const Profile: React.FC = () => {

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
+      <div style={{ marginBottom: '24px' }}>
        <h1>Profile</h1>
-        <button onClick={handleLogout} className="m3-button m3-button-tonal">
-          <LogOut size={18} style={{ marginRight: '8px' }} />
-          Logout
-        </button>
      </div>

      {profile && (
        <div className="m3-card">
          <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-            <User size={24} style={{ marginRight: '16px' }} />
+            <User size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
            <div>
              <div style={{ fontSize: '12px', opacity: 0.7 }}>Full Name</div>
              <div style={{ fontSize: '18px', fontWeight: 500 }}>{profile.fullName}</div>
@@ -68,7 +57,7 @@ export const Profile: React.FC = () => {

          {profile.email && (
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Mail size={24} style={{ marginRight: '16px' }} />
+              <Mail size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
              <div>
                <div style={{ fontSize: '12px', opacity: 0.7 }}>Email</div>
                <div>{profile.email}</div>
@@ -78,7 +67,7 @@ export const Profile: React.FC = () => {

          {profile.group && (
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <Users size={24} style={{ marginRight: '16px' }} />
+              <Users size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
              <div>
                <div style={{ fontSize: '12px', opacity: 0.7 }}>Group</div>
                <div>{profile.group}</div>
@@ -88,7 +77,7 @@ export const Profile: React.FC = () => {

          {profile.faculty && (
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <GraduationCap size={24} style={{ marginRight: '16px' }} />
+              <GraduationCap size={24} style={{ marginRight: '16px', color: 'var(--md-sys-color-primary)' }} />
              <div>
                <div style={{ fontSize: '12px', opacity: 0.7 }}>Faculty</div>
                <div>{profile.faculty}</div>
@@ -99,12 +88,24 @@ export const Profile: React.FC = () => {
      )}

      <div style={{ marginTop: '24px' }}>
-        <h2 style={{ fontSize: '18px', marginBottom: '16px' }}>Other Services</h2>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px' }}>Quick Access</h2>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
-          <button className="m3-button m3-button-tonal" disabled>Schedule (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Grades (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Debts (Soon)</button>
-          <button className="m3-button m3-button-tonal" disabled>Messages (Soon)</button>
+          <Link to="/schedule" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <Calendar size={24} />
+            Schedule
+          </Link>
+          <Link to="/grades" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <GradesIcon size={24} />
+            Grades
+          </Link>
+          <Link to="/messages" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <MessageSquare size={24} />
+            Messages
+          </Link>
+          <Link to="/settings" className="m3-button m3-button-tonal" style={{ textDecoration: 'none', height: 'auto', padding: '16px', flexDirection: 'column', gap: '8px' }}>
+            <Settings size={24} />
+            Settings
+          </Link>
        </div>
      </div>
    </div>
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { useStore } from '../store/useStore';
+import { Palette, Moon, Sun, Monitor, LogOut } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+const colors = [
+  { name: 'Blue', value: '#0061a4' },
+  { name: 'Red', value: '#ba1a1a' },
+  { name: 'Green', value: '#006d3a' },
+  { name: 'Purple', value: '#7c4dff' },
+  { name: 'Orange', value: '#8b5000' },
+];
+
+export const Settings: React.FC = () => {
+  const { theme, setTheme, seedColor, setSeedColor, reset } = useStore();
+  const navigate = useNavigate();
+
+  const handleLogout = () => {
+    reset();
+    navigate('/login');
+  };
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
+      <h1 style={{ marginBottom: '24px' }}>Settings</h1>
+
+      <section style={{ marginBottom: '32px' }}>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center' }}>
+          <Palette size={20} style={{ marginRight: '12px' }} />
+          Theme
+        </h2>
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '12px' }}>
+          <button
+            onClick={() => setTheme('light')}
+            className={`m3-button m3-button-tonal ${theme === 'light' ? 'active' : ''}`}
+            style={{ border: theme === 'light' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Sun size={18} style={{ marginRight: '8px' }} />
+            Light
+          </button>
+          <button
+            onClick={() => setTheme('dark')}
+            className={`m3-button m3-button-tonal ${theme === 'dark' ? 'active' : ''}`}
+            style={{ border: theme === 'dark' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Moon size={18} style={{ marginRight: '8px' }} />
+            Dark
+          </button>
+          <button
+            onClick={() => setTheme('system')}
+            className={`m3-button m3-button-tonal ${theme === 'system' ? 'active' : ''}`}
+            style={{ border: theme === 'system' ? '2px solid var(--md-sys-color-primary)' : 'none' }}
+          >
+            <Monitor size={18} style={{ marginRight: '8px' }} />
+            System
+          </button>
+        </div>
+      </section>
+
+      <section>
+        <h2 style={{ fontSize: '18px', marginBottom: '16px', display: 'flex', alignItems: 'center' }}>
+          <Palette size={20} style={{ marginRight: '12px' }} />
+          Accent Color
+        </h2>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px' }}>
+          {colors.map((c) => (
+            <button
+              key={c.value}
+              onClick={() => setSeedColor(c.value)}
+              style={{
+                width: '48px',
+                height: '48px',
+                borderRadius: '24px',
+                backgroundColor: c.value,
+                border: seedColor === c.value ? '4px solid var(--md-sys-color-on-surface)' : 'none',
+                cursor: 'pointer',
+                transition: 'transform 0.2s',
+              }}
+              title={c.name}
+            />
+          ))}
+        </div>
+      </section>
+
+      <section style={{ marginTop: '48px', borderTop: '1px solid var(--md-sys-color-outline)', paddingTop: '24px' }}>
+        <button
+          onClick={handleLogout}
+          className="m3-button m3-button-tonal"
+          style={{ color: 'var(--md-sys-color-error)', width: '100%' }}
+        >
+          <LogOut size={18} style={{ marginRight: '8px' }} />
+          Logout from Session
+        </button>
+      </section>
+    </div>
+  );
+};
--- a/src/store/useStore.ts
+++ b/src/store/useStore.ts
@@ -5,9 +5,13 @@ interface AppState {
  apiDomain: string;
  apiKey: string;
  isMockMode: boolean;
+  theme: 'system' | 'light' | 'dark';
+  seedColor: string;
  setApiDomain: (domain: string) => void;
  setApiKey: (key: string) => void;
  setMockMode: (isMock: boolean) => void;
+  setTheme: (theme: 'system' | 'light' | 'dark') => void;
+  setSeedColor: (color: string) => void;
  reset: () => void;
 }

@@ -17,9 +21,13 @@ export const useStore = create<AppState>()(
      apiDomain: import.meta.env.VITE_API_DOMAIN || '',
      apiKey: '',
      isMockMode: import.meta.env.VITE_MOCK_MODE === 'true',
+      theme: 'system',
+      seedColor: '#0061a4', // Default M3 Blue
      setApiDomain: (apiDomain) => set({ apiDomain }),
      setApiKey: (apiKey) => set({ apiKey }),
      setMockMode: (isMockMode) => set({ isMockMode }),
+      setTheme: (theme) => set({ theme }),
+      setSeedColor: (seedColor) => set({ seedColor }),
      reset: () => set({ apiKey: '' }),
    }),
    {
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -13,25 +13,26 @@
  --md-sys-color-on-surface-variant: #43474e;
  --md-sys-color-outline: #73777f;
  --md-sys-color-error: #ba1a1a;
+  
+  --nav-width: 80px;
+  --bottom-nav-height: 80px;
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --md-sys-color-primary: #9ecaff;
-    --md-sys-color-on-primary: #003258;
-    --md-sys-color-primary-container: #00497d;
-    --md-sys-color-on-primary-container: #d1e4ff;
-    --md-sys-color-secondary: #bbc7db;
-    --md-sys-color-on-secondary: #253140;
-    --md-sys-color-secondary-container: #3b4858;
-    --md-sys-color-on-secondary-container: #d7e3f7;
-    --md-sys-color-surface: #1a1c1e;
-    --md-sys-color-on-surface: #e2e2e6;
-    --md-sys-color-surface-variant: #43474e;
-    --md-sys-color-on-surface-variant: #c3c7cf;
-    --md-sys-color-outline: #8d9199;
-    --md-sys-color-error: #ffb4ab;
-  }
+:root.dark {
+  --md-sys-color-primary: #9ecaff;
+  --md-sys-color-on-primary: #003258;
+  --md-sys-color-primary-container: #00497d;
+  --md-sys-color-on-primary-container: #d1e4ff;
+  --md-sys-color-secondary: #bbc7db;
+  --md-sys-color-on-secondary: #253140;
+  --md-sys-color-secondary-container: #3b4858;
+  --md-sys-color-on-secondary-container: #d7e3f7;
+  --md-sys-color-surface: #1a1c1e;
+  --md-sys-color-on-surface: #e2e2e6;
+  --md-sys-color-surface-variant: #43474e;
+  --md-sys-color-on-surface-variant: #c3c7cf;
+  --md-sys-color-outline: #8d9199;
+  --md-sys-color-error: #ffb4ab;
 }

 * {
@@ -48,14 +49,7 @@ body {
  transition: background-color 0.3s, color 0.3s;
 }

-button {
-  cursor: pointer;
-  font-family: inherit;
-}
-
-input {
-  font-family: inherit;
-}
+/* Material 3 Components */

 .m3-button {
  display: inline-flex;
@@ -69,6 +63,8 @@ input {
  font-size: 14px;
  letter-spacing: 0.1px;
  transition: box-shadow 0.2s, background-color 0.2s;
+  background-color: transparent;
+  color: var(--md-sys-color-primary);
 }

 .m3-button-filled {
@@ -105,3 +101,97 @@ input {
  outline: none;
  border-bottom: 2px solid var(--md-sys-color-primary);
 }
+
+/* Layout and Navigation */
+
+.app-container {
+  display: flex;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  padding-bottom: var(--bottom-nav-height);
+}
+
+@media (min-width: 600px) {
+  .main-content {
+    padding-bottom: 0;
+    margin-left: var(--nav-width);
+  }
+}
+
+.navigation-rail {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--nav-width);
+  background-color: var(--md-sys-color-surface);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 0;
+  border-right: 1px solid var(--md-sys-color-outline);
+  z-index: 100;
+}
+
+.navigation-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: var(--bottom-nav-height);
+  background-color: var(--md-sys-color-surface-variant);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  padding: 0 8px;
+  z-index: 100;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  color: var(--md-sys-color-on-surface-variant);
+  gap: 4px;
+  flex: 1;
+  height: 100%;
+  border-radius: 16px;
+  transition: background-color 0.2s;
+}
+
+.nav-item-icon-wrapper {
+  width: 64px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  transition: background-color 0.2s;
+}
+
+.nav-item.active .nav-item-icon-wrapper {
+  background-color: var(--md-sys-color-secondary-container);
+  color: var(--md-sys-color-on-secondary-container);
+}
+
+.nav-item-label {
+  font-size: 12px;
+  font-weight: 500;
+}
+
+@media (min-width: 600px) {
+  .navigation-bar {
+    display: none;
+  }
+}
+
+@media (max-width: 599px) {
+  .navigation-rail {
+    display: none;
+  }
+}