From cbc2e894ee4ff7211eae95acdc40a0a5c088a3ba Mon Sep 17 00:00:00 2001
From: danielvici123 <danielauto1000@gmail.com>
Date: Fri, 1 Nov 2024 20:43:05 +0100
Subject: [PATCH] =?UTF-8?q?neues=20design=20ist=20jetzt=20zu=20h=C3=A4lfte?=
 =?UTF-8?q?=20da?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/main.ts                                   |   4 +-
 deno.lock                                     |   2 +
 src/App.vue                                   |   4 +-
 src/assets/icons/comment.png                  | Bin 433 -> 559 bytes
 src/assets/icons/glocke.png                   | Bin 580 -> 362 bytes
 src/assets/icons/herz.png                     | Bin 324 -> 394 bytes
 src/assets/icons/home-black.png               | Bin 496 -> 0 bytes
 src/assets/icons/lupe.png                     | Bin 994 -> 576 bytes
 src/assets/icons/mail.png                     | Bin 677 -> 533 bytes
 src/assets/icons/user.png                     | Bin 695 -> 495 bytes
 src/assets/icons/zahnrad.png                  | Bin 1309 -> 753 bytes
 src/components/Home.vue                       |  16 ++++--
 src/components/Login.vue                      |  12 +++-
 src/components/home_components/contacts.vue   |   5 +-
 src/components/home_components/feed.vue       |  53 +++++++++++++-----
 .../home_components/interesting-hashtags.vue  |  37 ------------
 src/components/home_components/legal.vue      |   4 +-
 .../home_components/navigationbar.vue         |  47 ++++++++++++++++
 src/components/home_components/sidebar.vue    |  42 --------------
 src/components/home_components/trending.vue   |  37 ++++++++++++
 src/components/login_components/settings.vue  |  11 ++++
 src/main.ts                                   |   1 +
 src/router/index.ts                           |   4 +-
 tailwind.config.js                            |  13 ++++-
 24 files changed, 181 insertions(+), 111 deletions(-)
 delete mode 100644 src/assets/icons/home-black.png
 delete mode 100644 src/components/home_components/interesting-hashtags.vue
 create mode 100644 src/components/home_components/navigationbar.vue
 delete mode 100644 src/components/home_components/sidebar.vue
 create mode 100644 src/components/home_components/trending.vue
 create mode 100644 src/components/login_components/settings.vue

diff --git a/api/main.ts b/api/main.ts
index 53ba12f..48f00cd 100644
--- a/api/main.ts
+++ b/api/main.ts
@@ -1,12 +1,14 @@
 // main API file. Handles all the routing/api stuff
+// @ts-ignore
 import { Router, Application } from "https://deno.land/x/oak/mod.ts";
+// @ts-ignore
 import { oakCors } from "https://deno.land/x/cors/mod.ts";
 
 
 const router = new Router();
 const app = new Application();
 
-// Creates the routes for the API server.
+// Creates the routes for the API server.S
 // Example: localhost:8000/api will show "testAPIPoint"
 // in the HTML
 router
diff --git a/deno.lock b/deno.lock
index e7f9980..10b42c6 100644
--- a/deno.lock
+++ b/deno.lock
@@ -17,9 +17,11 @@
     "npm:@vitejs/plugin-vue@*": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vitejs/plugin-vue@^5.1.4": "5.1.4_vite@5.4.10_vue@3.5.12",
     "npm:@vue/runtime-dom@*": "3.5.12",
+    "npm:autoprefixer@*": "10.4.20_postcss@8.4.47",
     "npm:autoprefixer@^10.4.20": "10.4.20_postcss@8.4.47",
     "npm:path-to-regexp@6.2.1": "6.2.1",
     "npm:postcss@^8.4.47": "8.4.47",
+    "npm:tailwindcss@*": "3.4.14_postcss@8.4.47",
     "npm:tailwindcss@^3.4.14": "3.4.14_postcss@8.4.47",
     "npm:url@~0.11.4": "0.11.4",
     "npm:vite@*": "5.4.10",
diff --git a/src/App.vue b/src/App.vue
index dd9e642..6e84a31 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Sidebar from "./components/home_components/sidebar.vue";
-import NiceThings from "./components/home_components/interesting-hashtags.vue";
+import Sidebar from "./components/home_components/navigationbar.vue";
+import NiceThings from "./components/home_components/trending.vue";
 import Feed from "./components/home_components/feed.vue";
 import Contacts from "./components/home_components/contacts.vue";
 import Legal from "./components/home_components/legal.vue";
diff --git a/src/assets/icons/comment.png b/src/assets/icons/comment.png
index b3d1a1374afe6fe6c0caa9e1b1685593c09c1d93..ce04fcae92d2d8109e9f678890d3fed5f598e037 100644
GIT binary patch
delta 512
zcmV+b0{{K71Fr;-Ie+0vL_t(|ob8uAXcSQtg~y1biy%RgfEJckLcoAkx)do^k;Os~
zAvpKWF87?bn?N8Kwn?E7Fh~euyEbZ>(n1R@6>Kbolvd*AkDww%nS^X6<|Wy`nQe05
zH9Ir=eed4Kn>RslnkExYPoIy>Zirb<$Ok*aEEoS~W_>{#DSsA=Lki3a`9Xj`O8)hY
zoom4R_}<XD!M4F6a9M%pLjF1mdZbMJ4Dc)}moK#hSKzjgwPwK{k#%wIZZqsNN-neu
z_O$0oLv#TibsFBVga8w1!4oaH?}dlua=!xK(-u(RhfYpj^v!-Lb@+ZO77xJ9tXF{5
z%mm0<%uLSyR)1FTx`bJ7Ux1v?T0qIibpZulXI=sFRk8xhT@YAKR^UY!1gc4a*)FVs
zhshR<W?q3(>3UrtpU<Ba@>_-iUk~quW>XmoxI+TAyBmH<z4YYgFbvQ6Ur6MLl0Q=v
z*ouH*FMKZ{dFQxuU&{mdt>jqHNFws4keeMWdo6NqJb7p)1@c;l;O|;Gm`a;_gOHzu
zyjQ7IdV*G><Wuh-11kz_czV31z*_}oPF!dwrBEmgc-Fvne5l-;(L||qA#(0YT;2nR
zi%vwy>VLEQ*zgK&8*X-0fHz9MRA4Ut=F0@!t^5Pfq^iqpXw$?10000<MNUMnLSTYi
C@bI4i

delta 385
zcmV-{0e=3k1hE5<Ie%kGL_t(|ob8uCC`C~Khd-pZQIb#$Mw3#M>1_tXBZEOn$!;)-
z%|I!VB<r(aG#VHfpRyQ~(In5mgcQ0t_rB|Pj(hKU=blsY)o(fX&-c5x(>>?HKj~=%
z27m%EEm9C;4P-<+umGF_@4%-b-mw#LZkq{lC$J5?{vuVyyMJa2=+Kpq0%Z+xG!MXd
z8gUJ<W<VUxYSIEr8ORftn95M@XHq3^25u}AxCL5d1vV|n{cJ?#IpEG>fwFK0j98TW
z@xGn`D-H@QSM;#&puk?Zz=4ATo-<&_L4jgL|Gj$IE-)W1katj^FI=DwxV9+2M8d4a
z0yDA#IpD&A{CXUyM?pXElA-(==p}}+n0=pa-he?8G7LN!UVMf~Nsl4<vF^q+U#0jA
zm;h?gWL<INE8tNweh(Z0b4eyz9IcW$@F6yp{u4C;UE=lr*j$*P7?GFK%;0M21`dH;
fU{U<@{awBQdf8s2L8mi_00000NkvXXu0mjfC6KOv

diff --git a/src/assets/icons/glocke.png b/src/assets/icons/glocke.png
index 76aa39a4e2ff9d0685da637285bd39c3f74a106e..693ecefe8354e9e6ed5b7488d7e156ee95ce6d8c 100644
GIT binary patch
delta 349
zcmV-j0iyoI1nL4IiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPLe;i3f
zK~#90?Uv0-#4r?vuj0~$_%H*C2;wt{%v#7#A?HvLl-cBc<}JjHuJtkeL2#)Z2~sR&
z1e;_cI6ZKn+(o~Sn?NfvCNh>h=~ha|kc)2DN5Ff(sepsNK$wZh#!BG|IM%>JAKq4z
z_tv?i)xgPf4Sf6r@AO>*%nH}!f7Fo8FW_w(MV@AXpVjrQCZ7kuzY08&+({O&<mF&^
zdncT`NER^UO{{<cu9F2c@DjZN@-fE-n&=IXO%8!YN=E@1k03Q>tuLV>_fiGIJEGy5
zd`%TFz?&iu{|3%T2~Ezk!N0!?^FbT1z2ENCM&E^H(RDrP1Hw#7#Q?J<Gv|C&OrWZ&
vZ3EnO;J0BWCF8x{vd-;?hUcPi`A_)-=4B$Hwg-dJ00000NkvXXu0mjfoQ|FH

delta 569
zcmV-90>=I70>lI%iBL{Q4GJ0x0000DNk~Le0000+0000+2nGNE0C6tjgpnZ_fA&d4
zK~#90?VGzV1VJ2tKk=$i5J4y$YKh7pAPVX$yy8)amRb;nN1>qOPY?;UN~sYF3W>y{
zrXUi+37KRjkxk~Z9(ViOo8Omw$rgK;xi51&m)jjs6h%>jr3`4ZnqvhR25x{)>oqVG
zdYPGTL849*D7C;-o-mI<4FNKke<zA_fB+ef5yqSo91}6Zm~(=m&VJzI7-5d>tTC@C
zSz3S{;59~&s4u`a&`b$Y0W1K|zX%f5yvICHPReNj4*wxY)FYsYl+pp*6(EZ97HB7B
zGy<0ejN-gX({-mBI4wdH=Lt|n3Ro#(6z4L+=>gso2=fMXBbb8(qB!>ue@X_(B^V}W
zS3+^DCm6-Kia^c;gfT0WDC&U^0bxGuuWd2(3y9+ELl9#Ef;dMI#GHU2&RGPpC?JT_
zj71Df0)jZrSj4a-Ac%%R!=N(;{VJi?81&+cu1X#>j0X+lLBn{^Fdj6F2Myyv!+6jz
z9ySF0-QYB15kWSg+p_s?f4q%q6y(Lp3Y#e+;$($KNhD4-B~gkRr#Imz8vYW;jJ=?<
z<uj$4v1=HL942G;5v5Txc10;M)_~oZnsbBU;0LS8J^?ZHgD{f>L=|umBg#2YNnmtE
z_FG3a`>#6*lm=i6c=#6N9@w-`f(B0o&}ucuilQhA0rCY2D-^O35Bh4W00000NkvXX
Hu0mjfWGCYg

diff --git a/src/assets/icons/herz.png b/src/assets/icons/herz.png
index ec1d9795047896234118d69a18a6967ede6173a0..7c2a19e11a13715624af8d1cb4ce57f96b50d6b9 100644
GIT binary patch
delta 347
zcmV-h0i^!K0*V8WIDY{=Nkl<Zc%1E&%}N6?6oqFBK7zQmPosN9>9&&GfzCPe2H8s&
zwL2d}>syFEfnEB$)rEqfL>*8k9aEdhi1ff+Ovugm<%da<WtRDiF~)QR=xK5yz?G2C
zLf+VKT@+hNsg>_Nb}S>eHE?3*zV+B%;8=iNyQUXBD~hfr&wqt{nN=E?syyE)dxYGy
zV|6_Oob3$;>pt+i+J!!gkV9ME^MTu$62_R$Pdg7%z^U^(1n4ym|0qT7R0Q<<<B1}m
zfupJbc^yrFymVc`Q$&GB*A+}-2?%-Nx`JWEH?Ut3=mTp4JVZGD`#jHAo&SOiP!V?D
zcf!jEIciW~lvH>m)xbdmM}KJ7_7Mm!F)uu*#Bbq2Bo>7)BoPW;CKYnr7JM#=rr=%@
tO~Y#?V!@pfvEg4N+Jcu!+k_|oBCi0n4o*>|O-cX&002ovPDHLkV1h=Yp0oe}

delta 277
zcmV+w0qXvW1H=N5IDY{4Nkl<Zc%1E#I|{-;6h)7MOAu>ajrNLSE4Uc3P`fNc%`QY&
zU`oHO77BtAm_U$8GHT|Hh!<{=Vct7u2>kQUm!=4GfjO`RZopoBH-VC7COm5azPfu;
zvooNhb{eGytblt;1E3z8X{fWbnI%v)fgdv##XD3ry?;oPD1REfJdZAten(dT9<{9#
z@C5~?I)R;_z(yx<6%@GW1Oh>UwN79tC@|0oRDiPp`~;LqNMAspM@B{#;o<Jg6o9b>
zxTkjGLc)6mp0~tX@Vq2Gf`2NJ3p`4=XyOX~s)QA|sf1N{mV^jANkSC<Ea3zmrQj0I
bPvilY1hmaM2@b+?00000NkvXXu0mjf-!pSC

diff --git a/src/assets/icons/home-black.png b/src/assets/icons/home-black.png
deleted file mode 100644
index 0bd630391804aec6565dcca9d6413783d22dba86..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 496
zcmeAS@N?(olHy`uVBq!ia0vp^ZXnFT1|$ph9<=}|&H|6fVg?3oVGw3ym^DX&fq`+6
zr;B4q#hka(HhLWnkZ|+Y)YH^sEnL$)JGQ2o@6o-553E_#;}3)vlzx_-GiUCRtvhyD
z?%?8kv|y@}9>=%!zSXn;nE&Lf@z%KWWI`LW6Nh5UkJFWgffpF{8Y4HZeiXI(CDZl&
zOIq$SSZ|ravm;hP^$p*RrKw*Uf2#%^l54PyI>h*4OVgAM=?^Bf8MDNBd2m*<_GM})
zKgi|POniSplQ)^CCI_fV*kZBblLO%_nu+%hu<~+kk9?vk*%YgMCrN*$z?pxX+i!R)
zvHaF<i+;0{@1Wz!f^OUCiWV`(caqMBa`c(;Y`;+~*!0-rp;-0SwgfrLJ4x$53B1X%
zyfcaCV4my4X(1eGqV3T_iZ|A4-ic{{u;5uiv1F68`om{hEbiwHopt5to7)z>R&j<k
z|MpYP23reeS8^TfY-W!r|6F}vN|>Er!_b4LD)~ZuXR6S$1CP6AZ+j_S9P;SQ&wSN1
zMxkT{LpCA_&F-7*eoAY?ADxL?V*LEOUW<SehvVg+j8kNb4&6E5@C_J+44$rjF6*2U
FngCQ(!7~5=

diff --git a/src/assets/icons/lupe.png b/src/assets/icons/lupe.png
index 8f248d3bb5e32bf9f6ea22fcdec2df36ecbd63d0..33b2050c4ac31fcc9e2174f9d04017cd904ed3ce 100644
GIT binary patch
delta 566
zcmV-60?Ga22fzd&iBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPKe*yAI
zL_t(|ob6W2P8&fG91HRn+<;4Bxa7hg0J&QTaRCx-w=GST_lN}A3y^$7015F)n6F3(
zIpPbb?OijhLD`25ilC*DR$lj1^{aZFd$$6XB*|<P$4g4C+p%Z+%}v_`SXAIl$ZI9<
z9v$Gfkf)tEUYG`ULxDue{uuE1f9Wf5U_O%szX(ADxD@h8$Zb0c94py-^dItkA|!Me
zc?SF^A~&A7xFO`G0yjZfEE6?r&SBaOywmM|DnPh7A_3e+-p^MipukxcO&WPI;+Bbr
ztesQ>kD};9*6mjFlJ#t4Jt5?;N+a3^mV;Uzmi12?bC|t2UMfvMha!`8fAn?*|J`6J
zR!b9zykE;MXahTC{RQ|s%7FK4wMro5QE39?_aK1f(gczunKgM$FX@$SLIJK)^4G0a
zYsOVEAy0!WY!>$GcDI81|8!NY6UPf9{Woy|n*Z_{Y{>^T?3<XmI;OxuFpf8ACZ3jJ
zi#(8GA@^#52O58#+ju<ze|}`kXz-lYJh!5c+hj|;|LAI3L&<&9_9E-pA`gW~$iM3S
zN?j7p7K>@S$!i|ix_$62t+_>>dp{Wx!H70ZU<CMLbDkeHOZxzHS|o~C8~B|6e0wLM
zZ#om|{mN5~`OW*e*UJQuycqZxiPr$n>_yY={wKQ!GD-Aa0h4w=3;+NC07*qoM6N<$
Ef`3r{mH+?%

delta 987
zcmV<110?*w1mXuFiBL{Q4GJ0x0000DNk~Le0000+0000+2nGNE0C6tjgpnZ^e*=_B
zL_t(|ob8)UNK{c2$A4xYT1n97qAW2YC?&C41ky%aMCc+=7_br|5JIShOE(3zX<-yd
zMB%0q!$m=^D#%@J%)p3pimW!$LJ=#`GA`T!8Rpz~r<r;8J?H-5Ea%<-`_Fsl-h0k{
z;PH4oo)t$4umz|F_5!<ra*B|Re?TkH2aE!9z*2^o1crfbpq3R(Ezl3l3PuFQ8=w<d
z#|mK&Fa-SlPean<JJ6wD!Ps)a@T%k*FM&#8MmaE8AVZeN51^5lun8E+;^wA-cfbqa
zG4Klb1}s?qejaEe22aX}#m&42t^h|2xneWW4m{E~Z@Qi`v6%=n7;pn$e}J>Vsw}Uo
z);JG<KZa}n1nP)rqFpk?U7#$-F^&UMhA}<>6+~=Go)g3_0+;eU)|kPZULwShL1;cr
zNwF39Y{)k?M1TW^cfY^D<IV`<4iEwQ4T(0_oDxKrFt+-ms&L2#!`|mi2;;8-J__Ua
z;E-0sI;Auu4W|VSZ*fSUe<12|$YqRQ88oO(>kb?-Dj1_yv|;j8(BWh?Tq3MprX7?7
zE(*q|B3I~a6U3+uVc47ywA^%{g=#^}GY49ZI#@@E>=(p5aiHappyi<hE$kG;ymp|a
zLC|u?ffm*ab=<EGw6qJxT*VQS!fsj>nZl%3Fy<VN7#0Mne=tmve}ayB9MLTZQsu}n
z`&F4V%!Iftu@*J2r}HqlCumTmP^XLv!tRGKc8$(ynZ|FyF`b5*h^o;R3iX;i7sgJy
ze2r3+>9%Pmfm6ChTL`WTW2!h$MCdSx9Md)0FrHEs<G^YnLW%ArOJYCe=_p5Oz>}i#
z%`qZIrS2t5qGxrDe|BvSiB`%fE(&B>(P+_5ozUe-Re7_aR!_-`7T0y2a80yXHspWn
zm9y$Qodgc+XwWO?Uc-u3iW|$WqhcQsqgnTomqLh%fSi*cV$|tga-j@a)H$Wpu!)SU
zITc#8?O7Mw7*Csh4qBKPIdf7o%0R#|4x32o#asG1CCHdaf187DoA&5tnC)T38NDHF
zF`TQhF(&fnq}Z;Lv?^WP(uHev@aQ&hO&6K!EvMiri|IU8=H$CwypV-CVHeY!;>|JO
z%`xE3G2qQH;LS1M%`xE3G2qQH;LS0R$a4G8L=ln5!W<VT#A0KP`m(pENLZS)n<69;
zU`{gbAEp+<F&tG)J4KPxq!aD(C#C33Nk4R1lsU!Y@py;>{{VJYYQC>}Z<qi8002ov
JPDHLkV1ncP#*P30

diff --git a/src/assets/icons/mail.png b/src/assets/icons/mail.png
index 1f8ed71b8c9e51a6895130b689516e3992aa0271..311ac44cdf6e5cdefd83e17a45b4d259c06a2ea5 100644
GIT binary patch
delta 522
zcmV+l0`>i+1(gILiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPKe*woy
zL_t(|ob8sqOB_)Y#YbI`7>S)=3L#~xfS5vT(ujyyu9c<Cy|cS>&MaFDrg^rOg8mJD
zr4xHK1dK)MK(Mh$8Br0`5H`G(jk7xI?z*$aVlJF!c=w*)d-uM_I8GXAJg1l|m0k+D
zsN{x_n+a>pBSY&^7eL4_N|rk*e<6440x0>p(*O#r*99=fWCWm)=ZWteIPn12ah$G(
zvoK#Myisx|!DHXlQfaV}Z<iZ}12r?@`?CuCY-86)N=`;=y1=k8raP|xQ$k)UV0_>2
z{g)7i14^z6@TUdi-%2jIuG?3w<NN+A0ak1sF9@dZ0eECKQs9RG6E);Pe=s8CVH3yw
z%?*OlJGnCg99P#^uLl9NPVcHis=!%{`Gvjb*=)8aVmze4*4?#D1LzIJFKZg@TRxwE
zE##-jnr++L2xzyRcp*>YYPJNRxA%9?Bj48K0Pn4$-=t7@r@+^TYCR5s6<rIk9QT|S
zi^Ug}XB@a{RHq$)a@_S2VDf_i-<!>E8$fSC_N`jYOAJ6CsT9CVTfmqhlpq*?sv&gA
zv3mf<m`tM=ED-?**2{^DTrStIz(@N7*@>T0As4Jita%z~IR7dB0=Yx0CEfN%Gynhq
M07*qoM6N<$f_x0?!~g&Q

delta 667
zcmV;M0%ZM_1f>NbiBL{Q4GJ0x0000DNk~Le0000+0000+2nGNE0C6tjgpnZ^e*#xY
zL_t(|ob8)2XcR#dhQCWH6*X8WYOoUmS41srwbDXjY-}WGXKQI|p%_a`Tgz*$?NS&m
zgrrClK?7D6Vn7hltPH$sgxQ_ho4K3O|AQZ{ntku*?%y{%dmw}mLI@#*5S`2cmw;8^
zcBOK)U$kD5a1Yo6ntw!}fVD|Ye|c6wBf0dnuPL_*C_cAV`WW-BfWmWYGuD&^;GlrQ
zbIbL3JjR$M&q6!EdZpU&^yGRCX6RXDM7@kWJ-J?k8OoSAW43`s>SNJr&-RUJfbYOV
zV4m`EQ|^7>TT4I5jA=~ofy<Q3vfYlm`bcg}1N;VF07of@!*&<?71%=-e`6ZcXWOXF
z8aK&)jI2GYF^%aJaE|G78hF{W<|M{!0vjC{+6Nv?DV*o+TKgR}ZM5V~vN>h|+y%bO
zIGis8gzHx`Zf=?b-YNU~9t4E*u^EJ``&plz<>Y&{Wgn6{oLB5YQ`@yZ0M|>|5*z{^
z0Y5T@^O=Bf{Run=j+D4pe>xAm?r0!pat@hX$Kg6GeG@rI6wa~XO6kUoIbp#Y8_uEO
zI<gx;D8(2v<{Gfu(d3>TZ>$EKNbK60u@q-aOgK*xu2mWn6V83ZwQ6Hx!Z|ivt2ZVz
zoZYofl8$PO8FS^Y$=Nr#{&&WV!}+nvea=CZ#!Lel<3YxFkTD))af}BU<3YxFkTD))
zj0YLxLB`}XX34Y2mOaR>QClfqHCxcjiGJQr@EEcdy`cv;3n)CdZqSqU0*cS2Crrp%
zz<F^^axWI$ArS*R8La(pIm_0I5JCtcgb+f|!XLhJE>!m&_EG=<002ovPDHLkV1nN=
BD^~yj

diff --git a/src/assets/icons/user.png b/src/assets/icons/user.png
index d72c54e75676d1d5016aa6a7f527c735fd37cb8b..591c84cc3c4b6cfc33ef018b03c31eb65b5d7fe5 100644
GIT binary patch
delta 484
zcmV<A0UQ3e1@8kPiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPKe*vLM
zL_t(|ob8o8OI$%1g>U1=fZIfyq>g_fvZ+-xRV=o3aU=82y_Y%X&cb%WLWtNzgjBIl
zBZxwhBA6<F!F2g(l13YC)}-=-k=1Qh_uh5xg1QF|48si1nU{BFf?%NAC;_H~T-U(2
zmfwd-GMPJA)oNp!+|lG|Ckyb!f33*{Uai-QLVmvreraIWt@R#2lkd91+m%@J3a{4d
zMNR(C5a3@FMI+t<C}U>Q!Y>>eGwm%v2rOg{04#V5pp#@VYXG;$TL1y(GFO0n=`BDU
z$4@kQlA#HYRgydod`f`NsVe|{^a^(pU|fL1uBRstB5R)pc_=jIxd8jue+1Z5WGTo~
zaU72dxgx;N7S#2|4<VOdS^FsHr^<~+K`AxVSLpqgwf3O^FEqKNfe-F#3i-*6&*#Y5
zN~JRF6>5xmAmqFN+nPK|@dh+Cx#jk_9_bleZZrxZpfve6^FPpj5&sCl%vDk3gaE&L
z1$Xc-vG!S7cqvt>vl?i+I)il$AmpZZc-tFY18Cq)UIB!BovQ0Kuqwb;uO{E#=vEAL
aXLSZ$w7gig&wmU60000<MNUMnLSTZT;n@8E

delta 686
zcmV;f0#W_%1GfbsiBL{Q4GJ0x0000DNk~Le0000+0000+2nGNE0C6tjgpnZ^e*$Sq
zL_t(|ob8&+i%($~$3JJIQLGdTliW5U_pHbzn{i3Gu4PLxJ0ZplS+TGZQo}-$zW}pv
zw<ed3Y=lynQHJ>Gt>=_9Kb$%5`^@{Cc|P^6U#D~VJ)h3+{k`vV4mghEIF93tNC7MZ
zjspY0b6`mFOt$p^OBqK(b^<Sef7X8{?7KsbZ6tGmM-_zpnFqjZ8pcZCT@5K^J^<@z
z2y20F5u}tE2G(GlS-|^<QhvX4=3<nh=9u!Y+_yR)?@B18%r=ZsRQyXGZNi+#6w4K)
zlv#oydKJYS!w>_CVs2rGmx^M-I?D`$iekdG%+OMf8Cou8WQG;xgln1Mf3>2RR~X`<
zqL_Oa;=H1ma~NWiqL?lWF%kHzAmtO#fiZd&#F$zql}rNOCX^C-$dfV3cHn0MDdC)3
zF-}hcF-K_t1#l*!l+#vwz3tcoe61lQ9J`x_GD9Y0KPrwV*DOCSslr0wB=GbvLY@F8
zWZ!Yg6kvhOV7ugV*ycEnf8#jLm{9;TfsH`7v?tC2mw|ry9JU<*Hpsq>WCE~S7L#{J
z*}w|N+>!pvDmkY~I^^Az8^D(YtLyOE>vd^8nCRdw1}*|06Ub<naIFi#A~GB^HUqa6
zWwgsp8N0^3EwMtzjaFuPEMt*6)1(#9$~d82aTS=VC1pMECWFGOe>Ba*&nqe2iJIFQ
zchCM*Qubv~U|l(TV@sJ2e9xe`x(PMRiz((*21Uh6UraIm859&Nmtu-Jl0iYSaxnH|
zkHHLzs++JF?Ibc=5-kX|G9>TqB%u>H3|x_!uZ4u~dI*@FN{Zt+j^j9vL;m~%@7y*?
Usks=y00000NkvXX1g=70f~r3<tpET3

diff --git a/src/assets/icons/zahnrad.png b/src/assets/icons/zahnrad.png
index 59a81a2ca6776c754f2ef6f9d4c7817f2dc3962b..92d03b9b4b48dca2260ef978c47e29858242cd32 100644
GIT binary patch
delta 744
zcmV<E0vG+A3h@OYiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPKe*&XP
zL_t(|oYhy$Y7|irodE+r){3vV^06@JM!zKLN|;UTx;>LVr@O~pgxQ!Fe?k)6#GO&Y
z2%@0z8#D_MO!Ny3C^NpOIHPyEZ_nHgL&SoDneM7O)wk-_J-1T%A0-4X3-DBcXR3y5
z8(?bB5)fd~kUwn|a&FHOFu<d1e*y+r87qjy@f87{hror*tEwU2<q{y@>O0#|eKm#w
zrptjx(KP|Oy}(}#8JlMFhyfM^*mQvZE(5SB<a`uGhYg9IuRiaF<W(<l158`swtg!D
zb|lhuKJ!@#As_n!l~n;&M<)QBF~GKG&>uY=4NiX6*nT}g%FsFkNj*tUe+NM@p}O;%
zObxkJ<QD=##aE0r9NBSv#l2dsw!g?PNs<FXE;$nDXk+>(04%t`OZYE4{O5iBtJ$rl
z|6O0+Xf%$iW}gQ^aL@oBvoW%B;*a!Z`(kgxy?4|-82|uI8Q`^LvmU1DWM&nbj#B6V
zdnn|cAdWBnH73_aY@dPdf6ajRZC(x7kmpA1j5XW1Jp}xFtJT`qx0NJ0QDhs$@iD6m
z6Y4u8fwp%78mw<yuh)-`Jploplqvzap0fj9mMMW^+BKar<Sj!!5MU$sWn?<gv}ro2
zHMhZMqUfY;BT;nI0s3YKgPa>iV5*K2Z%c<v)=-z+UiQ9RZ#EAJfB7jB<3r&#^c+M>
z6;BcJzN199OO0Z29m&A54w)i9edhw#Smj1B85cH?PB@@Blcs0;hmkg%*4(k|w!#Zs
zW@j%7`E|q)DSaF(J95ywya@TiGhk^|e&|a^yRJHx0PF0UlI2J#u&rc5n@EpTUs5XM
z4P`;4Noj_ht}5H9KICb+>%`p1?sN6k7^P|Xu88ZnFDAppkaz#-)hu*ePU~@ee$NsZ
ar~CpqZA1G3X=5?~0000<MNUMnLSTZulur5p

delta 1304
zcmV+z1?T$l1)T~ZiBL{Q4GJ0x0000DNk~Le0000+0000+2nGNE0C6tjgpnZ^e+17-
zL_t(|ob8<5i&j+>#($$1R!)?b_TkKs<``X-GsP%{lw=`77owziQ(XlGSy14m>5bYy
z5NJ+n1VT=bloe%|1?t$0dMi3jMi5jpX?_fjCpN4X4#WGtXRUqqK69os4=fnwyl3yV
zpR+&Ke)c*CrZJ7Ff_s4O3~Qxgf9L>4fh5Cztr|J6C`hT<N-Bh%24dc%LO5(7W;YeW
z1p_fBs0i)=#tp<=0cJ3Tuml(YP61tp`<5C=soBGZ^1H>Se&c<?Nck=0_zmD)#glCT
zHhU2Bn%vtAuI_ilm-KSKm`NffN!ho+f;#s+4(tFfdXQ4Hi?W)zvL@mIf8gsTu~2k!
zI)O_W4HyA7%I}u}p98mY5K_;M1J6hu&jY__{N7!EbTWEMQpe5&CZnDW7)X!ObCwuM
zDXRr1=Z6wBDwG`!Nlae}8WhSt4M|KJ@K*^MmDm23oqbSjDnY~YT5Yuqj!yzR>VmOB
z;1IA^tWW-z4%9-}0U~0Kf6VN89K0$7tO9P&*i*d#^a9s%*7*x?H<7WzxCyM8yXPRV
z&~uLa0J!N{@3Rzyevfe8Z65Q&Z4ifyb)TdlEH^s#BXD29`tOxk#Nxx#6o9V`4jlt#
zMet#k?3c8D93e8gjKgPML|^6`hgFE7+z`8zPTY*`h~NpsLf|Bee<)}%=qY<B4j&no
z>@2a%gjV25QOC4#O1oh=Y!~_9irCM<Ho2xjhat|{EIqkd{8Sh1au~J~_(FP!Rb+C(
zn+EHFf0~rzuB}s+wa@6I8-C|SM03jG%gr9<Tv6YWoVH3yiiYr8N^({Q@Owl!s2e=x
zE&RHoo6gVZDHCl}f3dpF4z#!Gjz!F%;^}VpDEB=@xo68v%ppYs20hAk6LJw^S~Oxl
zR5akSN4ak3Wudps#Ozfxz%sw2=b2FPOlgPGK%}AcS(%ABqiDc3k8-yv$~_m07|RAR
zX<#=*c?-E*kBHQe6`hX-@V{<y!kqzR%S7bJEUYsGcxx5qf2|4N_i(d(KX>6d;BA>m
z`#tnlHwmI7XEdXyXh?C`Z}jnBQTE(s_bq9&ISFzm@CfjRveIjYvzvJmyq%V1{IdML
zRWW>Oct|2{Z92)~(1}Pb2HC;I6h+~H(x(fdWd|RjYFtF5*yu3`Rc;p@4NDE<c*vls
z_~3q-Ftz?Xe@0{+F*tKPk{EuQoIYs%aN1IIEHkbEKgrV#1ve>wZ}j0Q3c@*~V?%-F
zoF3!wNn{IB2-X@Mn|MUK$fM5o97nV+NPLmVXaoNABqkl_>=QZCDQ}H1TO!*1hB&2>
z{Q*1}i<B82N26IbCdyl%#6G>UOFkQD?~}G~Vr7_be+lg9WSBbw3X1Lsi9C~GV={pU
z!|4(<DwMhR41!^x1PuyhPBADnRX&*l7A1AQ(~uoL?vZunV<!!p$V<|ODCku5oZ(c?
zTkR!_B;rdJ%jF!p@SbAnIUhI3jtuo$&W;AJ<=oXo#f#cgvdD2+;~U6Eiy@sPZLcdu
zrk5sUZm<_hN)4T|%RMMt1uc3!h;eVfXwfD<eOKh$Z6VNV%(=NLx^pEkY+QLNgD(xl
zRO*HF_YK5U>JtX98i=XXM=v^*`F_J0V%Gl>b2C1w(^a)^$4rAMjQ;=`2KmMbp1KqO
O0000<MNUMnLSTY6^;-u3

diff --git a/src/components/Home.vue b/src/components/Home.vue
index 4dde189..faa3f8b 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -1,17 +1,21 @@
 <script setup lang="ts">
-import Sidebar from "./home_components/sidebar.vue";
-import NiceThings from "./home_components/interesting-hashtags.vue";
 import Feed from "./home_components/feed.vue";
 import Contacts from "./home_components/contacts.vue";
 import Legal from "./home_components/legal.vue";
+import Navigationbar from "./home_components/navigationbar.vue";
+import Trending from "./home_components/trending.vue";
 </script>
 
 
 <template>
-  <div id="main" class="bg-weiss flex p-2">
-    <Sidebar></Sidebar>
-    <nice-things></nice-things>
-    <feed></feed>
+  <div id="main" class="bg-hintergrund-farbe flex">
+    <div id="left" class="border border-b-grau w-72">
+      <navigationbar></navigationbar>
+      <trending></trending>
+    </div>
+    <div class="w-100p">
+      <feed></feed>
+    </div>
     <div class="w-1/4">
       <contacts></contacts>
       <legal></legal>
diff --git a/src/components/Login.vue b/src/components/Login.vue
index 09f327f..aeebc7c 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,9 +1,19 @@
 <script setup>
 
+import Legal from "./home_components/legal.vue";
+import Sidebar from "./home_components/navigationbar.vue";
+import Contacts from "./home_components/contacts.vue";
 </script>
 
 <template>
-Login Page
+  <div id="main" class="bg-weiss flex p-2">
+    <Sidebar></Sidebar>
+    <p class="text-4xl m-60">WIP</p>
+    <div class="w-1/4">
+      <contacts></contacts>
+      <legal></legal>
+    </div>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/home_components/contacts.vue b/src/components/home_components/contacts.vue
index 9c66c50..4379838 100644
--- a/src/components/home_components/contacts.vue
+++ b/src/components/home_components/contacts.vue
@@ -13,14 +13,13 @@ const contacts =[
     </div>
     <div> <!--CONTENT-->
       <ul class="space-y-1">
-        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex justify-between rounded-lg">
+        <li v-for="(contact) in contacts" :key="contact" class="bg-grau-hell2 flex rounded-lg">
           <!--CONTACT-->
           <img src="../../assets/default_pp.png" alt="" class="w-16 h-16 mr-2">
-          <div class="flex flex-col">
+          <div class="">
             <label class="text-lg font-bold m-1" >{{ contact.display_name }}</label><br>
             <p class="text-base m-1 text-logo-farbe-blau underline-offset-3">@{{ contact.username }}</p>
           </div>
-          <img src="../../assets/icons/mail.png" alt="" class="ml-auto">
         </li>
       </ul>
     </div>
diff --git a/src/components/home_components/feed.vue b/src/components/home_components/feed.vue
index af3e09e..24f8085 100644
--- a/src/components/home_components/feed.vue
+++ b/src/components/home_components/feed.vue
@@ -3,59 +3,84 @@
   // import {valueOf} from "tailwindcss";
   const post = ref([
     {id: 1,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Linux Enjoyer",author_username: "lunix",
       content:"I love Linux. My Favorite Linux Distro is ARCH LINUX.",
       comments_count: 1, likes: 5},
     {id: 2,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "XBOX",author_username: "Xbox",
       content: "Call of Duty: Black Ops 6 is OUT NOW.",
       comments_count: 500000, likes: 100000},
     {id: 3,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "JETBrains",author_username: "Jetbrains",
       content: "BLI BLA BLUB. Jetbrains is the best IDE." ,
       comments_count: 5000, likes: 1000},
     {id: 4,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "GITHUB", author_username: "GitHub",
       content: "GitHub Copilot got an massive update. Check out the new features.",
       comments_count: 1500000, likes: 500000},
     {id: 5,
-      profile_picture: "@/assets/danielvici_pp.png",
+      profile_picture: "../../assets/danielvici_pp.png",
       author_display_name: "danielvici123", author_username: "danielvici",
       content: "I created this WebApp with VUE3 and TailwindCSS. It was a lot of fun.",
       comments_count: undefined, likes: 532844},
     {id: 6,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Microsoft", author_username: "Microsoft",
       content: "Windows 11 24H2 is out now. Learn more here: https://www.microsoft.com",
       comments_count: 500000, likes: 100000},
     {id: 7,
-      profile_picture: "@/assets/default_pp.png",
+      profile_picture: "../../assets/default_pp.png",
       author_display_name: "Apple", author_username: "Apple",
       content: "The new iPhone 16 is out now. Everything you need to know: https://www.apple.com",
       comments_count: 500000, likes: 100000},
   ])
 
-  const addLike = (index) => {
+  const addLike = (index: number) => {
     post.value[index].likes += 1;
     console.log("New Like Amount: ", post.value[index].likes);
 
   }
+  function post_publish_func(text:string) {
+    console.log("Post: ", text);
+    if (text === undefined || text === "") {
+      console.log("Post is empty");
+      alert("Post is empty");
+      return;
+    } else {
+      console.log("Post is not empty");
+      post.value.push({id: post.value.length + 1, profile_picture: "../../assets/danielvici_pp.png", author_display_name: "ADMIN", author_username: "esp_admin", content: text, comments_count: undefined, likes: 0});
+
+    }
+  }
 </script>
 
 <template>
-  <div class="p-2"> <!-- MAIN -->
-    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
-      <h2 class="align-middle m-2 text-xl p-1">Your Feed</h2>
+  <div class="border-x-2 border-x-grau2"> <!-- MAIN -->
+    <div> <!-- FEED HEADER -->
+      <h2 class="align-middle p-2 text-xl font-bold text-grau2 border-b-grau2 border-b ">Feed</h2>
+      <div class="flex border-2 border-b-grau2"> <!-- POSTING-->
+        <img src="../../assets/danielvici_pp.png" alt="" class="p-2 rounded-xl w-16 h-16">
+        <form>
+          <!-- post_publish ist richtig aber wird falsch angezeigt. File Input geht nicht-->
+          <textarea v-model="post_publish" name="post_text" class="bg-hintergrund-farbe rounded-lg m-2 p-1 focus:outline-none text-grau2 w-200p resize-none" rows="3" placeholder="Write something..."></textarea>
+          <div class="">
+            <input class="text-weiss" type="file" accept=".png, .jpg, .jpeg">
+            <button id="post_publish" name="post_publishss" class="text-weiss p-1 m-2 rounded-lg py-3 px-5 bg-button-farbe" @click.prevent="post_publish_func(post_publish)" type="button">Post</button>
+          </div>
+          </form>
+      </div>
     </div>
+
+
     <div> <!-- CONTENT -->
       <ul>
         <li v-for="(postitem, indexus) in post" :key="post" class="border border-b-grau-hell rounded-lg p-1 m-2 bg-grau-hell2 flex">
           <!-- POST -->
-          <img src="../../assets/default_pp.png" alt="" class="w-16 h-16">
+          <img src="../../assets/danielvici_pp.png" alt="" class="w-16 h-16">
           <div>
             <div> <!-- POST HEADER -->
               <label class="text-lg font-bold m-1">{{postitem.author_display_name}}</label>
@@ -64,7 +89,7 @@
             <div class="m-2"> <!-- POST CONTENT -->
               <p class="text-sm m-1">{{ postitem.content }}</p>
             </div>
-            <div class="flex "> <!-- POST FOOTER -->
+            <div class="flex"> <!-- POST FOOTER -->
               <div class="flex"> <!-- Comments -->
                 <img src="../../assets/icons/comment.png" alt="" class="align-middle">
                 <label class="text-sm m-1" v-if="postitem.comments_count != undefined">{{ postitem.comments_count }}</label>
@@ -72,7 +97,7 @@
               </div>
 
               <div class="flex items-center" @click="addLike(indexus)"> <!-- Likes -->
-                <img type="image" alt="" src="../../assets/icons/herz.png" class="align-middle">
+                <img alt="" src="../../assets/icons/herz.png" class="align-middle">
                 <label class="text-sm m-1">{{ postitem.likes }}</label>
               </div><!-- ENDE -->
             </div>
diff --git a/src/components/home_components/interesting-hashtags.vue b/src/components/home_components/interesting-hashtags.vue
deleted file mode 100644
index 873b64d..0000000
--- a/src/components/home_components/interesting-hashtags.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<script setup lang="ts">
-
-const hashtags = [
-  {id: 1,name: "xbox", nr_posts: 553 } ,
-  {id: 2,name: "lol" , nr_posts: 16422},
-  {id: 7,name: "jetbrains", nr_posts: 1251},
-  {id: 4,name: "github", nr_posts: 464},
-  {id: 5,name: "craftattack12",nr_posts: 4463},
-  {id: 6,name: "25" , nr_posts: 123},
-  {id: 3,name: "minecraft", nr_posts: 466},
-]
-
-hashtags.sort((a, b) => {
-  return b.nr_posts - a.nr_posts;
-})
-</script>
-
-<template>
-  <div class="p-2"> <!-- MAIN -->
-    <div class="bg-grau-hell rounded-lg"> <!-- HEADER -->
-      <h2 class="align-middle m-2 text-xl p-1">Trending Hashtags:</h2>
-    </div>
-    <div class="bg-grau-hell2"> <!-- CONTENT -->
-      <ul>
-        <li v-for="(hashtags) in hashtags " :key="hashtags">
-          <!-- HASHTAGS-->
-          <h1 class="text-lg font-bold m-1">#{{ hashtags.name }}</h1>
-          <p class="text-sm m-1">{{ hashtags.nr_posts }} posts</p>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/home_components/legal.vue b/src/components/home_components/legal.vue
index 7967e45..73027b9 100644
--- a/src/components/home_components/legal.vue
+++ b/src/components/home_components/legal.vue
@@ -3,12 +3,12 @@
 </script>
 
 <template>
-<label>
+<label class="text-grau2 m-2">
   <a href="">Terms of Service</a>
   -
   <a href="">Privacy Policy</a>
   -
-  <a href="">Imprint</a>
+  <a href="">Imprint</a><br>
   -
   <a href="">Contact</a>
   -
diff --git a/src/components/home_components/navigationbar.vue b/src/components/home_components/navigationbar.vue
new file mode 100644
index 0000000..620c994
--- /dev/null
+++ b/src/components/home_components/navigationbar.vue
@@ -0,0 +1,47 @@
+
+<script setup lang="ts">
+// Funktionen um die Seiten zu öffnen
+// home -> app.vue
+import router from "../../router";
+
+const sb_home = () => {
+  console.log("home");
+}
+const sb_search = () => {
+  console.log("Search");
+}
+const sb_notifications = () => {
+  console.log("Notifications");
+}
+const sb_messages = () => {
+  console.log("Messages");
+}
+const sb_accounts = () => {
+  console.log("Accounts");
+}
+const sb_settings = () => {
+  console.log("Settings");
+}
+
+</script>
+
+<template>
+  <div class="pt-4 border-2 border-b-grau2">
+    <div class="items-center flex justify-center">
+      <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24 mx-auto">
+    </div>
+    <div class="align-middle space-y-3 pt-3 pl-3 pb-4 font-bold text-xl">
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img  class="pr-2" src="../../assets/icons/home.png" alt="" v-on:click="sb_home"> Home</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-lila shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/lupe.png" alt=""  v-on:click="sb_search">Search</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/glocke.png" alt="" v-on:click="sb_notifications">Notifications</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-rot shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/mail.png" alt="" v-on:click="sb_messages">Messages</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/user.png" alt="" v-on:click="sb_accounts">Profile</label>
+      <label class="flex text-center text-grau2 hover:bg-logo-farbe-blau shadow-2xl rounded-lg"><img class="pr-2" src="../../assets/icons/zahnrad.png" alt="" v-on:click="sb_settings">Settings</label>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
+
diff --git a/src/components/home_components/sidebar.vue b/src/components/home_components/sidebar.vue
deleted file mode 100644
index 73b1e4c..0000000
--- a/src/components/home_components/sidebar.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-
-<script setup lang="ts">
-// Funktionen um die Seiten zu öffnen
-// home -> app.vue
-const sb_home = () => {
-  console.log("home");
-}
-const sb_search = () => {
-  console.log("Search");
-}
-const sb_notifications = () => {
-  console.log("Notifications");
-}
-const sb_messages = () => {
-  console.log("Messages");
-}
-const sb_accounts = () => {
-  console.log("Accounts");
-}
-const sb_settings = () => {
-  console.log("Settings");
-}
-
-</script>
-
-<template>
-  <div class="pt-4 pl-1">
-    <img src="../../assets/esp-logo_no_text.png" alt="" class="rounded-lg h-12 w-24">
-    <div class="align-middle space-y-3 pt-3 pl-3">
-      <img src="../../assets/icons/home-black.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_home">
-      <img src="../../assets/icons/lupe.png" alt="" class="hover:bg-logo-farbe-lila shadow-2xl rounded-lg" v-on:click="sb_search">
-      <img src="../../assets/icons/glocke.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_notifications">
-      <img src="../../assets/icons/mail.png" alt="" class="hover:bg-logo-farbe-rot shadow-2xl rounded-lg" v-on:click="sb_messages">
-      <img src="../../assets/icons/user.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_accounts">
-      <img src="../../assets/icons/zahnrad.png" alt="" class="hover:bg-logo-farbe-blau shadow-2xl rounded-lg" v-on:click="sb_settings">
-    </div>
-  </div>
-</template>
-
-<style scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/home_components/trending.vue b/src/components/home_components/trending.vue
new file mode 100644
index 0000000..f0289c9
--- /dev/null
+++ b/src/components/home_components/trending.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+
+const hashtags = [
+  {id: 1,name: "xbox", nr_posts: 553,category: "Gaming" } ,
+  {id: 2,name: "lol" , nr_posts: 16422, category: "Gaming"},
+  {id: 7,name: "jetbrains", nr_posts: 1251, category: "Programming"},
+  {id: 4,name: "github", nr_posts: 464, category: "Programming"},
+  {id: 5,name: "craftattack12",nr_posts: 4463, category: "Gaming"},
+  {id: 6,name: "25" , nr_posts: 123, category: "Numbers"},
+  {id: 3,name: "minecraft", nr_posts: 466, category: "Gaming"},
+]
+
+hashtags.sort((a, b) => {
+  return b.nr_posts - a.nr_posts;
+})
+</script>
+
+<template>
+  <div class="p-2"> <!-- MAIN -->
+    <!-- HEADER -->
+    <h2 class="align-middle m-2 text-2xl p-1 text-weiss font-bold">Trending</h2>
+    <div> <!-- CONTENT -->
+      <ul>
+        <li v-for="(hashtags, index) in hashtags " :key="hashtags" class="p-2">
+          <!-- HASHTAGS-->
+          <p class="text-sm m-1 text-grau2">{{ index+1 }} - {{ hashtags.category}}</p>
+          <h1 class="text-xl font-bold m-1 text-weiss">#{{ hashtags.name }}</h1>
+          <p class="text-sm m-1 text-grau2">{{ hashtags.nr_posts }} posts</p>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/login_components/settings.vue b/src/components/login_components/settings.vue
new file mode 100644
index 0000000..f79cdd8
--- /dev/null
+++ b/src/components/login_components/settings.vue
@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index ad543b7..9e28db8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,7 @@
 import './assets/main.css';
 import { createApp } from 'vue';
 import App from '../src/App.vue';
+// @ts-ignore
 import router from "./router/index.ts";
 
 const app = createApp(App);
diff --git a/src/router/index.ts b/src/router/index.ts
index 04e4971..df32f88 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -24,8 +24,8 @@ export default router;
 
 /*
 <script setup lang="ts">
-import Sidebar from "../src/components/sidebar.vue";
-import NiceThings from "../src/components/interesting-hashtags.vue";
+import Sidebar from "../src/components/navigationbar.vue";
+import NiceThings from "../src/components/trending.vue";
 import Feed from "../src/components/feed.vue";
 import Contacts from "../src/components/contacts.vue";
 import Legal from "../src/components/legal.vue";
diff --git a/tailwind.config.js b/tailwind.config.js
index a6b94bf..e1e488e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,15 +9,26 @@ export default {
       gridTemplateRows: {
         '70/30': '70% 28%'
       },
+        width: {
+          '100p': '100%',
+          '200p': '200%',
+          '300p': '300%',
+          '400p': '400%',
+          '500p': '500%',
+          '600p': '600%',
+        },
     },
     colors: {
         'logo-farbe-lila': '#5500a2',
         'logo-farbe-rot': '#a2002b',
         'logo-farbe-blau': '#0b1074',
         'weiss': '#ffffff',
+        'hintergrund-farbe': '#030a0c',
+        'button-farbe': '#00c0ff',
         'schwarz': '#000000',
-        'grau': '#404040',
         'grau-dunkel': '#1c1c1c',
+        'grau': '#404040',
+        'grau2': '#828487',
         'grau-hell': '#a29e9e',
         'grau-hell2': '#d5d3d3',
     }