From f9b5baae85b8f43274e76d8e0f889f33a79007dc Mon Sep 17 00:00:00 2001
From: a-ill <a_ill@outlook.com>
Date: Fri, 28 Jul 2023 21:20:07 +0300
Subject: [PATCH] Reworked navbar

---
 .../public/locales/en/navbar-component.json   |   2 +-
 .../public/locales/ru/navbar-component.json   |   2 +-
 .../svelte/src/navbar/navbar-component.svelte | 131 +++++++-----------
 .../public/js/components/navbar-component.js  |   2 +-
 .../public/locales/en/navbar-component.json   |   2 +-
 .../public/locales/ru/navbar-component.json   |   2 +-
 6 files changed, 57 insertions(+), 84 deletions(-)

diff --git a/Server/app/svelte/public/locales/en/navbar-component.json b/Server/app/svelte/public/locales/en/navbar-component.json
index 6ecb2b3..d4e3eda 100644
--- a/Server/app/svelte/public/locales/en/navbar-component.json
+++ b/Server/app/svelte/public/locales/en/navbar-component.json
@@ -2,7 +2,7 @@
     "orgName": "Libertarian socialists",
     "manifesto": "Manifesto",
     "joinUs": "Join us",
-    "aboutUs": "About us",
+    "initiatives": "Initiatives",
     "groups": "Groups",
     "communes": "Communes",
     "cooperatives": "Cooperatives",
diff --git a/Server/app/svelte/public/locales/ru/navbar-component.json b/Server/app/svelte/public/locales/ru/navbar-component.json
index ae8f1b9..527efd5 100644
--- a/Server/app/svelte/public/locales/ru/navbar-component.json
+++ b/Server/app/svelte/public/locales/ru/navbar-component.json
@@ -2,7 +2,7 @@
     "orgName": "Либертарные социалисты",
     "manifesto": "Манифест",
     "joinUs": "Присоединяйся",
-    "aboutUs": "О нас",
+    "initiatives": "Инициативы",
     "groups": "Группы",
     "communes": "Коммуны",
     "cooperatives": "Кооперативы",
diff --git a/Server/app/svelte/src/navbar/navbar-component.svelte b/Server/app/svelte/src/navbar/navbar-component.svelte
index 17411f3..a5c6f64 100644
--- a/Server/app/svelte/src/navbar/navbar-component.svelte
+++ b/Server/app/svelte/src/navbar/navbar-component.svelte
@@ -10,7 +10,8 @@
     // Main code
     let hambInput
     let navbar
-    let localesDropdown;
+    let localesDropdown
+    let initiativesDropdown
     let loaded = writable(0)
     let content = writable({})
     let logoText
@@ -33,12 +34,15 @@
         }
     }
 
-    function showLocales() {
-        if (localesDropdown.style.display=="block") {
-            localesDropdown.style.display = "none"
+    function showDropdown(dropdown) {
+        let state = dropdown.style.display
+        initiativesDropdown.style.display = "none"
+        localesDropdown.style.display = "none"
+        if (state=="block") {
+            dropdown.style.display = "none"
         }
         else {
-            localesDropdown.style.display = "block"
+            dropdown.style.display = "block"
         }
     }
 
@@ -75,9 +79,15 @@
         }
     }
 
+    function hide(dropdown) {
+        let callback = () => {
+            dropdown.style.display = "none"
+        }
+        setTimeout(callback,100)
+    }
 
     onMount(() => {
-
+        fixHeading()
     })
 
 </script>
@@ -85,7 +95,6 @@
 <!-- Navigation bar -->
 {#key loaded}
     {#if Object.keys($content).length!=0}
-    {fixHeading()}{console.log($content)}
         <header bind:this={navbar} id="navbar">
             <!-- Hamburger icon -->
             <input bind:this={hambInput} type="checkbox" id="side-menu" on:click={changeNavbar}>
@@ -98,29 +107,22 @@
             <!-- Menu -->
             <nav id="nav">
                 <ul id="menu">
-                    <li><a href={"/"+locale+"/manifesto"}>{$content.manifesto}</a></li>
                     <li><a href={"/"+locale+"/join-us"}>{$content.joinUs}</a></li>
-                    
+                    <li><a href={"/"+locale+"/manifesto"}>{$content.manifesto}</a></li>
                     <!-- Options dropdown -->
                     <!-- A list of links pointing to different pages of the website. Implemented as a div opened on :hover-->
                     <li id="options-container">
-                        <button id="options-button">{$content.aboutUs}</button>
-                        <div id="options-dropdown">
-                            <ul id="options-list">
-                                <li><a href={"/"+locale+"/groups"}>{$content.groups}</a></li>
-                                <li><a href={"/"+locale+"/communes"}>{$content.communes}</a></li>
-                                
-                                <li><a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a></li>
-                                <li><a href={"/"+locale+"/parties"}>{$content.parties}</a></li>
-                                <li><a href={"/"+locale+"/partners"}>{$content.partners}</a></li>
-                            </ul>
+                        <button on:click={() => showDropdown(initiativesDropdown)} on:focusout={() => hide(initiativesDropdown)} class="options-button">{$content.initiatives}</button>
+                        <div bind:this={initiativesDropdown} class="options-dropdown">
+                            <a href={"/"+locale+"/groups"}>{$content.groups}</a>
+                            <a href={"/"+locale+"/communes"}>{$content.communes}</a>
+                            <a href={"/"+locale+"/cooperatives"}>{$content.cooperatives}</a>
+                            <a href={"/"+locale+"/parties"}>{$content.parties}</a>
+                            <a href={"/"+locale+"/partners"}>{$content.partners}</a>
                         </div>
                     </li>
-                    
-
-                 
                     <li id="locales">
-                        <button on:click={showLocales}>
+                        <button on:click={() => showDropdown(localesDropdown)} on:focusout={() => hide(localesDropdown)}>
                             <picture>
                                 <source srcset="/img/common/globe.webp">
                                 <source srcset="/img/common/globe.png">
@@ -128,7 +130,7 @@
                             </picture>
                         </button>
                     </li>
-                    <div bind:this={localesDropdown} id="locales-dropdown">
+                    <div bind:this={localesDropdown} class="options-dropdown">
                         {#each Object.entries(locales) as [loc,name]}
                             <button on:click={() => changeLocale(loc)}>{name}</button>
                         {/each}
@@ -152,8 +154,8 @@
         width: min(100%,116rem);
         z-index: 1000000000;
         height: 5.26rem;
-        padding-left: 4rem;
-        padding-right: 4rem;
+        padding-left: 0rem;
+        padding-right: 0rem;
     }
 
     #navbar * {
@@ -202,7 +204,7 @@
         overflow: hidden;
         z-index: 0;
     }
-    #menu a, #options-button {
+    #menu > li > a, .options-button {
         display: block;
         padding: 1.2rem;
         padding-top: 1rem;
@@ -210,11 +212,8 @@
         color: black;
         font-size: 1.4rem;
     }
-    #menu a:hover {
-        background-color: rgb(220, 220, 220);
-    }
 
-    #menu a:active{
+    #menu > li > a:active{
         background-color: #f7aec0;
     }
 
@@ -301,37 +300,36 @@
 
     /* Options */
 
-    #options-dropdown {
+    .options-dropdown {
         position: absolute;
         display: none;
+        top: 5.6rem;
+        right: 1.8rem;
         border: #404040 solid 0.1rem;
-        /*padding: 0.5rem;*/
         background-color: white;
-        overflow: auto;
-        width: 35%;
+        z-index: 10;
     }
 
-    #options-list > li a {
-        padding: 1rem;
-        font-size: 1.1rem;
-    }
-
-    #options-list > li:hover {
-        background-color: rgb(187 53 52 / 96%);
+    .options-dropdown button, .options-dropdown a {
+        display: block;
+        font-family: var(--sans-serif,sans-serif);
+        font-size: 1.2rem;
         width: 100%;
+        padding: 1rem;
+        text-align: left;
     }
 
-    #options-list > li:hover > a{
+    .options-dropdown button:hover, .options-dropdown a:hover {
+        background-color: rgb(187 53 52 / 96%);
         color: white;
     }
 
-    #options-container:hover #options-dropdown {
-        display: block;
+    .options-button {
+        width: 100%;
+        text-align: left;
     }
-    
 
-
-    /*Localization*/
+    /* Localization */
 
     #locales {
         position: relative;
@@ -354,35 +352,15 @@
         margin-left: 1.2rem;
     }
 
-    #locales-dropdown {
-        position: absolute;
-        display: none;
-        top: 5.6rem;
-        right: 1.8rem;
-        border: #404040 solid 0.1rem;
-        padding: 1.4rem;
-        background-color: white;
-    }
-
-    #locales-dropdown button {
-        display: block;
-        font-family: var(--sans-serif,sans-serif);
-        font-size: 1.3rem;
-        width: 100%;
-    }
-
-    #locales-dropdown button:hover {
-        color: rgb(127, 127, 127);
-    }
-
-    #locales-dropdown>:first-child {
+    /*
+    #options-dropdown>:first-child {
         padding-bottom: 0.5rem;
     }
 
-    #locales-dropdown>:nth-child(2) {
+    #options-dropdown>:nth-child(2) {
         padding-top: 0.5rem;
     }
-
+    */
 
     /* Responsiveness */
     @media only screen and (min-width: 1400px) {
@@ -414,12 +392,11 @@
             float: left;
         }
 
-        #menu a:hover, #options-button:hover {
-            background-color: transparent;
+        #menu > li > a:hover, .options-button:hover, #navbar-logo-text:hover {
             color: rgb(127, 127, 127);
         }
 
-        #menu a {
+        #menu > li > a, .options-button {
             padding: 0.9rem;
             padding-top: 1.9rem;
             padding-bottom: 1.9rem;
@@ -437,10 +414,6 @@
         #locales-img {
             top: 0.9rem;
         }
-
-        #locales-dropdown {
-            top: 5,7rem;
-        }
     }
 
 </style>
\ No newline at end of file
diff --git a/Server/public/js/components/navbar-component.js b/Server/public/js/components/navbar-component.js
index 0ee69b1..b177e53 100644
--- a/Server/public/js/components/navbar-component.js
+++ b/Server/public/js/components/navbar-component.js
@@ -1 +1 @@
-import{S as e,i as t,a as n,b as o,s as i,e as r,n as a,d as l,c as s,o as d,t as c,h as m,g as h,j as p,k as u,m as g,p as f,q as b,u as w,r as v,f as y}from"./index-8c09578c.js";import{w as k}from"./index-77787e10.js";import{loadLocaleContent as x,locales as j}from"../../../../../../../../../js/libraries/serverTools.js";function H(e,t,n){const o=e.slice();return o[17]=t[n][0],o[18]=t[n][1],o}function z(e){let t,n,i,r,a,s,d,y,k,x,z,L,W,M,O,E,N,S,R,U,q,I,X,A,B,C,D,F,G,J,K,P,Q,V,Y,Z,$,_,ee,te,ne,oe,ie,re,ae,le,se,de,ce,me=e[11]()+"",he=e[4].orgName+"",pe=e[4].manifesto+"",ue=e[4].joinUs+"",ge=e[4].groups+"",fe=e[4].communes+"",be=e[4].cooperatives+"",we=e[4].parties+"",ve=e[4].partners+"",ye=Object.entries(j),ke=[];for(let t=0;t<ye.length;t+=1)ke[t]=T(H(e,ye,t));return{c(){t=c(me),n=m(),i=h("header"),r=h("input"),a=m(),s=h("label"),s.innerHTML='<span id="hamb-line"></span>',d=m(),y=h("a"),k=h("img"),z=m(),L=h("span"),W=m(),M=h("nav"),O=h("ul"),E=h("li"),N=h("a"),S=c(pe),R=m(),U=h("li"),q=h("a"),I=c(ue),X=m(),A=h("li"),B=h("a"),C=c(ge),D=m(),F=h("li"),G=h("a"),J=c(fe),K=m(),P=h("li"),Q=h("a"),V=c(be),Y=m(),Z=h("li"),$=h("a"),_=c(we),ee=m(),te=h("li"),ne=h("a"),oe=c(ve),ie=m(),re=h("li"),ae=h("button"),ae.innerHTML='<picture><source srcset="/img/common/globe.webp"/> \n                                <source srcset="/img/common/globe.png"/> \n                                <img id="locales-img" alt="globe"/></picture>',le=m(),se=h("div");for(let e=0;e<ke.length;e+=1)ke[e].c();p(r,"type","checkbox"),p(r,"id","side-menu"),p(s,"id","hamb"),p(s,"for","side-menu"),u(k.src,x="/img/common/flag.png")||p(k,"src","/img/common/flag.png"),p(k,"id","navbar-logo"),p(k,"alt","logo"),p(L,"id","navbar-logo-text"),p(y,"id","logo-container"),p(y,"href","/"+e[7]+"/"),p(N,"href","/"+e[7]+"/manifesto"),p(q,"href","/"+e[7]+"/join-us"),p(B,"href","/"+e[7]+"/groups"),p(G,"href","/"+e[7]+"/communes"),p(Q,"href","/"+e[7]+"/cooperatives"),p($,"href","/"+e[7]+"/parties"),p(ne,"href","/"+e[7]+"/partners"),p(re,"id","locales"),p(se,"id","locales-dropdown"),p(O,"id","menu"),p(M,"id","nav"),p(i,"id","navbar")},m(l,c){o(l,t,c),o(l,n,c),o(l,i,c),g(i,r),e[12](r),g(i,a),g(i,s),g(i,d),g(i,y),g(y,k),g(y,z),g(y,L),L.innerHTML=he,e[13](L),g(i,W),g(i,M),g(M,O),g(O,E),g(E,N),g(N,S),g(O,R),g(O,U),g(U,q),g(q,I),g(O,X),g(O,A),g(A,B),g(B,C),g(O,D),g(O,F),g(F,G),g(G,J),g(O,K),g(O,P),g(P,Q),g(Q,V),g(O,Y),g(O,Z),g(Z,$),g($,_),g(O,ee),g(O,te),g(te,ne),g(ne,oe),g(O,ie),g(O,re),g(re,ae),g(O,le),g(O,se);for(let e=0;e<ke.length;e+=1)ke[e].m(se,null);e[15](se),e[16](i),de||(ce=[f(r,"click",e[8]),f(ae,"click",e[9])],de=!0)},p(e,t){if(16&t&&he!==(he=e[4].orgName+"")&&(L.innerHTML=he),16&t&&pe!==(pe=e[4].manifesto+"")&&b(S,pe),16&t&&ue!==(ue=e[4].joinUs+"")&&b(I,ue),16&t&&ge!==(ge=e[4].groups+"")&&b(C,ge),16&t&&fe!==(fe=e[4].communes+"")&&b(J,fe),16&t&&be!==(be=e[4].cooperatives+"")&&b(V,be),16&t&&we!==(we=e[4].parties+"")&&b(_,we),16&t&&ve!==(ve=e[4].partners+"")&&b(oe,ve),1024&t){let n;for(ye=Object.entries(j),n=0;n<ye.length;n+=1){const o=H(e,ye,n);ke[n]?ke[n].p(o,t):(ke[n]=T(o),ke[n].c(),ke[n].m(se,null))}for(;n<ke.length;n+=1)ke[n].d(1);ke.length=ye.length}},d(o){o&&l(t),o&&l(n),o&&l(i),e[12](null),e[13](null),w(ke,o),e[15](null),e[16](null),de=!1,v(ce)}}}function T(e){let t,n,i,r,a=e[18]+"";function s(){return e[14](e[17])}return{c(){t=h("button"),n=c(a)},m(e,a){o(e,t,a),g(t,n),i||(r=f(t,"click",s),i=!0)},p(t,n){e=t},d(e){e&&l(t),i=!1,r()}}}function L(e){let t,n=0!=Object.keys(e[4]).length,i=n&&z(e);return{c(){i&&i.c(),t=r(),this.c=a},m(e,n){i&&i.m(e,n),o(e,t,n)},p(e,[o]){16&o&&(n=0!=Object.keys(e[4]).length),n?i?i.p(e,o):(i=z(e),i.c(),i.m(t.parentNode,t)):i&&(i.d(1),i=null)},i:a,o:a,d(e){i&&i.d(e),e&&l(t)}}}function W(e,t,n){let o,i,r,a,l,c=k(0),m=k({});s(e,m,(e=>n(4,o=e)));let h=x(m,"navbar-component",c);function p(e){localStorage.setItem("locale",e);let t=location.href.split("/"),n=Object.keys(j);t=t.filter((e=>!n.includes(e)));let o=t.slice(0,t.length-1).join("/")+"/"+e+"/"+t[t.length-1];location.href=o}d((()=>{}));return[i,r,a,l,o,c,m,h,function(){i.checked?n(1,r.style.background="white",r):setTimeout((()=>{n(1,r.style.position="relative",r),n(1,r.style.background="",r),n(1,r.style.boxShadow="",r)}),510)},function(){"block"==a.style.display?n(2,a.style.display="none",a):n(2,a.style.display="block",a)},p,function(){if("ru"==h){let e=()=>{null==l?setTimeout(e,100):(window.innerWidth<1700&&window.innerWidth>1400||window.innerWidth<400)&&"100%"!=l.style.lineHeight?(n(3,l.style.lineHeight="120%",l),n(3,l.style.top="1rem",l),n(3,l.style.width="16rem",l)):(window.innerWidth>1700||window.innerWidth>400&&window.innerWidth<1400)&&"400%"!=l.style.lineHeight&&(n(3,l.style.lineHeight="400%",l),n(3,l.style.top="0rem",l),n(3,l.style.width="auto",l))};e(),addEventListener("resize",e)}},function(e){y[e?"unshift":"push"]((()=>{i=e,n(0,i)}))},function(e){y[e?"unshift":"push"]((()=>{l=e,n(3,l)}))},e=>p(e),function(e){y[e?"unshift":"push"]((()=>{a=e,n(2,a)}))},function(e){y[e?"unshift":"push"]((()=>{r=e,n(1,r)}))}]}class M extends e{constructor(e){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#navbar{position:relative;top:0;width:min(100%,116rem);z-index:1000000000;height:5.26rem}#navbar *{font-family:var(--sans-serif, sans-serif)}#logo-container{display:flex;position:absolute;margin-left:1rem;height:100%;max-height:5.26rem;color:black;z-index:1;flex-direction:row;flex-wrap:nowrap;align-items:center}#navbar-logo{height:3.5rem;width:3.5rem;object-fit:contain;border-radius:10rem}#navbar-logo-text{position:relative;word-wrap:normal;height:100%;line-height:400%;font-size:1.4rem;color:#292222;font-family:var(--sans-serif, sans-serif);font-weight:400;padding-left:1.2rem}#nav{position:fixed;width:100%;height:100%;background-color:white;overflow:hidden;z-index:0}#menu a{display:block;padding:1.2rem;padding-top:1rem;padding-bottom:1rem;color:black;font-size:1.4rem}#menu a:hover{background-color:rgb(220, 220, 220)}#menu a:active{background-color:#f7aec0}#menu li{list-style-type:none}#nav{max-height:0}#hamb{position:absolute;cursor:pointer;right:0rem;padding:2.8rem 2rem;z-index:9999}#hamb-line{background:black;display:block;height:2px;position:relative;width:24px}#hamb-line::before,#hamb-line::after{background:black;content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}#hamb-line::before{top:5px}#hamb-line::after{top:-5px}#side-menu{display:none}#side-menu:checked~nav{display:block;max-height:100%;padding-top:5.625rem}#side-menu:checked~#logo-container{position:fixed}#side-menu:checked~#hamb{position:fixed}#side-menu:checked~#logo-container{position:fixed}#side-menu:checked~#hamb #hamb-line{background:transparent}#side-menu:checked~#hamb #hamb-line::before{transform:rotate(-45deg);top:0}#side-menu:checked~#hamb #hamb-line::after{transform:rotate(45deg);top:0}#locales{position:relative}#locales button{width:100%;text-align:left;height:4rem}#locales button:hover{opacity:0.5}#locales-img{position:relative;top:0rem;height:2rem;margin-left:1.2rem}#locales-dropdown{position:absolute;display:none;top:5.6rem;right:1.8rem;border:#404040 solid 0.1rem;padding:1.4rem;background-color:white}#locales-dropdown button{display:block;font-family:var(--sans-serif,sans-serif);font-size:1.3rem;width:100%}#locales-dropdown button:hover{color:rgb(127, 127, 127)}#locales-dropdown>:first-child{padding-bottom:0.5rem}#locales-dropdown>:nth-child(2){padding-top:0.5rem}@media only screen and (min-width: 1400px){#navbar{position:relative;width:min(95%,116rem);left:50%;transform:translateX(-50%)}#nav{max-height:none;top:0;position:relative;float:right;width:fit-content;background-color:transparent;overflow:visible}#side-menu:checked~nav{padding-top:0}#menu li{float:left}#menu a:hover{background-color:transparent;color:rgb(127, 127, 127)}#menu a{padding:0.9rem;padding-top:1.9rem;padding-bottom:1.9rem}#hamb{display:none}#locales{position:relative;margin-right:1.8rem}#locales-img{top:0.9rem}#locales-dropdown{top:5,7rem}}</style>",t(this,{target:this.shadowRoot,props:n(this.attributes),customElement:!0},W,L,i,{},null),e&&e.target&&o(e.target,this,e.anchor)}}customElements.define("navbar-component",M);export{M as default};
+import{S as e,i as t,a as n,b as o,s as i,e as a,n as r,d as s,c as l,o as d,g as c,h as m,t as p,j as h,k as u,m as g,p as f,q as b,u as v,r as w,f as y}from"./index-8c09578c.js";import{w as k}from"./index-77787e10.js";import{loadLocaleContent as x,locales as j}from"../../../../../../../../../js/libraries/serverTools.js";function z(e,t,n){const o=e.slice();return o[23]=t[n][0],o[24]=t[n][1],o}function H(e){let t,n,i,a,r,l,d,y,k,x,H,L,W,M,O,E,N,S,R,U,q,I,X,A,B,C,D,F,G,J,K,P,Q,V,Y,Z,$,_,ee,te,ne,oe,ie,ae,re,se,le,de=e[5].orgName+"",ce=e[5].joinUs+"",me=e[5].manifesto+"",pe=e[5].initiatives+"",he=e[5].groups+"",ue=e[5].communes+"",ge=e[5].cooperatives+"",fe=e[5].parties+"",be=e[5].partners+"",ve=Object.entries(j),we=[];for(let t=0;t<ve.length;t+=1)we[t]=T(z(e,ve,t));return{c(){t=c("header"),n=c("input"),i=m(),a=c("label"),a.innerHTML='<span id="hamb-line"></span>',r=m(),l=c("a"),d=c("img"),k=m(),x=c("span"),H=m(),L=c("nav"),W=c("ul"),M=c("li"),O=c("a"),E=p(ce),N=m(),S=c("li"),R=c("a"),U=p(me),q=m(),I=c("li"),X=c("button"),A=p(pe),B=m(),C=c("div"),D=c("a"),F=p(he),G=m(),J=c("a"),K=p(ue),P=m(),Q=c("a"),V=p(ge),Y=m(),Z=c("a"),$=p(fe),_=m(),ee=c("a"),te=p(be),ne=m(),oe=c("li"),ie=c("button"),ie.innerHTML='<picture><source srcset="/img/common/globe.webp"/> \n                                <source srcset="/img/common/globe.png"/> \n                                <img id="locales-img" alt="globe"/></picture>',ae=m(),re=c("div");for(let e=0;e<we.length;e+=1)we[e].c();h(n,"type","checkbox"),h(n,"id","side-menu"),h(a,"id","hamb"),h(a,"for","side-menu"),u(d.src,y="/img/common/flag.png")||h(d,"src","/img/common/flag.png"),h(d,"id","navbar-logo"),h(d,"alt","logo"),h(x,"id","navbar-logo-text"),h(l,"id","logo-container"),h(l,"href","/"+e[8]+"/"),h(O,"href","/"+e[8]+"/join-us"),h(R,"href","/"+e[8]+"/manifesto"),h(X,"class","options-button"),h(D,"href","/"+e[8]+"/groups"),h(J,"href","/"+e[8]+"/communes"),h(Q,"href","/"+e[8]+"/cooperatives"),h(Z,"href","/"+e[8]+"/parties"),h(ee,"href","/"+e[8]+"/partners"),h(C,"class","options-dropdown"),h(I,"id","options-container"),h(oe,"id","locales"),h(re,"class","options-dropdown"),h(W,"id","menu"),h(L,"id","nav"),h(t,"id","navbar")},m(s,c){o(s,t,c),g(t,n),e[12](n),g(t,i),g(t,a),g(t,r),g(t,l),g(l,d),g(l,k),g(l,x),x.innerHTML=de,e[13](x),g(t,H),g(t,L),g(L,W),g(W,M),g(M,O),g(O,E),g(W,N),g(W,S),g(S,R),g(R,U),g(W,q),g(W,I),g(I,X),g(X,A),g(I,B),g(I,C),g(C,D),g(D,F),g(C,G),g(C,J),g(J,K),g(C,P),g(C,Q),g(Q,V),g(C,Y),g(C,Z),g(Z,$),g(C,_),g(C,ee),g(ee,te),e[16](C),g(W,ne),g(W,oe),g(oe,ie),g(W,ae),g(W,re);for(let e=0;e<we.length;e+=1)we[e].m(re,null);e[20](re),e[21](t),se||(le=[f(n,"click",e[9]),f(X,"click",e[14]),f(X,"focusout",e[15]),f(ie,"click",e[17]),f(ie,"focusout",e[18])],se=!0)},p(e,t){if(32&t&&de!==(de=e[5].orgName+"")&&(x.innerHTML=de),32&t&&ce!==(ce=e[5].joinUs+"")&&b(E,ce),32&t&&me!==(me=e[5].manifesto+"")&&b(U,me),32&t&&pe!==(pe=e[5].initiatives+"")&&b(A,pe),32&t&&he!==(he=e[5].groups+"")&&b(F,he),32&t&&ue!==(ue=e[5].communes+"")&&b(K,ue),32&t&&ge!==(ge=e[5].cooperatives+"")&&b(V,ge),32&t&&fe!==(fe=e[5].parties+"")&&b($,fe),32&t&&be!==(be=e[5].partners+"")&&b(te,be),2048&t){let n;for(ve=Object.entries(j),n=0;n<ve.length;n+=1){const o=z(e,ve,n);we[n]?we[n].p(o,t):(we[n]=T(o),we[n].c(),we[n].m(re,null))}for(;n<we.length;n+=1)we[n].d(1);we.length=ve.length}},d(n){n&&s(t),e[12](null),e[13](null),e[16](null),v(we,n),e[20](null),e[21](null),se=!1,w(le)}}}function T(e){let t,n,i,a,r=e[24]+"";function l(){return e[19](e[23])}return{c(){t=c("button"),n=p(r)},m(e,r){o(e,t,r),g(t,n),i||(a=f(t,"click",l),i=!0)},p(t,n){e=t},d(e){e&&s(t),i=!1,a()}}}function L(e){let t,n=0!=Object.keys(e[5]).length,i=n&&H(e);return{c(){i&&i.c(),t=a(),this.c=r},m(e,n){i&&i.m(e,n),o(e,t,n)},p(e,[o]){32&o&&(n=0!=Object.keys(e[5]).length),n?i?i.p(e,o):(i=H(e),i.c(),i.m(t.parentNode,t)):i&&(i.d(1),i=null)},i:r,o:r,d(e){i&&i.d(e),e&&s(t)}}}function W(e){setTimeout((()=>{e.style.display="none"}),100)}function M(e,t,n){let o,i,a,r,s,c,m=k(0),p=k({});l(e,p,(e=>n(5,o=e)));let h=x(p,"navbar-component",m);function u(e){let t=e.style.display;n(3,s.style.display="none",s),n(2,r.style.display="none",r),e.style.display="block"==t?"none":"block"}function g(e){localStorage.setItem("locale",e);let t=location.href.split("/"),n=Object.keys(j);t=t.filter((e=>!n.includes(e)));let o=t.slice(0,t.length-1).join("/")+"/"+e+"/"+t[t.length-1];location.href=o}d((()=>{!function(){if("ru"==h){let e=()=>{null==c?setTimeout(e,100):(window.innerWidth<1700&&window.innerWidth>1400||window.innerWidth<400)&&"100%"!=c.style.lineHeight?(n(4,c.style.lineHeight="120%",c),n(4,c.style.top="1rem",c),n(4,c.style.width="16rem",c)):(window.innerWidth>1700||window.innerWidth>400&&window.innerWidth<1400)&&"400%"!=c.style.lineHeight&&(n(4,c.style.lineHeight="400%",c),n(4,c.style.top="0rem",c),n(4,c.style.width="auto",c))};e(),addEventListener("resize",e)}}()}));return[i,a,r,s,c,o,m,p,h,function(){i.checked?n(1,a.style.background="white",a):setTimeout((()=>{n(1,a.style.position="relative",a),n(1,a.style.background="",a),n(1,a.style.boxShadow="",a)}),510)},u,g,function(e){y[e?"unshift":"push"]((()=>{i=e,n(0,i)}))},function(e){y[e?"unshift":"push"]((()=>{c=e,n(4,c)}))},()=>u(s),()=>W(s),function(e){y[e?"unshift":"push"]((()=>{s=e,n(3,s)}))},()=>u(r),()=>W(r),e=>g(e),function(e){y[e?"unshift":"push"]((()=>{r=e,n(2,r)}))},function(e){y[e?"unshift":"push"]((()=>{a=e,n(1,a)}))}]}class O extends e{constructor(e){super(),this.shadowRoot.innerHTML="<style>@import '/css/common.css';#navbar{position:relative;top:0;width:min(100%,116rem);z-index:1000000000;height:5.26rem;padding-left:0rem;padding-right:0rem}#navbar *{font-family:var(--sans-serif, sans-serif)}#logo-container{display:flex;position:absolute;margin-left:1rem;height:100%;max-height:5.26rem;color:black;z-index:1;flex-direction:row;flex-wrap:nowrap;align-items:center}#navbar-logo{height:3.5rem;width:3.5rem;object-fit:contain;border-radius:10rem}#navbar-logo-text{position:relative;word-wrap:normal;height:100%;line-height:400%;font-size:1.4rem;color:#292222;font-family:var(--sans-serif, sans-serif);font-weight:400;padding-left:1.2rem}#nav{position:fixed;width:100%;height:100%;background-color:white;overflow:hidden;z-index:0}#menu>li>a,.options-button{display:block;padding:1.2rem;padding-top:1rem;padding-bottom:1rem;color:black;font-size:1.4rem}#menu>li>a:active{background-color:#f7aec0}#menu li{list-style-type:none}#nav{max-height:0}#hamb{position:absolute;cursor:pointer;right:0rem;padding:2.8rem 2rem;z-index:9999}#hamb-line{background:black;display:block;height:2px;position:relative;width:24px}#hamb-line::before,#hamb-line::after{background:black;content:'';display:block;height:100%;position:absolute;transition:all .2s ease-out;width:100%}#hamb-line::before{top:5px}#hamb-line::after{top:-5px}#side-menu{display:none}#side-menu:checked~nav{display:block;max-height:100%;padding-top:5.625rem}#side-menu:checked~#logo-container{position:fixed}#side-menu:checked~#hamb{position:fixed}#side-menu:checked~#logo-container{position:fixed}#side-menu:checked~#hamb #hamb-line{background:transparent}#side-menu:checked~#hamb #hamb-line::before{transform:rotate(-45deg);top:0}#side-menu:checked~#hamb #hamb-line::after{transform:rotate(45deg);top:0}.options-dropdown{position:absolute;display:none;top:5.6rem;right:1.8rem;border:#404040 solid 0.1rem;background-color:white;z-index:10}.options-dropdown button,.options-dropdown a{display:block;font-family:var(--sans-serif,sans-serif);font-size:1.2rem;width:100%;padding:1rem;text-align:left}.options-dropdown button:hover,.options-dropdown a:hover{background-color:rgb(187 53 52 / 96%);color:white}.options-button{width:100%;text-align:left}#locales{position:relative}#locales button{width:100%;text-align:left;height:4rem}#locales button:hover{opacity:0.5}#locales-img{position:relative;top:0rem;height:2rem;margin-left:1.2rem}@media only screen and (min-width: 1400px){#navbar{position:relative;width:min(100%,116rem);left:50%;transform:translateX(-50%);padding-right:4rem;padding-left:4rem}#nav{max-height:none;top:0;position:relative;float:right;width:fit-content;background-color:transparent;overflow:visible}#side-menu:checked~nav{padding-top:0}#menu li{float:left}#menu>li>a:hover,.options-button:hover,#navbar-logo-text:hover{color:rgb(127, 127, 127)}#menu>li>a,.options-button{padding:0.9rem;padding-top:1.9rem;padding-bottom:1.9rem}#hamb{display:none}#locales{position:relative;margin-right:1.8rem}#locales-img{top:0.9rem}}</style>",t(this,{target:this.shadowRoot,props:n(this.attributes),customElement:!0},M,L,i,{},null),e&&e.target&&o(e.target,this,e.anchor)}}customElements.define("navbar-component",O);export{O as default};
diff --git a/Server/public/locales/en/navbar-component.json b/Server/public/locales/en/navbar-component.json
index 6ecb2b3..d4e3eda 100644
--- a/Server/public/locales/en/navbar-component.json
+++ b/Server/public/locales/en/navbar-component.json
@@ -2,7 +2,7 @@
     "orgName": "Libertarian socialists",
     "manifesto": "Manifesto",
     "joinUs": "Join us",
-    "aboutUs": "About us",
+    "initiatives": "Initiatives",
     "groups": "Groups",
     "communes": "Communes",
     "cooperatives": "Cooperatives",
diff --git a/Server/public/locales/ru/navbar-component.json b/Server/public/locales/ru/navbar-component.json
index ae8f1b9..527efd5 100644
--- a/Server/public/locales/ru/navbar-component.json
+++ b/Server/public/locales/ru/navbar-component.json
@@ -2,7 +2,7 @@
     "orgName": "Либертарные социалисты",
     "manifesto": "Манифест",
     "joinUs": "Присоединяйся",
-    "aboutUs": "О нас",
+    "initiatives": "Инициативы",
     "groups": "Группы",
     "communes": "Коммуны",
     "cooperatives": "Кооперативы",