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',
Kim, Chaerin's avatar
merge19    
Kim, Chaerin 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',
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
65
                                backgroundColor: '#d86da6',
우지원's avatar
0712    
우지원 committed
66
                                color: 'black',
Kim, Chaerin's avatar
merge19    
Kim, Chaerin committed
67
                                border: '1px #d86da6',
우지원's avatar
0712    
우지원 committed
68
69
                            }}
                        >
Kim, Chaerin's avatar
merge19    
Kim, Chaerin 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
108
109
110
111
                        <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"
Kim, Chaerin's avatar
merge19    
Kim, Chaerin 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