Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
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
"
;
const
Menu
=
()
=>
{
...
...
@@ -7,7 +8,39 @@ const Menu = () => {
<
i
className
=
"
bi bi-list fs-4
"
><
/i
>
<
/button
>
<
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
>
<
/
>
)
...
...
client/src/components/Menu/menu.module.scss
View file @
074c9d90
.content
{
background-color
:
#
343a40
;
background-color
:
#
fff
;
z-index
:
1
;
overflow
:
hidden
;
&
.close
{
top
:
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