From b9cfcfcfb5e4969cdb8713e6a8d712ea9468f38b Mon Sep 17 00:00:00 2001
From: tykayn <contact@cipherbliss.com>
Date: Wed, 16 Dec 2020 18:32:37 +0100
Subject: [PATCH] =?UTF-8?q?:zap:=20=20long=20logo=20charil=20et=20lien=20c?=
 =?UTF-8?q?hapril=20a=20cot=C3=A9=20de=20la=20recherche?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
---
 js/public/img/long_logo_chapril_mobilizon.png | Bin 0 -> 6498 bytes
 js/src/components/NavBar.vue                  | 263 +++++++++++-------
 2 files changed, 160 insertions(+), 103 deletions(-)
 create mode 100644 js/public/img/long_logo_chapril_mobilizon.png

diff --git a/js/public/img/long_logo_chapril_mobilizon.png b/js/public/img/long_logo_chapril_mobilizon.png
new file mode 100644
index 0000000000000000000000000000000000000000..42f774212fff14b056ad60c43caa7d4655415714
GIT binary patch
literal 6498
zcmV-o8J*^dP)<h;3K|Lk000e1NJLTq009^P003YJ1^@s6#)xf{0004mX+uL$Nkc;*
zaB^>EX>4Tx04R}tkv&MmKpe$iQ$>;bfp!pa$WWauh>AFB6^c+H)C#RSm|Xe=O&XFE
z7e~Rh;NZt%)xpJCR|i)?5c~jfa&%I3krMxx6k5c1aNLh~_a1le0HIc5n$<QAXu54C
z<1sOvSrt285ken&0QAeuGUg;H0pIa;j{slqqCCt0+@GUc%~}iyh{UtZFm2)u;^|G>
z;Ji;9W(8R#J|`YC>4L<MTvt4P<D7R{;F)1Fm7FII6N~v4R$7=9OpSPoIHGDg<qK(#
zRnA+SwNiyO?#W*m%IYi2T&FpVI2N%42_h6!P(%qfqO|IySV+=-%*Q|E`XzEH<SK%Z
zV*zDokX=9cAN=mt%1usqNue0f{^B?vBS6P4P_H`9_p#&DPk`VvaHTi><r*;aNqV)Z
zMUH^pZQ$a%sVRHF<qk0TWXPuMN<o@JE(g4y(Kls)fm@(!&FihPkJASrMO`IsfP+I|
zG*8*<KJV^q?d{()jsAWB0Aq4_5sCfZ00006VoOIv0RI600RN!9r;`8x010qNS#tmY
zE+YT{E+YYWr9XB6000McNliru<O~oF4j02F%;^9C7hg$4K~#9!?Ol18RmGM6Rny%x
zi$DuvvkBsgJ1U8ZxZsW$;}XSjOI${c(R}J8j>hj(GZ|%~j+#j#<HV4t!9k6Y3`PYM
zmyjqB1T<=pF^HnFHw`pPH{HMaqfQUcM^)Xr_uc#Yz3%#b-}{ul_g2-tRrRZLPMvcK
z2nYxW2nYxW2nYxW2nYxW2*?^Li$Y2E0&p9E-2hAjFjXnV@VNs5N(UqrfU^Lc4qy?0
zUn-@xltaUR$1mb3lC_~r0|H8Bj@FT!mN!rDD2Ikuk!<G9SW5E9(6s>p?LJ4(Be}*f
zM?WQ5RqBl&PCK@d{I-Z@0RaKUotw2JC)17nOZ_EIVKgR_?AZZ2>|0^j29(KIJyj%>
zD2z$7-ii#~WiO9=E(9=_<N;;gZ@Yz|8&KlJ(v##w051X<=<&$FQh%X;H?ZO}B-b1M
z-bnJIFbo0$GMS5`Nq%UNRO(4SZ}|JIrT$V=4UPT^$-Y89+YHwylB@|sA|N1@IaovT
z9+IsVa`_d>{v^*aTzk0GU+x`4qxa3ZK9uC6hL@jDa(EaX0RaWgzr!qZkR%t9JUZvz
z;|%vqFXfk0BsUux-PdsMAqEj`J;^h}FbN2VJ@+a}-ez$TX&`w$$;!NE4m8}mxRhUV
zprOIrNme+X8AEbz-ZMWY*(D5{fB>&~w;#zjEmF&4B<n2C?QXb#OUb&CkUZAV;1!;d
z&v_)5<UIER$v$ED1O!;;O$Ev8ELy`mB#(`FzRE&Mb*1{kmziEP#`9I;h_|9mTqC((
z7)k*FJI$5BBxf4t+Xj+1`g-KbZc;vuD%F?1%h1?a3Cih7@^+FN#V&Jd7*YWN|1a%d
zWO4g=g5<!M<t;Ikb3v)T{1iiDrxZ|Lf092Hz3`?GVi3^D$)&FZ4(H>qB#%#6<{O6c
zZb_@nX?yaTym(h9Eler3N-1?cfP(>i3BaV_FB8y-@l^ol<@|difSUk}R7$;?u*@}v
zzYQ%_hBfJPx2IVCktD~4aTd^trI<De=5dk(QYdedVa~o-iZ8ya#Ug!87#0Bmsm-&x
zsNJEM<=tbLvwu&k{K^#HeQ(R(SBGH{5ReX(QY!$gNU=zhiZqO5w=}ZbrD=n)MNzK`
z!y+J{WML8j6o7rxC_GJqu}Ls1LmvhNlq^2B{5_S#Q$d0W2<Y5cR?Y;|44@(OVL(91
z;*)YA7?X;$DjZi55Ky{MN^OJLXgs212!>=20Chn<3JB;hYSMnLEC|JxU~Kl6{|$W?
z5Kxu`Qv+a+QXv?dzP32@T|hut5{zqJ7oA{i2de!o^j$ze$-}l)eNel%jN}MQ=s3ek
zjsXFs50Ym%P98X*JsY;W90_Ye3&~!g`vL+=o?vQ8Hd*HJvbZ^B(rQ$9l5-p<#62Cl
zE+C+6NM@>IE-xtRNvx6!^qGhwD31!=77$Q21aq(@w{LFpa8<0v+!sME_lGVE2q-&}
zIm>Za8%bVSj7D4?K`t-npT81NHUq4?oD6Xp$ty{oPO>(9nNBqZu5--ott1c2vhstZ
z5;{(f3rCHV=fE0Ia-HS;@Y}){>QrOlXO20(B+llIicx7-0CNBwYPn?zfMb+WAw5Ik
z7z^Nf`Tq(4>j3;WfN2>Hs+j;zvRqyXV9$sIL}vjQpEIu7+Wf~DZRiK!Q~(D6=nh~#
zfVlu(R!TL6VNo=KsRS?!z%iCvo(3>J)i^_v6CA9zoaE5ZHL2lW05I>@3Z39Nt3maN
zqkmgTM!Aju)X?S@0GD{ye}u!x_`bxu1r(2D`bCV1>wL<o^sH<&fPc1JUI*Z0rPQ*7
z?@}Yb3K^750Jg}4DiqzMY$auHld_poCnx|%0Qg$Ys@n))0f48KQfbCwDIu7N@(yXE
zGNSJ41Z7qLxE;W6Jihrj=`R!Zhdx!}l@gwihXD9GwD)Td09ygP4dAy*srSl_V3bm8
zNS+N~Hh`{%Tka=0M=3S0&=1$k;Y>%8XC)}MyNF;P1E_~SeqodR8lc0+=K~m%pzPrQ
z-T<&%MC?sDzx4n<1@I<-!6^)?F>>~{3F`|mkeVczw%>@1CWy<YX*0>b2_%>{$!m~D
z{f|a$9$Zzz<Z`&>(D}A+w+G4;BrkRJ$x@QNqgI$GJOE&r<=THKrKTom_pYMf4FS*x
zKu=-)9sqg)*d4&(0M1WP_Ba4X$)N6?Q*ICW_doz&PJ>_ooC2VW<yvoPN80F?(O7!H
zaqTUURI_Yzl!Q}J!t?NChXmLSz_H~@FiNS%0Q|&qc^H6O6RSuhM*+Cpa`}S-Yyy28
z6EhblNgKDvDEkc0`}(Eu{i9Z<!5Q><Yer+~E&vNf-5VwodX<RCPZns<^J#OGI=Qrj
z=i!ic7zf3~_n`xtk2YMpf#gF<sgIM`U~Joy+W}mtlxj@a;J)zN!5R*o-P~7)-34~b
zx2X+<B5G%&xr|n-W&l&=*B+P#;1-cI^RZIY+EPVRf!9lZY>>PHz#@Y^rYnFS0r+Mt
zf+2a37_CgWUnw=efHwO|4;3PQ`V!1>F;s{&B$&TOTz?M%zJquX$-QLE9V`QPqexZL
zlv1Uf+c~PA-|qnZvzX+a045kNUqbQ$rPRVW#+}I)!_Mj`!;S~8g58Lj|9c@uxj&Cl
z?u0@=I>})q7h599pC?(JuxOW&_plNjgDxZQ@QzH5B>R(m+p@j?T2TW9vwhDhl5bgf
z;TdlUhUDG=F0j;dX9}xH9O+@Sh|N*zSQn9Y;;3nbvie6P50n*mgh*Tsvg$4m3C}x?
z^tFoQNN87u17%)q6qRCGM;QmADt!;Y%ZAHmlI*XPiq6AL@)s7C`Wwlr6xw>fWwqOA
z`TJ=eWsVTrQ2w(GmNI`=!hIPen1E81Vid_YEc|ej$;OdiKu-XdTFSpwjDdy1COz2H
zmT?|so(%KO)DJSW!2|?!HffCj{?&5%iu{xgCKc&en7uYX0q{R5wbM4a--XWOo1bj>
zH0<!kwZSCitOM|8c}}IRA_=+!*bUl$2LLuhZ|`nGN*=?WsE}Vvk?RfEfv(Ul7`4&|
z>qLTXk6ok+8S^a}l>NM@fBA8V2LKoa9Y1Czm=i69PEty>WK1wy08BR!%%0HO)wWX#
zdceFrJzF}s)gayU^&l-9dPCc&&WCmg%#R>%gx+DA3gA%ypJ&j?m9iL&gAP|1C<{Xa
zbg05p0A?WChiFeJqo0svwS1RN0A3S)yCuVk&=bH#LejfP{T0&gg#dmJU_(S12f^&4
zkp%Mr{3XWyJ)i?UzX2W2P?w__v;g=F+Ozy=0M9{(5X8YZp?#A8?e_2ifJxZ-BmgB7
z{#*cGh4#(qA|$s!>VFw2_)#gPNOBU)4tVG05{ya5T4b??rxnbopd+tM`ub=Y?51n3
z;Ht5fXTBpJy2)^@8S%YC6@bg2!wr0Qs~Vu=apL62iL$|*Ed<u;xUW^Dx2UAew?>rl
zDuDhO+F(wI_<qYg$m78n{Soz>8DlJ54jt~|TlNyzH&1MsY$#_nv@y92BXbrLS6@yS
zB2U8>GeCAr^D)!)P=AZ@W_pS%Rt<Elk?A8GA>yUU*!!HLOxyPK-m;=>wOo&*CUp~O
zB<a9?9XbS}P=a|qX1(>YqQxbK+}{jDdtN6cn2SB?Uj<-*ql{@O63oUNb=PG>ETqoK
z9(A|~h9cQj1Gob^h}XC7c}OYTM3T$pW34r{Cdmsd1anb}1k)$SK4A;wd&O{Vorut;
zmE=Ri{fl!3!xl?@z6VQH0(d5c!TXjFXdwiX<oBs#f<EN&d@G_|0Fn~SrJnC_x1)^N
zDSoR~u_M^fOH_bD>v>5Q+oS}uQKYRTb>Ep1!Th6zFZRea1o_xsUQdx=y35aIgMmd%
zt%VL!%*O}-CiQKG{I|)WclwHpw*ojP;-2j}BB~7|0sLn>82ko0Cg^HUb>NJQ+P2p7
zzOk@}muyS1JqqsFqKOd%lsgt&I1#{)3$$IGl<?W_dM<QPc-Hdw!)*j}pyB4vp;I5E
zg<Ty3C6{1K6V<d+WZRx@BbcoYBc%_)><@Ru=mH_1J!B#uFUDOP(VQ<flr+!?opWS1
zbi58CBn4Bdhp7PWkuqEuk`ckog?3MP7Vg-s{s5{R3*cLZ-+bsSjIROs1Axb&eX#z`
zF(z7J53C#q;2#`qoGIgRkbJLk0RH5-|5^ZFX@>=;7WOcpIL6*J&^y1Th14kWylW75
zo=y4Xj<<+yO+r2p-O^;IdD~Fl3x@kP<&*^gYb<s8<QVz2L)4sYQQNuz_z%Z(iz1A^
zQ7Y0}05|3tU%Lwtx(s~}I_m5Ko#N8=Y*Y|r8jf~1M5uYyDU82L08d63c`Gd6XO82!
z-&hE+n~<CBx#!^y{GIHn_RJC0XS|TdFR;U9!Ss6~B{gZH_nByt`Z6E4q)ag1u)Odl
z=<VM&OtB2s!Fl>{z2UxB^XmM_Qs)mM+S<=yFWLrRp9rJy-yM_g_=E)Wo<${W!%rN~
zeiT7$C$%%d>>^T3Rs^F&TC=_5O4w5?d>Qs#yH$B(Hy;BW<ES}e97Pe#yE2wkO#9k9
zh>?@qK`<A&2qvGYO&@7q$^>KExoOJNTc=wFNUoYR3OoCtm~1!=4gzuEG?>!|KvtzC
zj%T+x>@CW}renip*x3gn7ZYGlsW}9|evW6e@Yjih&Cpo~v%+=IxlL?#lPetNfO8xZ
z@)5@vYx}NGI3%j1>dJKJ9l}>FD)}!X)TA`ReoRT-n|C4@$s}%y`b;}azMq3&TJk;~
zEh<(Ujx&*J41$T;rgj<8d@}q$8=)#D$<h|(bhZL^qkKiK0nTE7Xm4cYg*+C(eG!u1
z9~=w9m;%Rw%gtg;!gsnoVty`!-2h&Zh6E#trq)Li4E*=yvm%%+c}Bj^EjE|YIqf#3
zB3vzo*EA%UBOTX#ygiq~zDu%?#eS0p{_ME6A37iQ1n`(c#hL@1T+K#qRnXqTHmU1f
zk2cJA5cuH<-z#cCXz^H((!ffCG`JJN^med!F$iWuo&?k8E0B*t&^tC&FmD&Wf}M9G
zk`PP<?74_HL%V=SVLR+Q5;br;j}?Ls9M^_)GIFVbHeTEMdM$tp;oj=5gWWmpb3~^S
z0kj{NEwAzJ4pqEhA)_4##wfvTDpCV&YKckro?+2hkAU6^Gx^iJ7(>nL7onrpI0$Bw
z=li<yV+<@(hsRM1I~wkS*?+1{0{AwxF&+u~X)XL>wYECOp@PTB3nh$|25sbv1f!H%
z4YSi#u_T!F7SXlAqPmQ-44COL2&UFy2kGv3_a^v9$huaytX3^oo!vSSxqJ=Usmz9l
z0sPjZoSq54HS#3#&5rB4bRdG6Z<1hO(IqR|kzg8Nj?6q1=EO^HLmN4L$_8|Jy{%&_
zBXnP1W29?!tIDXuU2W^qNyudg^zM$WAKwD-J<oouO4z@pFcyk|{BQhv9D+Hp9aSX2
z95!$i%wD}V58(BVPVME8Qd}R@mw2lq#O5r}tsUwtB~(NEkJzHXH$bO|*z8%})`b0A
z3S*%d$UVO2<J==m@+XNYJNlRu8`9M=p=~7al7Td8VRnd`5wq+nnEhzlq^DNLK&kP3
zXO{z3Rz4rD^a`sx0m0l3`|&lc0Ir8lZ03u4$2H&G*UAW$cwHHP@7#@pKf2T(lLT{u
zHT*h0c1tkXY-*3``MC)uvQ47e<an-U1aY)M!M#(oJfjYGd4?|Q;N)@&fSVoHAA^ob
zii715W7<cG=>~g%;dc1#N_I$sse^x7gF;r;^$xxDC6BV_z`p12A{f_B(qe}Mv$sc^
zYM^~EY%5k)(uC{C+JzmMTn0eLj@j%P??HR>#&zbahkZA&4quFWvth79+F62lr<axt
z<oxwqEnt?FU?e(nW`=4~5(x(II~!?6!m?f4wysFn(H?CY<*<h=g59OR5cGmQ&S@)j
z`o@lkDj}Bv4!g^R@Za^xU*v3#m0jR>2KnfS#j#wGo1yPHrPLCa1Oou~TExyY&@Ukg
z%!*+6s8okZC72f-*Um$<q1TnDYkEc<eu-nHoC_T^SZoyI;QE^#<Fw7+Wl;g;PxqW;
zHjHnFv5>X&q5xc-^QXJL9wNEGa8h9!YSMRMkM0~9Vau53c=nTsLEIJgNZ1D)&s9Tv
z;@avxH^L6mXnAfc+!4mEXzCG;=LSK0mfD^jAJIP}kbX2Z;eQ}r7g0sxMpGXHciPCi
zQXs^^(7R5i^0&k7?(fPwyasN2o-3OANRM|}ZF%-H?0n92T!I;u!x68T?%BylKr)8k
z2c6#{_k;h?V}K@=U|OJ40J<cUo1kNl`eTO&?`HXcbK#E5XqL&|Go}R71fB2qUd#1|
zp$*V~G8ny{f<1HJ?-A`i8W;OO=Q*jfT%QL&r?RAQC5yUSY);FtBN2L9Hiv5Hs9_uV
zOo7gmQY-!6HP1%VB7YkUeM09L=<NIXfsxChGxJ|+A;u}tS^x6GG!BC{EZZ;%=?4^h
z@dFAEEWIk0^pe9&RU|()<asFcR6$#QifxXGk(P*VI|<<Vh-Z7kehNZc+n<6q9$qEy
zSns&M5zz+XsC+P!po8<Sg-$#*#j(1!)j87RI~5|q+zfZ#k{0<^+W>qkMG0nXM7`@}
z@!BdRxLp>bwqJ`uy0vBZ8wUI7qiuO|9|3TU^v&ZD{jw6#0k>I6F!gYIC`WNbFOr*t
z7v{y@X(oB2fncT;IMJVUOn@F45{#0GX{vj!$MeU+elkJagwoe~)R$(`?<TR!AY+0V
z6QfO!q)0H|LAnXjqtu7X;m#E2``Zq`JTQe4%v#4-+_wONxgqCBqZ5)C-ySiD@n?`c
zs(^{^$_2AILxLgfTiCmL7$IK=a3u;mp|8!}Q_Q5_jWQt~FG5|jp-*@4!LStT&BB+c
z#i4TlO4NbY0?YrtsLEMmrDM@OF(J8($We(VD5Yj4WvN3*Hs(n&3rHrFHWtC2$}ww9
zcZjLJUb&~s{c%^TEn-9R6(cVby}XbWavsd_T3JajkO8~JqiwTNlwby@BvIu49`bnC
zOB~XH>$d{>BuHNrD#6_Acz$jIPN*TdP`F^WB&sXOQfxXa>1mQlwjMvUyl63;zijGR
z1L8%p)`{VFgQt4(EPz82w6~88#EC-8jUM%Fh0cdF9?62|Tm<8r{QWopZ#pJ@19U=k
z8^NqZ{9UAZ*b(8L^w%g7`#mw#^?}ft@Ycca@VE&cHkUXAbA-q911#o&rLvI4<%0)>
z1J>o9f8?@F_!N2{fPc#S^AD9$cgAdAEr7jbl2%K{Hi!iCNyY@TJM`9Yt?1V+VgUOv
z#}F0={l&m|4D=38Z~2~$@;+}ur%7Czg0)^r`9np$sFQzJ$+Zpg9)HP^0Fs~!wCC|4
zDZf%kYmJn@Hbyx^M91$gQcb<A-u2j#02>yGWDikYtHm%|FW=Or4)s8RTdp!58j);w
ztB*);$3T0%_rs1OUf+X0Hsw{gcS>DzW;nEyYPTG9|5ND`pZ0c_whfo}d|ya;YfN%E
z9XhRO3xKngQqxkInItPM$3&iwfPjDw50XPkt|Hk?^1Li6*p1|}Jc8Lm^2qS{0|GiU
zx$Gr#znSFOSynXEa5&pqk|%|32ngtq<T8TfXC#|Qo>`0v`xw-v7V(==p-Tb+It;lS
zDr(U>lBX22;%bt=HrQkyCD|=>O+Y}|lgpP#){B?!u=Z$xB6){_Wag0^9J(kVplr$I
zVhID7NV02tH|7$9Gu{f4M~AKo2q-IJsUi6=$qghgE~SPICpjyRWSU4`9l9+bpe)E`
zZ}HNfN^(#sHn4)^H6%CYkW90Ww_iX&K)cS}uakVA<hdokQ6pQ~GlgJ&6uK`UpyUbW
zbdr6_slkfmg(Pc2_XPw51Ox;G1Ox;G1Ox;G1Ox;G1Z0Q*11^diFjPo-cK`qY07*qo
IM6N<$f<$r)DgXcg

literal 0
HcmV?d00001

diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 0e34c0236..4738ac9b3 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,126 +1,181 @@
-<template>
-  <b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
-    <template slot="brand">
-      <b-navbar-item :to='"https://www.chapril.org"'>
-        <logo />
-      </b-navbar-item>
-    </template>
-    <template slot="start">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
-      <img src="img/mobilizon_logo.svg" alt="logo mobilizon" style='width: 5em' />
-    </b-navbar-item>
+<template >
+  <b-navbar
+    type='is-secondary'
+    wrapper-class='container'
+    :active.sync='mobileNavbarActive' >
+    <template slot='brand' >
+      <b-navbar-item :to='"https://www.chapril.org"' >
+        <img
+          src='img/long_logo_chapril_mobilizon.png'
+          alt='logo mobilizon'
+          style='width: 5em' />
+      </b-navbar-item >
+    </template >
+    <template slot='start' >
 
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
-        $t("Explore")
-      }}</b-navbar-item>
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
-        $t("My events")
-      }}</b-navbar-item>
       <b-navbar-item
-        tag="router-link"
-        :to="{ name: RouteName.MY_GROUPS }"
-        v-if="config && config.features.groups"
-        >{{ $t("My groups") }}</b-navbar-item
+        tag='router-link'
+        :to='{ name: RouteName.SEARCH }' >{{
+          $t('Explore')
+                                          }}
+      </b-navbar-item >
+      <b-navbar-item
+        tag='router-link'
+        :to='{ name: RouteName.MY_EVENTS }' >{{
+          $t('My events')
+                                             }}
+      </b-navbar-item >
+      <b-navbar-item
+        tag='router-link'
+        :to='{ name: RouteName.MY_GROUPS }'
+        v-if='config && config.features.groups'
+      >{{ $t('My groups') }}
+      </b-navbar-item
       >
-      <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
-        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
-          $t("Create")
-        }}</b-button>
-      </b-navbar-item>
-    </template>
-    <template slot="end">
-      <b-navbar-item tag="div">
-        <search-field @navbar-search="mobileNavbarActive = false" />
-      </b-navbar-item>
+      <b-navbar-item
+        tag='span'
+        v-if='config && config.features.eventCreation' >
+        <b-button
+          tag='router-link'
+          :to='{ name: RouteName.CREATE_EVENT }'
+          type='is-primary' >{{
+            $t('Create')
+                             }}
+        </b-button >
+      </b-navbar-item >
+    </template >
+    <template slot='end' >
+      <b-navbar-item
+        tag='router-link'
+        :to='{ name: RouteName.HOME }'
+        :aria-label="$t('Home')" >
+        <img
+          src='img/mobilizon_logo.svg'
+          alt='logo mobilizon'
+          style='width: 5em' />
+      </b-navbar-item >
+      <b-navbar-item tag='div' >
+        <search-field @navbar-search='mobileNavbarActive = false' />
+      </b-navbar-item >
 
-      <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
-        <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
-          <figure class="image is-32x32" v-if="currentActor.avatar">
-            <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
-          </figure>
-          <b-icon v-else icon="account-circle" />
-        </template>
+      <b-navbar-dropdown
+        v-if='currentActor.id && currentUser.isLoggedIn'
+        right >
+        <template
+          slot='label'
+          v-if='currentActor'
+          class='navbar-dropdown-profile' >
+          <figure
+            class='image is-32x32'
+            v-if='currentActor.avatar' >
+            <img
+              class='is-rounded'
+              alt='avatarUrl'
+              :src='currentActor.avatar.url' />
+          </figure >
+          <b-icon
+            v-else
+            icon='account-circle' />
+        </template >
 
         <!-- No identities dropdown if no identities -->
-        <span v-if="identities.length <= 1" />
+        <span v-if='identities.length <= 1' />
         <b-navbar-item
-          tag="span"
-          v-for="identity in identities"
+          tag='span'
+          v-for='identity in identities'
           v-else
-          :active="identity.id === currentActor.id"
-          :key="identity.id"
+          :active='identity.id === currentActor.id'
+          :key='identity.id'
         >
-          <span @click="setIdentity(identity)">
-            <div class="media-left">
-              <figure class="image is-32x32" v-if="identity.avatar">
-                <img class="is-rounded" :src="identity.avatar.url" alt />
-              </figure>
-              <b-icon v-else size="is-medium" icon="account-circle" />
-            </div>
+          <span @click='setIdentity(identity)' >
+            <div class='media-left' >
+              <figure
+                class='image is-32x32'
+                v-if='identity.avatar' >
+                <img
+                  class='is-rounded'
+                  :src='identity.avatar.url'
+                  alt />
+              </figure >
+              <b-icon
+                v-else
+                size='is-medium'
+                icon='account-circle' />
+            </div >
 
-            <div class="media-content">
-              <span>{{ identity.displayName() }}</span>
-              <span class="has-text-grey" v-if="identity.name"
-                >@{{ identity.preferredUsername }}</span
+            <div class='media-content' >
+              <span >{{ identity.displayName() }}</span >
+              <span
+                class='has-text-grey'
+                v-if='identity.name'
+              >@{{ identity.preferredUsername }}</span
               >
-            </div>
-          </span>
+            </div >
+          </span >
 
-          <hr class="navbar-divider" />
-        </b-navbar-item>
+          <hr class='navbar-divider' />
+        </b-navbar-item >
 
-        <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
-          $t("My account")
-        }}</b-navbar-item>
+        <b-navbar-item
+          tag='router-link'
+          :to='{ name: RouteName.UPDATE_IDENTITY }' >{{
+            $t('My account')
+                                                     }}
+        </b-navbar-item >
 
         <!--          <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
         <!--            {{ $t('Create group') }}-->
         <!--          </b-navbar-item>-->
 
         <b-navbar-item
-          v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
-          tag="router-link"
-          :to="{ name: RouteName.ADMIN_DASHBOARD }"
-          >{{ $t("Administration") }}</b-navbar-item
+          v-if='currentUser.role === ICurrentUserRole.ADMINISTRATOR'
+          tag='router-link'
+          :to='{ name: RouteName.ADMIN_DASHBOARD }'
+        >{{ $t('Administration') }}
+        </b-navbar-item
         >
 
-        <b-navbar-item tag="span">
-          <span @click="logout">{{ $t("Log out") }}</span>
-        </b-navbar-item>
-      </b-navbar-dropdown>
+        <b-navbar-item tag='span' >
+          <span @click='logout' >{{ $t('Log out') }}</span >
+        </b-navbar-item >
+      </b-navbar-dropdown >
 
-      <b-navbar-item v-else tag="div">
-        <div class="buttons">
+      <b-navbar-item
+        v-else
+        tag='div' >
+        <div class='buttons' >
           <router-link
-            class="button is-primary"
-            v-if="config && config.registrationsOpen"
-            :to="{ name: RouteName.REGISTER }"
+            class='button is-primary'
+            v-if='config && config.registrationsOpen'
+            :to='{ name: RouteName.REGISTER }'
           >
-            <strong>{{ $t("Sign up") }}</strong>
-          </router-link>
+            <strong >{{ $t('Sign up') }}</strong >
+          </router-link >
 
-          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
-            $t("Log in")
-          }}</router-link>
-        </div>
-      </b-navbar-item>
-    </template>
-  </b-navbar>
-</template>
+          <router-link
+            class='button is-light'
+            :to='{ name: RouteName.LOGIN }' >{{
+              $t('Log in')
+                                             }}
+          </router-link >
+        </div >
+      </b-navbar-item >
+    </template >
+  </b-navbar >
+</template >
 
-<script lang="ts">
-import { Component, Vue, Watch } from "vue-property-decorator";
+<script lang='ts' >
+import {Component, Vue, Watch} from "vue-property-decorator";
 import Logo from "@/components/Logo.vue";
-import MobilizonLogoText from "../assets/mobilizon_logo.svg";
-import { GraphQLError } from "graphql";
-import { loadLanguageAsync } from "@/utils/i18n";
-import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
-import { changeIdentity, logout } from "../utils/auth";
-import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
-import { IPerson, Person } from "../types/actor";
-import { CONFIG } from "../graphql/config";
-import { IConfig } from "../types/config.model";
-import { ICurrentUser, ICurrentUserRole, IUser } from "../types/current-user.model";
+import {GraphQLError} from "graphql";
+import {loadLanguageAsync} from "@/utils/i18n";
+import {CURRENT_USER_CLIENT, USER_SETTINGS} from "../graphql/user";
+import {changeIdentity, logout} from "../utils/auth";
+import {CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR} from "../graphql/actor";
+import {IPerson, Person} from "../types/actor";
+import {CONFIG} from "../graphql/config";
+import {IConfig} from "../types/config.model";
+import {ICurrentUser, ICurrentUserRole, IUser} from "../types/current-user.model";
 import SearchField from "./SearchField.vue";
 import RouteName from "../router/name";
 
@@ -134,12 +189,12 @@ import RouteName from "../router/name";
     },
     identities: {
       query: IDENTITIES,
-      update: ({ identities }) =>
+      update: ({identities}) =>
         identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
-      error({ graphQLErrors }) {
+      error({graphQLErrors}) {
         this.handleErrors(graphQLErrors);
       },
     },
@@ -176,7 +231,7 @@ export default class NavBar extends Vue {
   @Watch("currentActor")
   async initializeListOfIdentities(): Promise<void> {
     if (!this.currentUser.isLoggedIn) return;
-    const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
+    const {data} = await this.$apollo.query<{ identities: IPerson[] }>({
       query: IDENTITIES,
     });
     if (data) {
@@ -222,7 +277,7 @@ export default class NavBar extends Vue {
     });
 
     if (this.$route.name === RouteName.HOME) return;
-    await this.$router.push({ name: RouteName.HOME });
+    await this.$router.push({name: RouteName.HOME});
   }
 
   async setIdentity(identity: IPerson): Promise<void> {
@@ -235,8 +290,10 @@ export default class NavBar extends Vue {
     return changeIdentity(this.$apollo.provider.defaultClient, identity);
   }
 }
-</script>
-<style lang="scss" scoped>
+</script >
+<style
+  lang='scss'
+  scoped >
 nav {
   .navbar-item {
     a.button {
@@ -278,4 +335,4 @@ nav {
     background-color: inherit;
   }
 }
-</style>
+</style >