RightHamburger.js 5.8 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
    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',
권병윤's avatar
as    
권병윤 committed
37
                            overflow: 'hidden',
우지원's avatar
0712    
우지원 committed
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
                            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',
seoyeon's avatar
0726    
seoyeon committed
65
                                backgroundColor: '#d86da6',
우지원's avatar
0712    
우지원 committed
66
                                color: 'black',
seoyeon's avatar
0726    
seoyeon committed
67
                                border: '1px #d86da6',
우지원's avatar
0712    
우지원 committed
68
69
                            }}
                        >
seoyeon's avatar
0726    
seoyeon committed
70
                            퇴장    
우지원's avatar
0712    
우지원 committed
71
                        </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
                        <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">
우지원's avatar
우지원 committed
108
                                            {/* <Link to="/user/:id"> */}
우지원's avatar
0712    
우지원 committed
109
110
111
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
권병윤's avatar
as    
권병윤 committed
112
                                                data-bs-dismiss="modal"
우지원's avatar
0712    
우지원 committed
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
138
                                            >
                                                
                                            </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