From 5fa05022bb352f3df8f8eb31d84a5cf1de205b33 Mon Sep 17 00:00:00 2001 From: BFlat Date: Wed, 30 Aug 2023 08:03:07 +0700 Subject: [PATCH] added sidebar --- .../public/fakeyou/FakeYou-Logo-Mobile.png | Bin 0 -> 12548 bytes packages/fakeyou.com/src/AppNew.scss | 1 + .../layout/MobileMenu/MobileMenu.scss | 26 +++ .../layout/MobileMenu/MobileMenu.tsx | 44 +++++ .../src/components/layout/SideNav/SideNav.tsx | 142 ++++++++++++++++ packages/fakeyou.com/src/scss/nav.scss | 159 ++++++++++++++++++ .../fakeyou.com/src/v2/view/PageContainer.tsx | 20 ++- 7 files changed, 384 insertions(+), 8 deletions(-) create mode 100644 packages/fakeyou.com/public/fakeyou/FakeYou-Logo-Mobile.png create mode 100644 packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.scss create mode 100644 packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx create mode 100644 packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx create mode 100644 packages/fakeyou.com/src/scss/nav.scss diff --git a/packages/fakeyou.com/public/fakeyou/FakeYou-Logo-Mobile.png b/packages/fakeyou.com/public/fakeyou/FakeYou-Logo-Mobile.png new file mode 100644 index 0000000000000000000000000000000000000000..fdc88d0ef65f9ebe499c165fbd7d954bdadc4131 GIT binary patch literal 12548 zcmV+fG5gMmP)Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>DFquh2K~#8N?VSgF zR8`i%&wDdzq>(}@B{UOyN0BDQ1s4=)ioNc-i@N&RWnIv<>{?fG-L>nYfKmiR5D*Bx zg-(D35(1=A(tBny^S*Q5+)Spt>F>=1nE&smIrko;Kz?2KYsl9x#EdJ zW+TUr9m^~%EG&Ba?YG~FMcAkP_;HP~$eA-|@&pUAv$IbnBkark_;HRG5vD_utX;eI zSN5fT{5WR*{P`a<-LcD`5cW^}__56wUwrW;(;0^p6ciK&BJ7{~@nelE3f0Vg2>a)L z{Fw9MhaY~#^u#4{a&mGxgnb)7ehfU1FdcD=TM_oH{P+Q&?ThJ#+bmtWbQ$}0ey()} zA@%k34NNyYA_igK){o4n*vD2+9I|iUzKrnj@Gv&z5oO3ugbn>%YXl&N4>L?8za95~2ccSXSi;4b!K{anp__St8jv)9}!q$2D` z`?(sC!(;9$Z@&5FTkOaCx!P!lR99Emu-DpaGnsdRgsaA5o{9W$;C~ket{|QbWE;SmBmOZ8)8&Kj1 zxq#TPb?^$pUPHyu{g!T~RJz@J*=HOx7-5g<#{`PN{rKaL|IPkP!W@Ks%C{sTjg5^O z_FRggeQu7qQY~>lc=VqLdt5(^w#e??yZ5j^kqCt*g(2)qjCkFq`skyN<_87_2C$(b z2*-|ta4w&X3<#G?nB*8--EU)}AB4&?rKhKFx#5Nzu4hvs(b3US4+_ ziXmj40DZC>A{S#cW@gs`EA*Ocl(#Fn=fn&yv8#kVb*Cde$MUC|B+qVy!k_2sc^+<#bMZBU^6dpWp-n>`YP%+5a zN%oX2gyIWKa?F4M1Nt-ZnuAuT-+udTqqBd5>k%f3ctxq6L{d^xl)e6_s|Wp8|6>Db zgtBrbIcCU^Aw#dl>M&$O(Uyn5zte7&kdTlzOcYUEsp64mpMCZ@HdGAV&uc(%w7p%p z$OOlc;bmCl?rQVMkp)>{ZBu$ksSnq z3C=MdVd7O!S7g_&UAuer>eZ7?ISrXNOcYU6sc_3nQQYg=qyyc%AF_eGp#3?DiB~mf zI}OOl$k>mYN*tSViQc_?_hO=mqDuAr^UuG)^Sq*ViSEZ`AQTm|k$nU@0lENr|CxBz zLQxrHLwT~B&`FVrB8n+h2W0l_*?(q3MbKv)0R5^pY~%!0RZMUW+6pMchYhbfrXX9k zY}qPD_>pM?1jUr<_19m2gNceDT)YJOFTQ0XC#kMwg7aLhm0@Nfl@WB0SC_jxF(0%YR2o;rV!a0P71|~TV9<7Hk@v7lb?1XHiN zB1-kzYp?yCiHe~6@>>w{&asgTG&M27dGP(wk%?CYe?-1OR4SEXyOiwTn2g(d5H^$@ z{hIZl-@1d1T*O6}0%7Tcxsv(Uzy9^%X9yd*2Of5WQ#ouPjqFPG#v54B391qCE%L}Ck37t#+^4J@^lLYOaK?VbhpbA4?}Y!8t9q~{ zO@Dt|R4k8Z;siG35yFv7(C^%180d6{k2a7^sUAWS5)$Is zP&UYp(*L}cjXZ;MbEUe{+zQQ+1{7(_raS`=IJ(74*ua2rzJN*A$fi_JJ@wSnOq35? zYIUD{?(m(VG<^^zwtA?@2$h_aGayo*z76dti=CpnnhDm(qExpdO2kXi9xjxWvXSrT z(4j;75QGg|Ep&l@Yp!l5Ie-?)X1 zd{1jX0n!$I7{Q${icQIaZrMtJx;i#8!A`)V$4W(kT_Z=19KnY2P+JGOuNA19AM1XP zqt;x$aWb-g{rU}-(E^?#6ckBjCW+W_Bzvq>ue|cg-U8c1f z>r;_Mixw?bA`nvdpD&nXji8iGMcJuTO_&X3f!-ZDXQDXW!90`5C2&FR%EVR!H5Q=W zg-ZAa^?Ub&kdwVR3y+kF{8G3p$eMI1Ucgt(fpax+gcodaM?b7=7>(`eJJx0hm15I-j%H+bo zeZXQD{JrY zjaVuT9GZ>{E83H}FPe{P^+X*pxEp^q~8}g(mnB;Y)z=YO8^U8JT(4oUOA#B=6Zv+pNJGyu8 zE~~LGNqGgXQcKyubxxc(VOABzWu=-mYt~&%lm&4QuXHUd#%0h(=8{`yUMNKqq$6~y zYYqmaxOiHj+P80?EPj!~=$5Y%uf|-${mC%66MorVWNmj&d=e<4ulP5q3MZdLAZ38 zjXVHf1Ma$Rzz-Y%T%Vr6B_*;?__0URD}Q&G9V3PMAFlz|wX-PSi7Y|H0pik1CHK}x zH4r>fsDJ?A$K3>~r)NXJSN{R^%g+HnVVqx~oP@Gs+)*fk>(p}P<@V{13hL9n7aPih zn*n%SVmzoGx)%aIn-8kT9tQr#8|VSqXZ<)uqXzVg-8at3PHhIa?JOpWIQ>eH6E87Q z-Xj#<^|=C<+8xv{Jp<~G-Ua@a-vNY$vd{Q&72T4bTq*-@2HLC5pgASDy;9AXF=HkZ zWy9GToaAFtzx*tyU;i6$1FzXqoU%bChkld$zCo@-%c1lr!bBrZD-~4FE2^xzW9bop2M3c6@^PP(G0sv^?Sryx8;6p6Bww1 zo_*qA+h(+hT{N*MR!zt&?Io;=xaIkytp#f9Ql7y+wSnq9Nm zr@kKaOMYSl&*7rln#HA|IVI`vva3{m5hnUkg7OMOvcbw<3}p|gt(?YoCQI+Walos1 zSijb}$O8T9U){golYr}O-nJ$KVWJr} zQcXaZ=toAVfLPO8@7a!cZE6DH;1Ot=_a^A(|JTY55D>t_q$#P8v8ND@9=3BK9~=y- z>GJxlO;@V=`uYYbg(7S!RcdN#8Wa7<1VsnvKKmL4=d5iCqSHS8A_xVAY{o!BVi=75 zT^CrtCI@m(m9bfC_}hLD+(4Nw;={wl$l7M?MF87Ws#|WkWg-*($b^3LR{Wof{-%mb zXqx+`7)x%-z`=>oxoZ^svN9VkU9?@bS^bwkiw3r*@D?FQ+qP}PUq%{9rJ_VfZ{(U? zYY4fn1tl7(sR7*w|F+6_nK-FCs8k%RSaJeQC>uVkHf?~HA@Req76mHRHYQpjsZ`?- zCi;;R^O6HDLGk>$&vENCAuK!)CQj}SRaK4f(~l?EtTp`Lfxz|mtQIaecmR_O>_V7m zg``qlN!56-B`8Nyzu)|-t$S(=T$dILg#}fxE!}pldDR~tVv_4{?UR9vYiWC!larI% zgs`C%l1kOTe}8ke^dk$Vsp9S;mQ1v;%O+0hhR6Fr*t@F$&gMxsC#NV{GThz4(zUT3 zVWK3GN+p$s?Z)#C#LLq;SByBY*nN8RY9~fC)KqI=%}VLJJ}xF2_(`rE>cy*>UOm{zz)6IO zl2|EK0>VT;GQ(372F~+7<&-d@-?o#DTAQ5SNxcfOmYs+qR#)RQ>Q36 zK{7g_87rltf~idOBR3J@vNi|zV)p_ zm}nC#r5ZeV@Kx6{xHZA|m*`qZk#0)F4Rx|9n2HB}h`GDc zkv&CNDb>~5-MqEH566ulK%V9i!tT9HYN11?NQj9wguorxR|Hj+jiPLd_zX^%&HN3h z3MSjNR;z8=gRr4Z%#@1iQ7X}1&5sFTp<-nkInW<9t2JhXu5bvAMh6EnB(i4$1Ay=A z*cHi-8qOpG)IZR&YMvBkO67NYdIx@zJOLnL{8hE}Yuu@G%U$38y@gO-W}S`9|86Xk zY!Db|l@*SQl>O$(3^S#=Qro&-X;AWj>5ac9=p_p9Mn#7}Vp2;Hje{A*OlpCOo!F}` z$lqk$!)htQM7x+N6_o{Kq929fZ*|YRZ3$({NI?+{%^W&VEPWCjVEfR(k1|&(>U1iV zI4XsiQuRcb=tp7r>j!(()vFmHOFGyuKCz`DxgZE|qe)26$YQePpq9e?d zYB0h?KVE?D)HqKM+d7?fe`7=)z?<1sbbV8hU&Tf(a26*#f*)$`o65+@*q?{6p+n4+ zDkvz(pWW$YmhxS_=>{K(=6n@zC02WoFR;*azQl6JlseIYHjt~wW z2H}JYIc**yOGRWE5N#_D>+cITTt^{o0+?jr+*#|e7_#f=qPZDvn7Qv;r_<@FuOJ&b zg;A+|z4ht$WH{FnOeTb_JH!xO!A^r|Z=rh7!_xFNPJm(I=ABsU>$H%4(mD^2zsYdP z%ynoF{0-)}bZd~y2pc+uQK@k2bH5j?3uvZurUL}a`@SY)-4Y5rwuIaVTt{4`M&8I~3{+KBRl9QP zYsUCfooyAS1j5<##&?^3`!1_IH*cZOI0(8=zXa`LPZ@eSS6aUSN

ZrH=BR5FTNz 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 a0RIn1?XY?~c2Kea0000$* literal 0 HcmV?d00001 diff --git a/packages/fakeyou.com/src/AppNew.scss b/packages/fakeyou.com/src/AppNew.scss index 33a47a4117..17090ea6e9 100644 --- a/packages/fakeyou.com/src/AppNew.scss +++ b/packages/fakeyou.com/src/AppNew.scss @@ -1,5 +1,6 @@ // @import "./scss/normalize.scss"; // @import-normalize; /* bring in normalize.css styles */ +@import "./scss/nav.scss"; @import "./scss/colours.scss"; @import "./scss/site-refresh.scss"; @import "./scss/CSSParticles.scss"; diff --git a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.scss b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.scss new file mode 100644 index 0000000000..ba9cd3936c --- /dev/null +++ b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.scss @@ -0,0 +1,26 @@ +@import "scss/colours.scss"; + +.mobile-menu-container { + padding-bottom: 4.6rem; +} + +.mobile-menu { + z-index: 100; + position: fixed; + min-width: 0px; + top: 0rem; + left: 0rem; + right: 0rem; + border-radius: 0rem 0rem 0.5rem 0.5rem; + background-color: $panel; + border-color: #ffffff12 !important; + border: 1px solid; + align-items: center; + justify-content: space-between; + overflow: hidden; + transition: all 200ms ease 0s; + box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4); + -webkit-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4); + -moz-box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.4); + padding: 0.6rem 1rem; +} diff --git a/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx new file mode 100644 index 0000000000..5b816d2b30 --- /dev/null +++ b/packages/fakeyou.com/src/components/layout/MobileMenu/MobileMenu.tsx @@ -0,0 +1,44 @@ +import React from "react"; +import "./MobileMenu.scss"; +import Button from "components/common/Button/Button"; +import { faBars } from "@fortawesome/pro-solid-svg-icons"; + +export default function MobileMenu() { + const handleMenuButtonClick = () => { + const wrapper = document.getElementById("wrapper"); + + if (window.innerWidth < 1200) { + if (wrapper) { + wrapper.classList.toggle("toggled"); + } + } + }; + + return ( +

+
+
+
+
+
+ FakeYou Mobile Logo +
+
+
+
+
+
+ ); +} diff --git a/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx new file mode 100644 index 0000000000..3ad1daa9f3 --- /dev/null +++ b/packages/fakeyou.com/src/components/layout/SideNav/SideNav.tsx @@ -0,0 +1,142 @@ +import { faDiscord } from "@fortawesome/free-brands-svg-icons"; +import { + faBookOpen, + faMessageDots, + faTrophy, + faVideo, + faWaveformLines, + faStar, +} from "@fortawesome/pro-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import Button from "components/common/Button/Button"; +import React, { useEffect } from "react"; +import { Link, NavLink } from "react-router-dom"; + +interface SideNavProps {} + +export default function SideNav(props: SideNavProps) { + const handleNavLinkClick = () => { + const wrapper = document.getElementById("wrapper"); + + if (window.innerWidth < 1200) { + if (wrapper) { + wrapper.classList.toggle("toggled"); + } + } + }; + + useEffect(() => { + const handleOutsideClick = (event: MouseEvent) => { + const wrapper = document.getElementById("wrapper"); + const overlay = document.getElementById("overlay"); + + if ( + (!wrapper?.contains(event.target as Node) || + overlay?.contains(event.target as Node)) && + window.innerWidth < 1200 + ) { + wrapper?.classList.remove("toggled"); + } + }; + + document.addEventListener("click", handleOutsideClick); + + return () => { + document.removeEventListener("click", handleOutsideClick); + }; + }, []); + + return ( + + ); +} diff --git a/packages/fakeyou.com/src/scss/nav.scss b/packages/fakeyou.com/src/scss/nav.scss new file mode 100644 index 0000000000..99600e4d37 --- /dev/null +++ b/packages/fakeyou.com/src/scss/nav.scss @@ -0,0 +1,159 @@ +@import "./colours.scss"; + +/* Toggle Styles */ + +#wrapper { + padding-left: 0; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} + +#wrapper.toggled { + padding-left: 260px; +} + +#sidebar-wrapper { + z-index: 1000; + position: fixed; + left: 260px; + width: 0; + height: 100%; + margin-left: -260px; + overflow: auto; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} + +#wrapper.toggled #sidebar-wrapper { + width: 260px; +} + +#page-content-wrapper { + width: 100%; + position: relative; +} + +#wrapper.toggled #page-content-wrapper { + position: absolute; + margin-right: -260px; +} + +/* Sidebar Styles */ + +.sidebar-nav { + position: absolute; + top: 0; + width: 260px; + margin: 0; + padding: 0; + list-style: none; + min-height: 100vh; + background: $panel; + border-color: rgba(255, 255, 255, 0.0705882353) !important; + border-right: 1px solid; +} + +// .sidebar-nav li { +// text-indent: 2rem; +// line-height: 38px; +// } + +.sidebar-nav li a { + display: block; + text-decoration: none; + color: rgba($white, 0.7); + font-weight: 500; + margin: 0rem 1rem; + padding: 0.5rem 1rem; + border-radius: 0.5rem; + -webkit-transition: all 0.2s ease; + -moz-transition: all 0.2s ease; + -o-transition: all 0.2s ease; + transition: all 0.2s ease; +} + +.sidebar-nav li a:hover { + text-decoration: none; + color: $white; +} + +.sidebar-nav li a:active, +.sidebar-nav li a:focus { + text-decoration: none; +} + +.sidebar-brand { + font-size: 18px; + padding-top: 1.5rem; + line-height: 0; + margin-left: 1.5rem; +} + +.sidebar-buttons { + margin-left: 1.5rem; +} + +.sidebar-heading { + margin-left: 1.5rem; + margin-bottom: 0.5rem; + opacity: 0.5; + font-size: 14px; +} + +.sidebar-heading-icon { + margin-right: 0.75rem; +} + +.active-link { + color: $white !important; + background-color: $secondary; +} + +#overlay { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.5); /* Semi-black background */ + z-index: 900; /* Appear on top of the content */ +} +.toggled #page-content-wrapper { + position: relative; + z-index: 2; /* Ensure content is above the overlay */ +} +.toggled #overlay { + display: block; +} + +@media (min-width: 992px) { + #wrapper { + padding-left: 260px; + } + + #wrapper.toggled { + padding-left: 0; + } + + #sidebar-wrapper { + width: 260px; + } + + #wrapper.toggled #sidebar-wrapper { + width: 0; + } + + #page-content-wrapper { + position: relative; + } + + #wrapper.toggled #page-content-wrapper { + position: relative; + margin-right: 0; + } +} diff --git a/packages/fakeyou.com/src/v2/view/PageContainer.tsx b/packages/fakeyou.com/src/v2/view/PageContainer.tsx index 52055651c4..ae63f13ff2 100644 --- a/packages/fakeyou.com/src/v2/view/PageContainer.tsx +++ b/packages/fakeyou.com/src/v2/view/PageContainer.tsx @@ -82,6 +82,8 @@ import { ProductUsageInfoPage } from "./pages/product_usage_info/ProductUsageInf import VcModelViewPage from "./pages/vc/vc_model_view/VcModelViewPage"; import VcModelEditPage from "./pages/vc/vc_model_edit/VcModelEditPage"; import VcModelDeletePage from "./pages/vc/vc_model_delete/VcModelDeletePage"; +import SideNav from "components/layout/SideNav/SideNav"; +import MobileMenu from "components/layout/MobileMenu/MobileMenu"; interface Props { sessionWrapper: SessionWrapper; @@ -188,19 +190,21 @@ class PageContainer extends React.Component { public render() { return ( -
-
- +
+ + + {/* - - + /> */} +
+ { /> - -
+ + {/* */}
); }