reza added new navbar for mobile

master
Reza_ashrafi 3 years ago
parent 811431a9ed
commit 91dc17b639
  1. 1
      src/assets/icons/mobileAr.svg
  2. 1
      src/assets/icons/mobileBasket.svg
  3. 1
      src/assets/icons/mobileBlog.svg
  4. 1
      src/assets/icons/mobileDanger.svg
  5. 1
      src/assets/icons/mobileHome.svg
  6. 1
      src/assets/icons/mobileLogout.svg
  7. 1
      src/assets/icons/mobileMail.svg
  8. 1
      src/assets/icons/mobileProfile.svg
  9. 1
      src/assets/icons/qr-code.svg
  10. 1
      src/assets/icons/tick.svg
  11. 210
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.js
  12. 31
      src/views/Home/Navbar/Mobile/NavbarDrawer/NavbarDrawer.scss
  13. 11
      src/views/QRScan/Scanner/index.js
  14. 80
      src/views/QRScan/index.js
  15. 30
      src/views/QRScan/index.scss

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="22.88" viewBox="0 0 22.88 22.88"><defs><style>.a,.b{fill:#4d4d4f;}.b{font-size:11px;font-family:SegoeUI-Bold, Segoe UI;font-weight:700;}</style></defs><g transform="translate(0)"><path class="a" d="M1.341,1.341H5.362V0H0V5.362H1.341Zm0,0" transform="translate(0 0)"/><path class="a" d="M392,0V1.341h4.022V5.362h1.341V0Zm0,0" transform="translate(-374.483 0)"/><path class="a" d="M396.022,396.022H392v1.341h5.362V392h-1.341Zm0,0" transform="translate(-374.483 -374.483)"/><path class="a" d="M1.341,392H0v5.362H5.362v-1.341H1.341Zm0,0" transform="translate(0 -374.483)"/><g transform="translate(4.388 4.363)"><text class="b" transform="translate(0 11)"><tspan x="0" y="0">A</tspan></text><text class="b" transform="translate(7.581 11)"><tspan x="0" y="0">R</tspan></text></g></g></svg>

After

Width:  |  Height:  |  Size: 845 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.421" viewBox="0 0 22.879 22.421"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M855.342,1265.093a1.733,1.733,0,1,1,1.734,1.732h0A1.734,1.734,0,0,1,855.342,1265.093Zm-12.87,0a1.732,1.732,0,1,1,1.732,1.732A1.732,1.732,0,0,1,842.472,1265.093Zm1.923-3.546a2.938,2.938,0,0,1-2.888-2.489l-.022-.188-1.045-12.469-1.727-.293a.86.86,0,0,1-.711-.876l.011-.115a.856.856,0,0,1,.846-.714h.031l.114.011,2.379.412a.858.858,0,0,1,.686.647l.021.127.269,3.2h16.129a2.368,2.368,0,0,1,1.751.762,2.4,2.4,0,0,1,.634,1.8l-.018.173-1.086,7.508a2.933,2.933,0,0,1-2.7,2.5l-.188.006Zm-1.2-2.82a1.207,1.207,0,0,0,1.067,1.1l.133.007h12.48a1.205,1.205,0,0,0,1.166-.9l.026-.134,1.087-7.5a.677.677,0,0,0-.572-.765l-.1-.008H842.5Zm8.677-3.976a.858.858,0,0,1-.114-1.708l.114-.008h3.173a.859.859,0,0,1,.114,1.709l-.114.007Z" transform="translate(-837.999 -1244.404)"/></g></svg>

After

Width:  |  Height:  |  Size: 957 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.902" viewBox="0 0 22.879 24.902"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0)"><g transform="translate(0 0)"><path class="a" d="M279.34,1316.806a9.028,9.028,0,0,0,1.488-.117l.277-.051a5.672,5.672,0,0,0,3.511-2.1,6.8,6.8,0,0,0,1.253-4.218v-11.93a8.946,8.946,0,0,0-.076-1.2c-.445-3.362-2.8-5.29-6.453-5.29h-9.817c-4.05,0-6.49,2.389-6.528,6.39v12.026c0,4.06,2.441,6.486,6.528,6.486Zm4.7-18.416v11.929c0,3.1-1.582,4.672-4.7,4.672h-9.805c-3.113,0-4.692-1.573-4.692-4.672V1298.39c0-3.1,1.578-4.672,4.692-4.672h9.8C282.461,1293.718,284.043,1295.291,284.043,1298.39Zm-5.013,12.138a.9.9,0,1,0,0-1.8h-9.163a.9.9,0,1,0,0,1.8Zm-9.163-5.266h9.163a.913.913,0,0,0,0-1.815h-9.163a.924.924,0,0,0-.878.422.909.909,0,0,0,0,.97.922.922,0,0,0,.878.422Zm9.152-5.265a.912.912,0,0,0,0-1.814h-3.486a.912.912,0,0,0,0,1.814Z" transform="translate(-262.995 -1291.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 949 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.135" viewBox="0 0 22.879 21.135"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(-982.01 -1244.904)"><g transform="translate(982.01 1244.904)"><path class="a" d="M985.2,1266.039h-.13a3.239,3.239,0,0,1-.794-.145l-.255-.092a3.306,3.306,0,0,1-1.8-4.188l.074-.2,8.321-14.811a3.211,3.211,0,0,1,4.4-1.288,3.26,3.26,0,0,1,1.157,1.1l.1.178,8.376,14.916a3.315,3.315,0,0,1-.537,3.374,3.269,3.269,0,0,1-2.138,1.138l-.2.016Zm16.529-1.745a1.538,1.538,0,0,0,1.442-1.621,2.037,2.037,0,0,0-.036-.288l-.025-.116-8.333-14.822a1.508,1.508,0,0,0-2.069-.6h0a1.486,1.486,0,0,0-.5.465l-.094.152-8.278,14.706a1.532,1.532,0,0,0,1.163,2.107l.172.02h.036Zm-9.142-3.955a.872.872,0,0,1,.858-.879.861.861,0,0,1,.859.862v.017a.858.858,0,1,1-1.717,0Zm0-3.225-.007-.116v-3.6a.858.858,0,0,1,1.709-.116l.007.116V1257a.858.858,0,0,1-1.709.116Z" transform="translate(-982.01 -1244.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 952 B

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="24.085" viewBox="0 0 22.88 24.085"><defs><style>.a{fill:#4d4d4f;}</style></defs><path class="a" d="M472.9,1219.988h-2.4a2.194,2.194,0,0,1-2.156-2.034l-.012-.169v-3.446a.763.763,0,0,0-.65-.748l-.108-.012h-3.216a.763.763,0,0,0-.745.65l-.012.11v3.432a1.292,1.292,0,0,1-.024.216l-.012.025-.014.083a2.182,2.182,0,0,1-2.033,1.88l-.156.014h-2.156a4.71,4.71,0,0,1-4.708-4.456v-10.008a3.58,3.58,0,0,1,1.2-2.636l7.5-6.035a4.374,4.374,0,0,1,5.25-.146l.194.146,7.331,5.866a3.623,3.623,0,0,1,1.386,2.564l.012.241v9.768A4.716,4.716,0,0,1,472.9,1219.988Zm-8.718-8.08h3.4a2.452,2.452,0,0,1,2.432,2.253v3.625a.525.525,0,0,0,.421.517h2.239a3.018,3.018,0,0,0,3.021-2.818l.014-.191v-9.755a1.951,1.951,0,0,0-.6-1.359l-.156-.134-7.346-5.876a2.685,2.685,0,0,0-1.675-.583,2.725,2.725,0,0,0-1.5.449l-.182.134-7.321,5.9a1.87,1.87,0,0,0-.733,1.274l-.013.2v9.754a3.023,3.023,0,0,0,2.843,3.01h2.348a.515.515,0,0,0,.529-.431l.025-.217.013-.061v-3.251a2.422,2.422,0,0,1,2.251-2.436Z" transform="translate(-454.5 -1195.903)"/></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="22.288" viewBox="0 0 22.879 22.288"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(-982.022 -1291.926)"><g transform="translate(982.022 1291.926)"><path class="a" d="M999.959,1314.214a4.943,4.943,0,0,0,4.941-4.711v-12.635a4.944,4.944,0,0,0-4.71-4.943h-5.665a4.943,4.943,0,0,0-4.938,4.709v1.272a.836.836,0,0,0,1.664.111l.008-.111v-1.039a3.271,3.271,0,0,1,3.073-3.271h5.626a3.271,3.271,0,0,1,3.27,3.078v12.6a3.27,3.27,0,0,1-3.077,3.271l-.193.006h-5.444a3.26,3.26,0,0,1-3.254-3.067v-1.242a.837.837,0,0,0-1.665-.111l-.007.111v1.051a4.933,4.933,0,0,0,4.686,4.925h5.683Zm-13.255-7.305a.836.836,0,0,0,.078-1.089l-.08-.095-1.828-1.821h11.394a.836.836,0,0,0,.111-1.664l-.111-.007h-11.4l1.83-1.82a.836.836,0,0,0,.085-1.089l-.081-.095a.836.836,0,0,0-1.088-.083l-.094.08-3.264,3.248a.832.832,0,0,0-.238.486h0v.019h0v.02h0v.064h0v.017h0v.066a.817.817,0,0,0,.081.281h0l.007.015.007.011h0l.009.016h0l.009.014h0l.01.016h0l.009.013h0l.008.012h0l.008.01h0a.851.851,0,0,0,.1.111l3.244,3.232a.834.834,0,0,0,1.18,0h0Z" transform="translate(-982.022 -1291.926)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="24.075" viewBox="0 0 22.879 24.075"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><g transform="translate(0 0)"><path class="a" d="M321.191,1315.979a3.189,3.189,0,0,1-2.27-.937,2.96,2.96,0,0,1-.885-2.1l-.011-.178a1.254,1.254,0,0,0-.178-.508,1.346,1.346,0,0,0-.828-.623,1.374,1.374,0,0,0-.343-.044,1.484,1.484,0,0,0-.74.206l-.213.1a3.22,3.22,0,0,1-2.16.154,3.139,3.139,0,0,1-1.89-1.461l-.767-1.3-.1-.191a3.048,3.048,0,0,1,1.239-3.972l.128-.078a1.345,1.345,0,0,0,.593-1.107,1.369,1.369,0,0,0-.722-1.189l-.188-.12a3.047,3.047,0,0,1-.92-4.1l.781-1.259a3.19,3.19,0,0,1,2.745-1.554,3.129,3.129,0,0,1,1.532.4l.16.083a1.306,1.306,0,0,0,.513.12,1.367,1.367,0,0,0,1.381-1.354v0l.01-.234a3.068,3.068,0,0,1,.905-1.919,3.2,3.2,0,0,1,2.231-.908h1.487a3.211,3.211,0,0,1,2.268.938,3.011,3.011,0,0,1,.892,2.167l.01.178a1.215,1.215,0,0,0,.173.5,1.373,1.373,0,0,0,1.175.662,1.471,1.471,0,0,0,.742-.207l.2-.1a3.2,3.2,0,0,1,4.078,1.257l.738,1.254c.019.034.036.069.052.1l.069.135a3.066,3.066,0,0,1-1.064,3.852l-.309.19a1.327,1.327,0,0,0-.4.429,1.308,1.308,0,0,0-.141,1.021,1.372,1.372,0,0,0,.674.837l.2.127a3.084,3.084,0,0,1,1.237,1.731,3.02,3.02,0,0,1-.327,2.357l-.794,1.3-.12.182a3.192,3.192,0,0,1-2.6,1.333,3.1,3.1,0,0,1-1.524-.4l-.165-.083a1.4,1.4,0,0,0-.524-.12h-.008a1.378,1.378,0,0,0-.963.392,1.357,1.357,0,0,0-.4,1l-.01.207a3.15,3.15,0,0,1-3.155,2.84Zm-3.709-6.032a3.127,3.127,0,0,1,1.9,1.43,2.985,2.985,0,0,1,.41,1.231l.024.426a1.367,1.367,0,0,0,1.371,1.2h1.487a1.358,1.358,0,0,0,1.372-1.2l.006-.131a3.071,3.071,0,0,1,.922-2.194,3.182,3.182,0,0,1,2.243-.9h.017a3.287,3.287,0,0,1,1.262.29l.38.19a1.4,1.4,0,0,0,.559.12,1.346,1.346,0,0,0,1.105-.55l.088-.133.775-1.266a1.324,1.324,0,0,0-.361-1.751l-.329-.2a3.085,3.085,0,0,1-1.278-1.76,3.043,3.043,0,0,1,.319-2.341,3.117,3.117,0,0,1,.955-1.009l.193-.12a1.324,1.324,0,0,0,.569-1.707l-.085-.16-.017-.037-.7-1.2a1.4,1.4,0,0,0-1.2-.683,1.33,1.33,0,0,0-.412.065l-.134.053-.12.061a3.213,3.213,0,0,1-2.388.328,3.159,3.159,0,0,1-1.926-1.421,2.978,2.978,0,0,1-.413-1.23l-.012-.3a1.342,1.342,0,0,0-.39-.981,1.4,1.4,0,0,0-.986-.408h-1.491a1.38,1.38,0,0,0-.97.395,1.324,1.324,0,0,0-.392.8l-.017.367a3.13,3.13,0,0,1-4.442,2.564l-.232-.12a1.4,1.4,0,0,0-.681-.178,1.413,1.413,0,0,0-1.21.7l-.781,1.257a1.325,1.325,0,0,0,.374,1.764l.314.195a3.069,3.069,0,0,1,1.389,2.563,3.107,3.107,0,0,1-1.394,2.563l-.188.12a1.316,1.316,0,0,0-.569,1.7l.067.128.758,1.281a1.368,1.368,0,0,0,.828.644,1.45,1.45,0,0,0,.386.052,1.3,1.3,0,0,0,.522-.108l.131-.062A3.191,3.191,0,0,1,317.482,1309.947Zm.443-6.005a4.017,4.017,0,1,1,4.1,3.934h-.087A3.979,3.979,0,0,1,317.925,1303.942Zm1.779,0a2.236,2.236,0,1,0,2.282-2.191h-.051A2.218,2.218,0,0,0,319.7,1303.942Z" transform="translate(-310.5 -1291.904)"/></g></g></svg>

After

Width:  |  Height:  |  Size: 2.7 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.879" height="21.872" viewBox="0 0 22.879 21.872"><defs><style>.a{fill:#4d4d4f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M840.265,1313.317a3.332,3.332,0,0,1,0-6.315,16.841,16.841,0,0,1,6.416-.915h.366a15.914,15.914,0,0,1,6.153.943,3.318,3.318,0,0,1,.092,6.178,14.8,14.8,0,0,1-5.887.993l-.724.006A16.972,16.972,0,0,1,840.265,1313.317Zm1.213-4.913c-1.168.4-1.761.989-1.761,1.762,0,1.55,2.344,2.336,6.968,2.336a17.247,17.247,0,0,0,5.209-.6c1.168-.4,1.761-.99,1.761-1.762,0-1.55-2.344-2.336-6.97-2.336A17.31,17.31,0,0,0,841.478,1308.4Zm15.308,2.263a.858.858,0,0,1,.666-1.014c.88-.181,1.466-.475,1.622-.808a.935.935,0,0,0,0-.8c-.159-.335-.748-.628-1.636-.8a11.676,11.676,0,0,0-1.724-.248.86.86,0,0,1,.114-1.716h0a13.176,13.176,0,0,1,1.959.281,3.635,3.635,0,0,1,2.833,1.746,2.651,2.651,0,0,1,0,2.276,3.643,3.643,0,0,1-2.825,1.752.857.857,0,0,1-1.014-.667Zm-14.258-8.223a5.9,5.9,0,1,1,4.159,1.716A5.9,5.9,0,0,1,842.527,1302.444Zm1.214-7.105a4.185,4.185,0,1,0,2.945-1.213A4.137,4.137,0,0,0,843.741,1295.339Zm9.443,6.7a.858.858,0,0,1,.858-.858,2.914,2.914,0,0,0,0-5.828h0a.858.858,0,1,1,0-1.716,4.631,4.631,0,1,1,0,9.262.858.858,0,0,1-.858-.858Z" transform="translate(-837.997 -1292.36)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22.88" height="22.88" viewBox="0 0 22.88 22.88"><defs><style>.a{fill:#4d4d4f;}</style></defs><path class="a" d="M1.341,1.341H5.362V0H0V5.362H1.341Zm0,0" transform="translate(0 0)"/><path class="a" d="M392,0V1.341h4.022V5.362h1.341V0Zm0,0" transform="translate(-374.483 0)"/><path class="a" d="M396.022,396.022H392v1.341h5.362V392h-1.341Zm0,0" transform="translate(-374.483 -374.483)"/><path class="a" d="M1.341,392H0v5.362H5.362v-1.341H1.341Zm0,0" transform="translate(0 -374.483)"/><path class="a" d="M61,60v6.7h6.7V62.681h1.341V61.341H67.7V60Zm5.362,5.362H62.341V61.341h4.022Zm0,0" transform="translate(-58.274 -57.319)"/><path class="a" d="M279.044,278.044v-6.7h-2.681V270h-1.341v1.341H271v1.341h1.341v1.341H271v1.341h1.341v2.681Zm-5.362-5.362H277.7V276.7h-4.022Zm0,0" transform="translate(-258.89 -257.935)"/><path class="a" d="M65.022,241.341H67.7V240H61v1.341h2.681v1.341H62.341v1.341h1.341V246.7H62.341v1.341h1.341v1.341h6.7v-1.341H69.044V246.7H67.7v1.341H65.022V246.7h1.341v-1.341H65.022Zm0,0" transform="translate(-58.274 -229.275)"/><path class="a" d="M121,120h1.341v1.341H121Zm0,0" transform="translate(-115.593 -114.638)"/><path class="a" d="M361,120h1.341v1.341H361Zm0,0" transform="translate(-344.868 -114.638)"/><path class="a" d="M305.022,66.7H307.7V60H301v6.7h2.681v1.341h1.341Zm-2.681-1.341V61.341h4.022v4.022Zm0,0" transform="translate(-287.549 -57.319)"/><path class="a" d="M393.681,241.341V240H391v1.341Zm0,0" transform="translate(-373.528 -229.275)"/><path class="a" d="M361,360h1.341v1.341H361Zm0,0" transform="translate(-344.868 -343.913)"/><path class="a" d="M241,330h1.341v1.341H241Zm0,0" transform="translate(-230.231 -315.253)"/><path class="a" d="M181,302.681h1.341V300H181Zm0,0" transform="translate(-172.912 -286.594)"/><path class="a" d="M211,270h1.341v1.341H211Zm0,0" transform="translate(-201.571 -257.935)"/><path class="a" d="M62.341,330H61v2.681h1.341Zm0,0" transform="translate(-58.274 -315.253)"/><path class="a" d="M61,420h1.341v1.341H61Zm0,0" transform="translate(-58.274 -401.232)"/><path class="a" d="M241,60h1.341v1.341H241Zm0,0" transform="translate(-230.231 -57.319)"/><path class="a" d="M241,122.681h1.341V120H241Zm0,0" transform="translate(-230.231 -114.638)"/><path class="a" d="M242.341,211.341V210H241v2.681h5.362v-1.341Zm0,0" transform="translate(-230.231 -200.616)"/></svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16.203" height="20.018" viewBox="0 0 16.203 20.018"><defs><style>.a{fill:none;stroke:#00cc69;stroke-linecap:round;stroke-width:3px;}</style></defs><line class="a" x1="12" y2="15.815" transform="translate(2.102 2.102)"/></svg>

After

Width:  |  Height:  |  Size: 272 B

@ -1,58 +1,83 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { toast } from 'react-toastify';
import Avatar from '@material-ui/core/Avatar';
import React, { Component } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import Avatar from "@material-ui/core/Avatar";
import CheckIcon from '@material-ui/icons/Check';
import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
import HomeIcon from '@material-ui/icons/Home';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import SettingsIcon from '@material-ui/icons/Settings';
import UpdateIcon from '@material-ui/icons/Update';
import ReportIcon from '@material-ui/icons/Report';
import ShareIcon from '@material-ui/icons/Share';
// import { logout } from '../../../../Redux/actions/user';
// import { connect } from 'react-redux';
import user1 from '../../../../../assets/images/user1.png';
import user2 from '../../../../../assets/images/user2.png';
import user1 from "../../../../../assets/images/user1.png";
import user2 from "../../../../../assets/images/user2.png";
import mobileHome from "../../../../../assets/icons/mobileHome.svg";
import mobileAr from "../../../../../assets/icons/mobileAr.svg";
import qrcode from "../../../../../assets/icons/qr-code.svg";
import mobileBasket from "../../../../../assets/icons/mobileBasket.svg";
import mobileBlog from "../../../../../assets/icons/mobileBlog.svg";
import mobileMail from "../../../../../assets/icons/mobileMail.svg";
import mobileProfile from "../../../../../assets/icons/mobileProfile.svg";
import mobileDanger from "../../../../../assets/icons/mobileDanger.svg";
import mobileLogout from "../../../../../assets/icons/mobileLogout.svg";
import './NavbarDrawer.scss';
import "./NavbarDrawer.scss";
class NavbarDrawer extends Component {
state = {
dropdown: false,
}
};
render() {
return (
<div className="navbar-drawer d-flex flex-column">
<div className="navbar-drawer__header d-flex">
{
this.props.users.map((item, i) => item.status === 1 ? (
{this.props.users.map((item, i) =>
item.status === 1 ? (
<React.Fragment key={i}>
<Avatar style={{width: 60, height: 60}} alt="Remy Sharp" src={item.image} />
<Avatar
style={{ width: 60, height: 60 }}
alt="Remy Sharp"
src={item.image}
/>
<div className="navbar-drawer__header--right d-fex flex-column">
<h1>{item.firstName + ' ' + item.lastName}</h1>
<h1>{item.firstName + " " + item.lastName}</h1>
<div>{item.title}</div>
</div>
</React.Fragment>
) : null)
}
{
this.state.dropdown ?
<KeyboardArrowUpIcon style={{ color: 'grey', width: 40, height: 40 }} /> :
<KeyboardArrowDownIcon style={{ color: 'grey', width: 40, height: 40 }} />
}
) : null
)}
{this.state.dropdown ? (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: false })}
>
<KeyboardArrowUpIcon style={{ color: "grey", fontSize: 45 }} />
</div>
) : (
<div
className="navbar-drawer__header--dropdown"
onClick={() => this.setState({ dropdown: true })}
>
<KeyboardArrowDownIcon style={{ color: "grey", fontSize: 45 }} />
</div>
)}
</div>
<div className="navbar-drawer__bottom mt-5">
{this.state.dropdown ? (
<div className="navbar-drawer__dropdown d-flex flex-column">
{this.props.users.map((item, i) => (
<User data={item} key={i} />
))}
</div>
) : null}
<div className="navbar-drawer__bottom mt-3">
{this.props.links.map((item, key) => (
<Link
to={item.link}
key={key}
onClick={item.onClick || (() => (item.link === '' ? toast.error(item.toast) : null))}
onClick={
item.onClick ||
(() => (item.link === "" ? toast.error(item.toast) : null))
}
>
<div className="navbar-drawer__bottom--link d-flex">
{item.icon}
@ -74,49 +99,116 @@ class NavbarDrawer extends Component {
export default NavbarDrawer;
// export default connect((state) => ({ isLogin: state.user.isLogin }), { logout })(NavbarDrawer);
NavbarDrawer.defaultProps = {
users: [
{ id: 0, firstName: 'محمدرضا', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user1 , status: 0},
{ id: 0, firstName: 'اکبر', lastName: 'خراسانی', title: 'استاد علوم تجربی',image:user2, status: 1},
{
id: 0,
firstName: "محمدرضا",
lastName: "خراسانی",
title: "استاد علوم تجربی",
image: user1,
status: 0,
},
{
id: 0,
firstName: "اکبر",
lastName: "خراسانی",
title: "استاد علوم تجربی",
image: user2,
status: 1,
},
],
links: [
{
name: 'صفحه اصلی',
link: '/',
icon: <HomeIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "صفحه اصلی",
link: "/",
icon: <img src={mobileHome} alt="صفحه اصلی" />,
toast: "",
},
{
name: 'تنظیمات',
link: '/',
icon: <SettingsIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "واقعیت افزوده",
link: "/",
icon: <img src={mobileAr} alt="واقعیت افزوده" />,
toast: "",
},
{
name: 'به روز رسانی',
link: '/',
icon: <UpdateIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "بارکد خوان",
link: "/",
icon: <img src={qrcode} alt="بارکد خوان" />,
toast: "",
},
{
name: 'همرسانی',
link: '/',
icon: <ShareIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "فروشگاه",
link: "/",
icon: <img src={mobileBasket} alt="فروشگاه" />,
toast: "",
},
{
name: 'گزارش ایراد',
link: '/',
icon: <ReportIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "بلاگ",
link: "/",
icon: <img src={mobileBlog} alt="بلاگ" />,
toast: "",
},
{
name: 'خروج',
link: '/',
icon: <ExitToAppIcon style={{ color: 'gray', width: 35, height: 35, marginLeft: 10 }} />,
toast: '',
name: "پیام رسان",
link: "/",
icon: <img src={mobileMail} alt="بلاگ" />,
toast: "",
},
{
name: "ویرایش مشخصات",
link: "/",
icon: <img src={mobileProfile} alt="ویرایش مشخصات" />,
toast: "",
},
{
name: "گزارش ایراد",
link: "/",
icon: <img src={mobileDanger} alt="گزارش ایراد" />,
toast: "",
// onClick: this.props.logout,
},
{
name: "خروج",
link: "/",
icon: <img src={mobileLogout} alt="خروج" />,
toast: "",
// onClick: this.props.logout,
},
],
}
};
const User = (props) => {
return (
<div
className="navbar-drawer-user d-flex align-items-center"
style={{ backgroundColor: props.data.status === 1 ? "#eee" : "white" }}
>
<Avatar
style={{ width: 55, height: 55 }}
alt={props.data.firstName + " " + props.data.lastName}
src={props.data.image}
/>
<div className="navbar-drawer-user__right d-flex flex-column">
<h1
style={{
color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
}}
>
{props.data.firstName + " " + props.data.lastName}
</h1>
<div
style={{
color: props.data.status === 1 ? "#00CC69" : "#4D4D4F",
}}
>
{props.data.title}
</div>
</div>
{
props.data.status === 1 ?
<div style={{ position: 'absolute', left: 24, top: 16}}><CheckIcon style={{fontSize: 40, color: '#00CC69'}} /></div> : null
}
</div>
);
};

@ -17,6 +17,7 @@
width: 100%;
align-items: center;
padding: 0px 8px;
position: relative;
&--right {
margin-right: 10px;
& h1 {
@ -31,6 +32,11 @@
letter-spacing: -1px;
}
}
&--dropdown{
position: absolute;
left: 10px;
top: 10px;
}
& img {
width: 100%;
height: 100%;
@ -38,9 +44,32 @@
// bottom: 35px;
}
}
&__dropdown{
width: calc(100vw * 0.8);
margin: 10px auto;
.navbar-drawer-user{
padding: 10px 10px;
width : 100%;
position: relative;
&__right{
margin-right: 10px;
& h1 {
margin-bottom: 0px;
font-size: calc(100vw / 22);
color: #4D4D4F;
letter-spacing: -1px;
}
& div {
color: #4D4D4F;
font-size: calc(100vw / 34);
letter-spacing: -1px;
}
}
}
}
&__bottom {
width: 100%;
margin-top: 50px !important;
margin-top: 10px !important;
&--link {
width: 100%;
align-items: center;

@ -1,7 +1,7 @@
import React, { Component } from 'react'
import QrReader from 'react-qr-scanner'
export default class Scanner extends Component {
export default class Scanner extends Component {
constructor(props){
super(props)
this.state = {
@ -22,19 +22,20 @@ export default class Scanner extends Component {
}
render(){
const previewStyle = {
height: 300,
width: 300,
width: 320,
borderRadius: '10px'
}
return(
<div>
<>
<QrReader
delay={this.state.delay}
style={previewStyle}
onError={this.handleError}
onScan={this.handleScan}
legacyMode={true}
/>
</div>
</>
)
}
}

@ -1,17 +1,18 @@
import React, { Component } from "react";
import Navbar from "../Home/Navbar/index";
import Footer from "../Home/Footer/index";
import {Link} from 'react-router-dom';
import Scanner from './Scanner/index';
import LastQr from './LastQr/index';
import { Link } from "react-router-dom";
import Scanner from "./Scanner/index";
import LastQr from "./LastQr/index";
import ReplayIcon from "@material-ui/icons/Replay";
import book1 from '../../assets/images/book1.png';
import book1 from "../../assets/images/book1.png";
import './index.scss';
import "./index.scss";
export default class QRScan extends Component {
state= {
state = {
value: null,
}
};
render() {
const { data } = this.props;
return (
@ -32,35 +33,40 @@ export default class QRScan extends Component {
<Link to="/">بازگشت</Link>
</div>
<header className="mobile-qr-scan__header d-flex flex-column">
<h1>اسکن بارکد</h1>
<p>لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته قرار دهید تا اسکن دوربین انجام شود</p>
<h1>اسکن بارکد</h1>
<p>
لطفا دوربین گوشی خود را روی کدی که در اختیار شما قرار گرفته
قرار دهید تا اسکن دوربین انجام شود
</p>
</header>
<section className="mobile-qr-scan__camera d-flex justify-content-center align-items-center">
<div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex">
</div>
<div className="mobile-qr-scan__camera--shapeCenter d-flex">
</div>
<Scanner />
<div className="mobile-qr-scan__camera--shapeTop mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeBottom mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeLeft mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeRight mobile-qr-scan__camera--shape d-flex"></div>
<div className="mobile-qr-scan__camera--shapeCenter d-flex"></div>
{this.state.value !== null ? (
<div style={{zIndex: 1000 }} onClick={() => this.setState({ value: null })}>
<ReplayIcon style={{ fontSize: 40, color: "grey" }} />
</div>
) : (
<Scanner parent={this} />
)}
</section>
<p className="mobile-qr-scan__text d-flex">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای</p>
{this.state.value === null ? null : (
<p>{this.state.value.text}</p>
)}
<p className="mobile-qr-scan__text d-flex">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد
نیاز و کاربردهای
</p>
<section className="mobile-qr-scan__lasts d-flex flex-column">
<h2>آخرین مشاهدات</h2>
{
data.map((item, i) => (
<LastQr data={item} key={i} />
))
}
{data.map((item, i) => (
<LastQr data={item} key={i} />
))}
</section>
</div>
</>
@ -73,10 +79,10 @@ export default class QRScan extends Component {
QRScan.defaultProps = {
data: [
{
title : 'ریاضیات گسسته خیلی پیشرفته',
subTitle: 'پایه هفتم ابتدایی',
title: "ریاضیات گسسته خیلی پیشرفته",
subTitle: "پایه هفتم ابتدایی",
page: 13,
image : book1
}
]
}
image: book1,
},
],
};

@ -39,29 +39,29 @@
}
&__camera{
margin-top: 20px;
width: 300px;
height: 300px;
width: 320px;
height: 245px;
border-radius: 10px;
margin: 30px auto;
position: relative;
&--shape{
position: absolute;
background-color: rgba(80, 80, 80, 0.541);
background-color: rgba(0, 0, 0, 0.8);
}
&--shapeTop{
width: calc(100% - 100px);
height: 50px;
left: 50px;
width: calc(100% - 60px);
height: 30px;
left: 30px;
top: 0px;
}
&--shapeBottom{
width: calc(100% - 100px);
height: 50px;
left: 50px;
width: calc(100% - 60px);
height: 30px;
left: 30px;
bottom: 0px;
}
&--shapeLeft{
width: 50px;
width: 30px;
height: 100%;
left: 0px;
bottom: 0px;
@ -69,7 +69,7 @@
border-bottom-left-radius: 10px;
}
&--shapeRight{
width: 50px;
width: 30px;
height: 100%;
right: 0px;
bottom: 0px;
@ -78,10 +78,10 @@
}
&--shapeCenter{
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
right: 50px;
bottom: 50px;
width: calc(100% - 60px);
height: calc(100% - 60px);
right: 30px;
bottom: 30px;
border: 3px solid red;
}
}

Loading…
Cancel
Save