selenaaasi
/
trampa-frontend
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

-

feature/code-cleanup-joca
Jovan Petrovic 3 年之前
父節點
a38820f90d
當前提交
d8c6389ceb
共有 3 個檔案被更改，包括 289 行新增 和 166 行删除
分割檢視 顯示文件統計
  1. 0
    160
      src/components/MUI/NavbarComponent copy.js
  2. 271
    6
      src/components/MUI/NavbarComponent.js
  3. 18
    0
      src/components/MUI/NavbarComponent.styled.js

+ 0
- 160
src/components/MUI/NavbarComponent copy.js 查看文件

@@ -1,160 +0,0 @@
import React, { useState, useMemo, useContext } from 'react';
import {
AppBar,
Badge,
Box,
IconButton,
Toolbar,
Typography,
List,
ListItem,
ListItemButton,
ListItemIcon,
ListItemText,
useMediaQuery,
} from '@mui/material';
import { useTheme } from '@mui/system';
import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined';
import ShoppingBasketIcon from '@mui/icons-material/ShoppingBasket';
import Brightness4Icon from '@mui/icons-material/Brightness4';
import Brightness7Icon from '@mui/icons-material/Brightness7';
import MenuList from './MenuListComponent';
import Drawer from './DrawerComponent';
import { ColorModeContext } from '../../context/ColorModeContext';

const NavbarComponent2 = () => {
const [openDrawer, setOpenDrawer] = useState(false);
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm'));
const toggleColorMode = useContext(ColorModeContext);

const handleToggleDrawer = () => {
setOpenDrawer(!openDrawer);
};

const drawerContent = useMemo(
() => (
<List>
<ListItemButton divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 1</ListItemText>
</ListItemIcon>
</ListItemButton>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemIcon>
<ListItemText>Link 2</ListItemText>
</ListItemIcon>
</ListItem>
<ListItem divider onClick={handleToggleDrawer}>
<ListItemText>Link 3</ListItemText>
</ListItem>
<ListItem divider>
<IconButton onClick={toggleColorMode}>
<ListItemText>Toggle {theme.palette.mode} mode</ListItemText>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</ListItem>
</List>
),
[handleToggleDrawer]
);

return (
<AppBar
elevation={2}
sx={{ backgroundColor: 'background.default', position: 'relative' }}
>
<Toolbar>
<Box
component="div"
sx={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
width: '100%',
}}
>
{matches ? (
<Drawer
open={openDrawer}
toggleOpen={handleToggleDrawer}
content={drawerContent}
/>
) : (
<Box sx={{ display: 'flex' }}>
<Typography
variant="h6"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 1
</Typography>
<Typography
variant="body1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 2
</Typography>
<Typography
variant="subtitle1"
sx={{
marginRight: 3,
cursor: 'pointer',
color: 'text.primary',
}}
>
Link 3
</Typography>
</Box>
)}
<Box>
<MenuList />
</Box>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
{matches ? (
<Box>
<IconButton onClick={handleToggleDrawer}>
<MenuOutlinedIcon />
</IconButton>
</Box>
) : (
<Box>
<IconButton>
<Badge badgeContent={3} color="primary">
<ShoppingBasketIcon color="action" />
</Badge>
</IconButton>
<IconButton sx={{ ml: 1 }} onClick={toggleColorMode}>
{theme.palette.mode === 'dark' ? (
<Brightness7Icon />
) : (
<Brightness4Icon />
)}
</IconButton>
</Box>
)}
</Box>
</Box>
</Toolbar>
</AppBar>
);
};

export default NavbarComponent;

+ 271
- 6
src/components/MUI/NavbarComponent.js 查看文件

@@ -1,5 +1,12 @@
import React, { useState, useMemo } from "react";
import { SearchInput } from "./NavbarComponent.styled";
import {
List,
ListItem,
ListItemAvatar,
ListItemText,
Avatar,
Divider,
AppBar,
Badge,
Box,
@@ -8,6 +15,7 @@ import {
useMediaQuery,
SvgIcon,
Typography,
Button,
} from "@mui/material";
import { useTheme } from "@mui/system";
import MenuOutlinedIcon from "@mui/icons-material/MenuOutlined";
@@ -17,6 +25,9 @@ import AccountCircle from "@mui/icons-material/AccountCircle";
import Drawer from "./DrawerComponent";
import { PrimaryButton } from "../Buttons/PrimaryButton/PrimaryButton";
import { PRIMARY_YELLOW_COLOR } from "../../constants/stylesConstants";
import { PRIMARY_PURPLE_COLOR } from "../../constants/stylesConstants";
import EyeOn from "@mui/icons-material/Visibility";
import SearchIcon from "@mui/icons-material/Search";
import PopoverComponent from "./PopoverComponent";

const NavbarComponent = () => {
@@ -181,9 +192,13 @@ const NavbarComponent = () => {
) : (
<></>
)}
<Box>
<p>Search</p>
</Box>
<SearchInput
fullWidth
endAdornment={<SearchIcon />}
size="small"
label="Pretražite proizvode"
id="fullWidth"
/>
<Box
sx={{
display: "flex",
@@ -255,7 +270,106 @@ const NavbarComponent = () => {
setPostsPopoverOpen(false);
setPostsAnchorEl(null);
}}
content={<Typography sx={{ p: 2 }}>Moje objave</Typography>}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moje objave
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Travis Howard"
src="/static/images/avatar/2.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</ListItemAvatar>
<ListItemText
primary="Oui Oui"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Sandra Adams
</Typography>
{" — Do you have Paris recommendations? Have you ever…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj sve
</Button>
</>
}
/>
<PopoverComponent
anchorEl={msgAnchorEl}
@@ -264,7 +378,106 @@ const NavbarComponent = () => {
setMsgPopoverOpen(false);
setMsgAnchorEl(null);
}}
content={<Typography sx={{ p: 2 }}>Moje poruke</Typography>}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moje poruke
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar
alt="Travis Howard"
src="/static/images/avatar/2.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="Summer BBQ"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
to Scott, Alex, Jennifer
</Typography>
{" — Wish I could come, but I'm out of town this…"}
</React.Fragment>
}
/>
</ListItem>
<Divider variant="inset" component="li" />
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
</ListItemAvatar>
<ListItemText
primary="Oui Oui"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Sandra Adams
</Typography>
{" — Do you have Paris recommendations? Have you ever…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj sve
</Button>
</>
}
/>
<PopoverComponent
anchorEl={userAnchorEl}
@@ -273,7 +486,59 @@ const NavbarComponent = () => {
setUserPopoverOpen(false);
setUserAnchorEl(null);
}}
content={<Typography sx={{ p: 2 }}>Moj profil</Typography>}
content={
<>
<Typography
sx={{
p: 2,
background: PRIMARY_PURPLE_COLOR,
color: "white",
width: "100%",
}}
>
Moj profil
</Typography>
<List
sx={{ width: "100%", maxWidth: 360, bgcolor: "background.paper" }}
>
<ListItem alignItems="flex-start">
<ListItemAvatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</ListItemAvatar>
<ListItemText
primary="Brunch this weekend?"
secondary={
<React.Fragment>
<Typography
sx={{ display: "inline" }}
component="span"
variant="body2"
color="text.primary"
>
Ali Connors
</Typography>
{" — I'll be in your neighborhood doing errands this…"}
</React.Fragment>
}
/>
</ListItem>
</List>
<Button
variant="text"
endIcon={<EyeOn />}
sx={{
textDecoration: "underline",
float: "right",
mr: 2,
mb: 2,
color: PRIMARY_PURPLE_COLOR,
fontWeight: 500,
}}
>
Pogledaj profil
</Button>
</>
}
/>
</AppBar>
);

+ 18
- 0
src/components/MUI/NavbarComponent.styled.js 查看文件

@@ -0,0 +1,18 @@
import { TextField } from "@mui/material";
import styled from "styled-components";

export const SearchInput = styled(TextField)`
margin-left: 3.8rem;
background-color: #F4F4F4;
width: 45%;
max-width: 100%;
@media (max-width: 1100px) {
width: 36%;
}
@media (max-width: 900px) {
width: 27%;
}
@media (max-width: 600px) {
width: 36%;
}
`

Write Preview
Loading…
取消
儲存