RightHamburger.js 5.72 KB
Newer Older
우지원's avatar
우지원 committed
1
import { useState } from "react";
우지원's avatar
0712    
우지원 committed
2
3
4
import ChannelSingle from './ChannelSingle'

const RightHamberger = () => {
우지원's avatar
우지원 committed
5
    const [admin, setAdmin] = useState('true')
우지원's avatar
0712    
우지원 committed
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
    return (
        <div>
            <div>
                <button
                    className="navbar-toggler"
                    type="button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#right-hamburger"
                    aria-controls="right-hamburger"
                    aria-expanded="false"
                    aria-label="Toggle navigation"
                    style={{ border: '#f4c1f2' }}
                >
                    <span className="navbar-toggler-icon"></span>
                </button>
            </div>

            <div
                className="offcanvas offcanvas-end"
                style={{ width: '330px' }}
                tabIndex="-1"
                id="right-hamburger"
                aria-labelledby="hamburgerLabel"
            >
                <div className="offcanvas-header">
                    <p
                        className="col-6 offcanvas-title"
                        id="offcanvasExampleLabel"
                        style={{
                            fontWeight: 'bold',
                            fontSize: '15px',
                            overflow: 'scroll',
                            whiteSpace: 'nowrap',
                            width: '150px',
                            color: '#000000',
                        }}
                    >
                        데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
                    </p>
                    <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
                    <button
                        type="button"
                        className="btn-close text-reset"
                        data-bs-dismiss="offcanvas"
                        aria-label="Close"
                    ></button>
                </div>

                <ChannelSingle />
                <div>
                    <div className="d-flex flex-row-reverse">
                        <button
                            type="button"
                            className="m-3 rounded text-white"
                            data-bs-toggle="modal"
                            data-bs-target="#exitRoom"
                            style={{
                                height: '30px',
                                fontWeight: 'bold',
                                backgroundColor: '#D64D61',
                                color: 'black',
                                border: '1px #D64D61',
                            }}
                        >
                            퇴장
                        </button>
우지원's avatar
우지원 committed
72
73
74
75
76
77
78
79
80
81
82
83
84
85
                        {admin ? <button
                            type="button"
                            className="m-3 rounded"
                            style={{
                                height: '30px',
                                fontWeight: 'bold',
                                backgroundColor: '#E0CEE8',
                                color: 'black',
                                border: '1px #D64D61',
                            }}
                        >
                            설정
                        </button> : null}
                        
우지원's avatar
0712    
우지원 committed
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
                        <div
                            className="modal fade"
                            id="exitRoom"
                            tabIndex="-1"
                            aria-labelledby="exitRoomLabel"
                            aria-hidden="true"
                        >
                            <div className="modal-dialog">
                                <div className="modal-content">
                                    <div className="modal-header">
                                        <button
                                            type="button"
                                            className="btn-close"
                                            data-bs-dismiss="modal"
                                            aria-label="Close"
                                        ></button>
                                    </div>
                                    <div className="modal-body d-flex justify-content-center">
                                        이방에서 퇴장하시겠습니까?
                                    </div>
                                    <div className="row mb-3">
                                        <div className="d-flex justify-content-evenly">
                                            {/* <Link to="/user"> */}
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
                                            >
                                                
                                            </button>
                                            {/* </Link> */}
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
                                                data-bs-dismiss="modal"
                                            >
                                                아니요
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div >
    )


}

export default RightHamberger