Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
F
final-exam
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Packages
Packages
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Nawasan Wisitsingkhon
final-exam
Commits
968d25ec
Commit
968d25ec
authored
Sep 29, 2023
by
Nawasan Wisitsingkhon
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
remove sidebar;
create context to check login and keep user info;
parent
e9153812
Show whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
66 additions
and
95 deletions
+66
-95
Navbar.js
src/components/Navbar.js
+36
-72
UserLayout.js
src/components/layout/UserLayout.js
+3
-3
_app.js
src/pages/_app.js
+11
-3
_document.js
src/pages/_document.js
+0
-13
_error.js
src/pages/_error.js
+5
-0
register.js
src/pages/register.js
+6
-4
globals.css
src/styles/globals.css
+5
-0
No files found.
src/components/Navbar.js
View file @
968d25ec
import
*
as
React
from
"react"
;
import
{
useContext
}
from
"react"
;
import
{
styled
,
alpha
}
from
"@mui/material/styles"
;
import
AppBar
from
"@mui/material/AppBar"
;
import
Box
from
"@mui/material/Box"
;
...
...
@@ -13,19 +14,16 @@ import MenuIcon from "@mui/icons-material/Menu";
import
SearchIcon
from
"@mui/icons-material/Search"
;
import
AccountCircle
from
"@mui/icons-material/AccountCircle"
;
import
MailIcon
from
"@mui/icons-material/Mail"
;
import
NotificationsIcon
from
"@mui/icons-material/Notifications"
;
import
MoreIcon
from
"@mui/icons-material/MoreVert"
;
import
{
Divider
}
from
"@mui/material"
;
import
List
from
"@mui/material/List"
;
import
{
ListItem
}
from
"@mui/material"
;
import
{
ListItemButton
}
from
"@mui/material"
;
import
{
ListItemIcon
}
from
"@mui/material"
;
import
PropTypes
from
"prop-types"
;
import
CssBaseline
from
"@mui/material/CssBaseline"
;
import
Drawer
from
"@mui/material/Drawer"
;
import
InboxIcon
from
"@mui/icons-material/MoveToInbox"
;
import
ListItemText
from
"@mui/material/ListItemText"
;
import
ShoppingCart
from
"@mui/icons-material/ShoppingCart"
;
import
{
UserContext
}
from
"@/pages/_app"
;
import
Link
from
"next/link"
;
const
Search
=
styled
(
"div"
)(({
theme
})
=>
({
position
:
"relative"
,
...
...
@@ -73,7 +71,7 @@ const drawer = (
<
Divider
/>
<
List
>
{[
"Inbox"
,
"Starred"
,
"Send email"
,
"Drafts"
].
map
((
text
,
index
)
=>
(
<
ListItem
key
=
{
text
}
disablePadding
>
<
ListItem
key
=
{
index
}
disablePadding
>
<
ListItemButton
>
<
ListItemIcon
>
{
index
%
2
===
0
?
<
InboxIcon
/>
:
<
MailIcon
/>
}
...
...
@@ -88,7 +86,7 @@ const drawer = (
);
function
Navbar
(
props
)
{
const
drawerWidth
=
props
.
drawerWidth
??
200
;
const
user
=
useContext
(
UserContext
)
;
const
{
window
}
=
props
;
const
[
anchorEl
,
setAnchorEl
]
=
React
.
useState
(
null
);
const
[
mobileMoreAnchorEl
,
setMobileMoreAnchorEl
]
=
React
.
useState
(
null
);
...
...
@@ -142,13 +140,18 @@ function Navbar(props) {
<
/Menu
>
);
const
MenuList
=
[
const
MenuList
=
user
?.
value
?.
name
?
[
{
id
:
0
,
label
:
"ตระกร้า"
,
link
:
'/cart'
,
link
:
"/cart"
,
element
:
(
<
IconButton
size
=
"large"
aria
-
label
=
"show 4 new mails"
color
=
"inherit"
>
<
IconButton
size
=
"large"
aria
-
label
=
"show 4 new mails"
color
=
"inherit"
>
<
Badge
badgeContent
=
{
4
}
color
=
"error"
>
<
ShoppingCart
/>
<
/Badge
>
...
...
@@ -172,6 +175,14 @@ function Navbar(props) {
<
/IconButton
>
),
},
]
:
[
{
id
:
0
,
lable
:
"Login"
,
element
:
"Login"
,
link
:
"/login"
,
},
];
const
mobileMenuId
=
"primary-search-account-menu-mobile"
;
...
...
@@ -191,36 +202,23 @@ function Navbar(props) {
open
=
{
isMobileMenuOpen
}
onClose
=
{
handleMobileMenuClose
}
>
{
MenuList
.
map
((
menu
)
=>
(
<>
{
MenuList
.
map
((
menu
,
idx
)
=>
(
<
span
key
=
{
idx
}
>
<
Link
className
=
"text-black no-underline"
href
=
{
menu
.
link
}
>
<
MenuItem
>
{
menu
.
element
}
<
p
>
{
menu
.
label
}
<
/p
>
<
/MenuItem
>
<
/
>
<
/Link
>
<
/span
>
))}
<
/Menu
>
);
return
(
<>
<
AppBar
position
=
"fixed"
sx
=
{{
width
:
{
md
:
`calc(100% -
${
drawerWidth
}
px)`
},
ml
:
{
md
:
`
${
drawerWidth
}
px`
},
}}
>
<
AppBar
position
=
"fixed"
>
<
Toolbar
>
<
IconButton
size
=
"large"
edge
=
"start"
color
=
"inherit"
aria
-
label
=
"open drawer"
sx
=
{{
mr
:
2
,
display
:
{
md
:
"none"
}
}}
>
<
MenuIcon
onClick
=
{
handleDrawerToggle
}
/
>
<
/IconButton
>
<
Typography
variant
=
"h6"
noWrap
...
...
@@ -240,7 +238,11 @@ function Navbar(props) {
<
/Search
>
<
Box
sx
=
{{
flexGrow
:
1
}}
/
>
<
Box
sx
=
{{
display
:
{
xs
:
"none"
,
md
:
"flex"
}
}}
>
{
MenuList
.
map
((
menu
)
=>
menu
.
element
)}
{
MenuList
.
map
((
menu
,
idx
)
=>
(
<
Link
className
=
"text-white"
key
=
{
idx
}
href
=
{
menu
.
link
}
>
<
span
>
{
menu
.
element
}
<
/span
>
<
/Link
>
))}
<
/Box
>
<
Box
sx
=
{{
display
:
{
xs
:
"flex"
,
md
:
"none"
}
}}
>
<
IconButton
...
...
@@ -251,56 +253,18 @@ function Navbar(props) {
onClick
=
{
handleMobileMenuOpen
}
color
=
"inherit"
>
<
M
ore
Icon
/>
<
M
enu
Icon
/>
<
/IconButton
>
<
/Box
>
<
/Toolbar
>
<
/AppBar
>
{
renderMobileMenu
}
{
renderMenu
}
<
Box
component
=
"nav"
sx
=
{{
width
:
{
sm
:
drawerWidth
},
flexShrink
:
{
sm
:
0
}
}}
aria
-
label
=
"mailbox folders"
>
{
/* The implementation can be swapped with js to avoid SEO duplication of links. */
}
<
Drawer
container
=
{
container
}
variant
=
"temporary"
open
=
{
mobileOpen
}
onClose
=
{
handleDrawerToggle
}
ModalProps
=
{{
keepMounted
:
true
,
// Better open performance on mobile.
}}
sx
=
{{
display
:
{
xs
:
"block"
,
sm
:
"block"
,
md
:
"none"
},
"& .MuiDrawer-paper"
:
{
boxSizing
:
"border-box"
,
width
:
drawerWidth
,
},
}}
>
{
drawer
}
<
/Drawer
>
<
Drawer
variant
=
"permanent"
sx
=
{{
display
:
{
xs
:
"none"
,
md
:
"block"
},
"& .MuiDrawer-paper"
:
{
boxSizing
:
"border-box"
,
width
:
drawerWidth
,
},
}}
open
>
{
drawer
}
<
/Drawer
>
<
/Box
>
<
/
>
);
}
Navbar
.
PropTypes
=
{
window
:
PropTypes
.
func
,
};
//
Navbar.PropTypes = {
//
window: PropTypes.func,
//
};
export
default
Navbar
;
src/components/layout/UserLayout.js
View file @
968d25ec
import
React
from
"react"
;
import
Navbar
from
"../Navbar"
;
import
{
Box
}
from
"@mui/material"
;
import
{
Toolbar
}
from
"@mui/material"
;
export
default
function
UserLayout
({
children
})
{
const
drawerWidth
=
200
;
return
(
<>
<
Box
sx
=
{{
display
:
"flex"
}}
>
<
Navbar
drawerWidth
=
{
drawerWidth
}
/
>
<
Navbar
/>
{
/* <Sidebar /> */
}
<
Box
component
=
"main"
sx
=
{{
flexGrow
:
1
,
p
:
3
,
width
:
{
sm
:
`calc(100% -
${
drawerWidth
}
px)`
},
}}
>
<
Toolbar
/>
{
children
}
<
/Box
>
<
/Box
>
...
...
src/pages/_app.js
View file @
968d25ec
import
Navbar
from
"@/components/Navbar"
;
import
"@/styles/globals.css"
;
import
"@fontsource/roboto/300.css"
;
import
"@fontsource/roboto/400.css"
;
import
"@fontsource/roboto/500.css"
;
import
"@fontsource/roboto/700.css"
;
import
{
createContext
,
useState
,
useEffect
}
from
"react"
;
import
UserLayout
from
"@/components/layout/UserLayout"
;
// axios.defaults.baseURL = ""
export
const
UserContext
=
createContext
(
null
);
export
default
function
App
({
Component
,
pageProps
})
{
const
[
user
,
setUser
]
=
useState
({
name
:
"Nawasan"
});
useEffect
(()
=>
{
setTimeout
(()
=>
{
setUser
({
name
:
""
});
},
3000
);
});
return
(
<>
<
UserContext
.
Provider
value
=
{{
value
:
user
,
set
:
setUser
}}
>
<
UserLayout
>
<
Component
{...
pageProps
}
/
>
<
/UserLayout
>
<
/
>
<
/
UserContext.Provider
>
);
}
src/pages/_document.js
deleted
100644 → 0
View file @
e9153812
import
{
Html
,
Head
,
Main
,
NextScript
}
from
'next/document'
export
default
function
Document
()
{
return
(
<
Html
lang
=
"en"
>
<
Head
/>
<
body
>
<
Main
/>
<
NextScript
/>
<
/body
>
<
/Html
>
)
}
src/pages/_error.js
0 → 100644
View file @
968d25ec
import
React
from
"react"
;
export
default
function
Error
()
{
return
<
div
>
Error
<
/div>
;
}
src/pages/register.js
View file @
968d25ec
import
userCookie
from
"@/components/lib/user"
;
import
{
Box
,
TextField
,
Toolbar
}
from
"@mui/material"
;
import
React
from
"react"
;
import
{
useContext
}
from
'react'
import
{
UserContext
}
from
"./_app"
;
export
default
function
Login
()
{
let
user
=
new
userCookie
();
if
(
user
.
isLogin
()
)
const
user
=
useContext
(
UserContext
)
if
(
true
)
return
(
<
div
>
<
h3
>
คุณเข้าสู่ระบบแล้ว
<
/h3
>
<
h3
>
{
user
.
value
.
name
}
<
/h3
>
<
/div
>
);
...
...
@@ -20,7 +23,6 @@ export default function Login() {
"& .MuiTextField-root"
:
{
m
:
1
,
width
:
"25ch"
},
}}
>
<
Toolbar
/>
<
TextField
label
=
"ชื่อ"
type
=
"text"
/>
<
/Box
>
<
/main
>
...
...
src/styles/globals.css
View file @
968d25ec
...
...
@@ -7,3 +7,8 @@ body {
padding
:
0
;
box-sizing
:
border-box
;
}
header
a
{
color
:
white
;
text-decoration
:
none
;
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment