Add theme and logo

webapp/src/components/Nav.jsx

@@ -1,184 +1,115 @@
 import React, { useState } from 'react';
-import {AppBar,Box,Toolbar,IconButton,
-    Typography,Menu,Container,Button,
-    MenuItem,Drawer,List,ListItem,
-    ListItemButton,ListItemText,ListItemIcon
+import {
+    AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Button,
+    MenuItem, Drawer, List, ListItem, ListItemButton, ListItemText
 } from '@mui/material';
 import {
-  Menu as MenuIcon,
-  Home as HomeIcon,
-  Search as SearchIcon,
-  Notifications as NotificationsIcon,
-  AccountCircle as AccountCircleIcon,
-  Close as CloseIcon,
-  Inventory as InventoryIcon,
-  Support as SupportIcon,
-  ContactPage as ContactPageIcon
+    Menu as MenuIcon, AccountCircle as AccountCircleIcon, Close as CloseIcon
 } from '@mui/icons-material';
-import { Link, useLocation } from "react-router-dom";
+import { ReactComponent as CustomIcon } from '../media/logoS.svg';
+import { useTheme } from '@mui/material/styles';
+import defaultTheme from "./config/default-Theme.json";
 
 const pages = [
-  { code: 'home', link: '/home', name: 'Home' },
-  { code: 'menu', link: '/menu', name: 'Menu' },
-  { code: 'contact', link:'/contact', name: 'Contacto' }
+    { code: 'home', link: '/home', name: 'Home' },
+    { code: 'menu', link: '/menu', name: 'Menu' },
+    { code: 'contact', link: '/contact', name: 'Contacto' }
 ];
 
-const Nav = () => {
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [anchorElUser, setAnchorElUser] = useState(null);
-
-  const handleOpenUserMenu = (event) => {
-    setAnchorElUser(event.currentTarget);
-  };
-
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
-  const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
-  };
+const MenuDrawer = ({ open, onClose }) => (
+    <Drawer
+        variant="temporary"
+        anchor="left"
+        open={open}
+        onClose={onClose}
+        ModalProps={{ keepMounted: true }}
+        sx={{
+            display: { xs: 'block', md: 'none' },
+            '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 }
+        }}
+    >
+        <Box onClick={onClose} sx={{ textAlign: 'center', p: 2 }}>
+            <CustomIcon style={{ height: '40px', width: 'auto' }} />
+            <IconButton color="inherit">
+                <CloseIcon />
+            </IconButton>
+            <List>
+                {pages.map((page) => (
+                    <ListItem key={page.name} disablePadding>
+                        <ListItemButton sx={{ textAlign: 'left' }}>
+                            <ListItemText primary={page.name} />
+                        </ListItemButton>
+                    </ListItem>
+                ))}
+            </List>
+        </Box>
+    </Drawer>
+);
 
-  const drawer = (
-    <Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', p: 2 }}>
-        <Typography variant="h6" sx={{ color: 'primary.main' }}>
-          Logo
-        </Typography>
-        <IconButton color="inherit">
-          <CloseIcon />
-        </IconButton>
-      </Box>
-      <List>
-        {pages.map((page) => (
-          <ListItem key={page.name} disablePadding>
-            <ListItemButton sx={{ textAlign: 'left' }}>
-              <ListItemIcon>{page.icon}</ListItemIcon>
-              <ListItemText primary={page.name} />
-            </ListItemButton>
-          </ListItem>
+const UserMenu = ({ anchorEl, open, onClose }) => (
+    <Menu
+        sx={{ mt: '45px' }}
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        keepMounted
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={open}
+        onClose={onClose}
+    >
+        {["Perfil", "Configuración", "Cerrar Sesión"].map((text) => (
+            <MenuItem key={text} onClick={onClose}>
+                <Typography textAlign="center">{text}</Typography>
+            </MenuItem>
         ))}
-      </List>
-    </Box>
-  );
+    </Menu>
+);
 
-  return (
-    <AppBar position="static" color="default" elevation={1}>
-      <Container maxWidth="xl">
-        <Toolbar disableGutters>
-          <Typography
-            variant="h6"
-            noWrap
-            sx={{
-              mr: 2,
-              display: { xs: 'none', md: 'flex' },
-              fontWeight: 700,
-              color: 'primary.main',
-              textDecoration: 'none',
-            }}
-          >
-            Logo
-          </Typography>
+const Nav = () => {
+    const theme = useTheme();
+    const [mobileOpen, setMobileOpen] = useState(false);
+    const [anchorElUser, setAnchorElUser] = useState(null);
 
-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
-            <IconButton
-              size="large"
-              aria-label="menu"
-              onClick={handleDrawerToggle}
-              color="inherit"
-            >
-              <MenuIcon />
-            </IconButton>
-          </Box>
+    return (
+        <AppBar position="static" sx={{background: theme.palette.primary.main}}>
+            <Container maxWidth="xl">
+                <Toolbar disableGutters>
+                    {/* Logo */}
+                    <CustomIcon />
 
-          <Typography
-            variant="h6"
-            noWrap
-            sx={{
-              mr: 2,
-              display: { xs: 'flex', md: 'none' },
-              flexGrow: 1,
-              fontWeight: 700,
-              color: 'primary.main',
-              textDecoration: 'none',
-            }}
-          >
-            Logo
-          </Typography>
+                    {/* Mobile Menu Button */}
+                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
+                        <IconButton size="large" onClick={() => setMobileOpen(true)} color="inherit">
+                            <MenuIcon />
+                        </IconButton>
+                    </Box>
 
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-            {pages.map((page) => (
-              <Button
-                key={page.name}
-                startIcon={page.icon}
-                sx={{ my: 2, color: 'text.primary', display: 'flex' }}
-              >
-                {page.name}
-              </Button>
-            ))}
-          </Box>
+                    {/* Page Links */}
+                    <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
+                        {pages.map((page) => (
+                            <Button 
+                                key={page.name} 
+                                sx={{ my: 2, color: defaultTheme.palette.primary.contrastText}}>
+                                {page.name}
+                            </Button>
+                        ))}
+                    </Box>
 
-          <Box sx={{ flexGrow: 0 }}>
-            <IconButton size="large" color="inherit">
-              <SearchIcon />
-            </IconButton>
-            <IconButton size="large" color="inherit">
-              <NotificationsIcon />
-            </IconButton>
-            <IconButton
-              size="large"
-              onClick={handleOpenUserMenu}
-              color="inherit"
-            >
-              <AccountCircleIcon />
-            </IconButton>
-            <Menu
-              sx={{ mt: '45px' }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              <MenuItem onClick={handleCloseUserMenu}>
-                <Typography textAlign="center">Perfil</Typography>
-              </MenuItem>
-              <MenuItem onClick={handleCloseUserMenu}>
-                <Typography textAlign="center">Configuración</Typography>
-              </MenuItem>
-              <MenuItem onClick={handleCloseUserMenu}>
-                <Typography textAlign="center">Cerrar Sesión</Typography>
-              </MenuItem>
-            </Menu>
-          </Box>
-        </Toolbar>
-      </Container>
+                    {/* Icons */}
+                    <Box sx={{ flexGrow: 0 }}>
+                        <IconButton size="large" onClick={(e) => setAnchorElUser(e.currentTarget)} color="inherit">
+                            <AccountCircleIcon />
+                        </IconButton>
+                    </Box>
+                </Toolbar>
+            </Container>
 
-      <Drawer
-        variant="temporary"
-        anchor="left"
-        open={mobileOpen}
-        onClose={handleDrawerToggle}
-        ModalProps={{
-          keepMounted: true, // Better open performance on mobile.
-        }}
-        sx={{
-          display: { xs: 'block', md: 'none' },
-          '& .MuiDrawer-paper': { boxSizing: 'border-box', width: 240 },
-        }}
-      >
-        {drawer}
-      </Drawer>
-    </AppBar>
-  );
+            {/* Drawer for Mobile Menu */}
+            <MenuDrawer open={mobileOpen} onClose={() => setMobileOpen(false)} />
+
+            {/* User Dropdown Menu */}
+            <UserMenu anchorEl={anchorElUser} open={Boolean(anchorElUser)} onClose={() => setAnchorElUser(null)} />
+        </AppBar>
+    );
 };
 
-export default Nav;
+export default Nav;

webapp/src/components/config/default-Theme.json

@@ -23,7 +23,7 @@
     },
 
     "typography": {
-      "fontFamily": "Verdana, sans-serif",
+      "fontFamily": "'Verdana, sans-serif'",
       "fontSize": 16
     }
   }