Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
students
Today KU
Commits
074c9d90
Commit
074c9d90
authored
Oct 10, 2021
by
Kim, Subin
Browse files
Menu 우선 완성
parent
14427e14
Changes
2
Hide whitespace changes
Inline
Side-by-side
client/src/components/Menu/Menu.js
View file @
074c9d90
import
{
Link
}
from
"
react-router-dom
"
;
import
styles
from
"
./menu.module.scss
"
;
import
styles
from
"
./menu.module.scss
"
;
const
Menu
=
()
=>
{
const
Menu
=
()
=>
{
...
@@ -7,7 +8,39 @@ const Menu = () => {
...
@@ -7,7 +8,39 @@ const Menu = () => {
<
i
className
=
"
bi bi-list fs-4
"
><
/i
>
<
i
className
=
"
bi bi-list fs-4
"
><
/i
>
<
/button
>
<
/button
>
<
div
className
=
{
`collapse collapse-horizontal position-absolute top-0 start-0 h-100
${
styles
.
content
}
`
}
id
=
"
menuContent
"
>
<
div
className
=
{
`collapse collapse-horizontal position-absolute top-0 start-0 h-100
${
styles
.
content
}
`
}
id
=
"
menuContent
"
>
<
button
type
=
"
button
"
className
=
{
`btn-close btn-close-white btn-lg position-absolute
${
styles
.
close
}
`
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
"
#menuContent
"
aria
-
controls
=
"
menuContent
"
aria
-
expanded
=
"
true
"
aria
-
label
=
"
menu
"
><
/button
>
<
div
style
=
{{
transition
:
"
.15s ease
"
}}
>
<
button
type
=
"
button
"
className
=
{
`btn-close btn-close btn-lg position-absolute
${
styles
.
close
}
`
}
data
-
bs
-
toggle
=
"
collapse
"
data
-
bs
-
target
=
"
#menuContent
"
aria
-
controls
=
"
menuContent
"
aria
-
expanded
=
"
true
"
aria
-
label
=
"
menu
"
><
/button
>
<
div
className
=
"
d-flex flex-column align-items-center my-5
"
>
<
h1
className
=
"
my-3
"
>
김수빈
님
<
/h1
>
<
h2
className
=
"
my-2
"
>
목표
95
%
달성
!<
/h2
>
<
/div
>
<
div
className
=
"
d-flex flex-column justify-content-between py-4 ps-3
"
style
=
{{
backgroundColor
:
"
crimson
"
}}
>
<
div
className
=
"
user-select-none w-75
"
>
<
h2
>
To
-
do
<
/h2
>
<
div
className
=
"
d-flex mt-2
"
>
<
p
className
=
{
`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3
${
styles
.
title
}
`
}
>
sdasdsasdasdsadsadsadsadsadsadsadaddad
<
/p
>
<
input
className
=
{
`form-check-input rounded-0 border-dark shadow-none mt-1
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
id
=
"
inlineCheckbox1
"
value
=
""
aria
-
label
=
"
checkbox
"
/>
<
/div
>
<
div
className
=
"
d-flex
"
>
<
p
className
=
{
`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3
${
styles
.
title
}
`
}
>
sdasdsadad
<
/p
>
<
input
className
=
{
`form-check-input rounded-0 border-dark shadow-none mt-1
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
id
=
"
inlineCheckbox1
"
value
=
""
aria
-
label
=
"
checkbox
"
/>
<
/div
>
<
div
className
=
"
d-flex
"
>
<
p
className
=
{
`form-check-label border-bottom border-dark border-2 fs-5 pb-1 me-3
${
styles
.
title
}
`
}
>
sdasdsadad
<
/p
>
<
input
className
=
{
`form-check-input rounded-0 border-dark shadow-none mt-1
${
styles
.
checkBox
}
`
}
type
=
"
checkbox
"
id
=
"
inlineCheckbox1
"
value
=
""
aria
-
label
=
"
checkbox
"
/>
<
/div
>
<
Link
className
=
"
d-flex justify-content-center text-dark text-decoration-none
"
to
=
"
/todo
"
>
<
i
className
=
"
bi bi-plus-lg me-2
"
><
/i
>
<
p
className
=
"
mb-0
"
>
더보기
<
/p
>
<
/Link
>
<
/div
>
<
div
className
=
"
d-flex flex-column
"
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
"
/schedule
"
><
i
className
=
"
bi bi-check
"
><
/i>일정</
Link
>
<
Link
className
=
"
text-dark text-decoration-none
"
to
=
"
/studyplan
"
><
i
className
=
"
bi bi-check
"
><
/i>학업별 계획</
Link
>
<
/div
>
<
p
className
=
{
`position-absolute bottom-0 text-dark
${
styles
.
logout
}
`
}
>
로그아웃
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/
>
<
/
>
)
)
...
...
client/src/components/Menu/menu.module.scss
View file @
074c9d90
.content
{
.content
{
background-color
:
#
343a40
;
background-color
:
#
fff
;
z-index
:
1
;
z-index
:
1
;
overflow
:
hidden
;
&
.close
{
&
.close
{
top
:
10px
;
top
:
10px
;
right
:
10px
;
right
:
10px
;
}
}
&
.title
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
width
:
86%
;
}
&
.checkBox
{
width
:
1
.5em
;
height
:
1
.5em
;
background-color
:
crimson
;
&
:checked
{
background-image
:
url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='currentColor' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e")
;
}
}
&
.logout
{
right
:
10px
;
cursor
:
pointer
;
}
}
}
\ No newline at end of file
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