logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

side_drawer.vue (10555B)

    

  1. <template>
  2.   <div
  3.     class="side-drawer-container mobile-drawer"
  4.     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
  5.   >
  6.     <div
  7.       class="side-drawer-darken"
  8.       :class="{ 'side-drawer-darken-closed': closed}"
  9.     />
  10.     <div
  11.       class="side-drawer"
  12.       :class="{'side-drawer-closed': closed}"
  13.       @touchstart="touchStart"
  14.       @touchmove="touchMove"
  15.     >
  16.       <div
  17.         class="side-drawer-heading"
  18.         @click="toggleDrawer"
  19.       >
  20.         <UserCard
  21.           v-if="currentUser"
  22.           :user-id="currentUser.id"
  23.           :hide-bio="true"
  24.         />
  25.         <div
  26.           v-else
  27.           class="side-drawer-logo-wrapper"
  28.         >
  29.           <img :src="logo">
  30.           <span v-if="!hideSitename">{{ sitename }}</span>
  31.         </div>
  32.       </div>
  33.       <ul>
  34.         <li
  35.           v-if="!currentUser"
  36.           @click="toggleDrawer"
  37.         >
  38.           <router-link
  39.             :to="{ name: 'login' }"
  40.             class="menu-item"
  41.           >
  42.             <FAIcon
  43.               fixed-width
  44.               class="fa-scale-110 fa-old-padding"
  45.               icon="sign-in-alt"
  46.             /> {{ $t("login.login") }}
  47.           </router-link>
  48.         </li>
  49.         <li
  50.           v-if="currentUser || !privateMode"
  51.           @click="toggleDrawer"
  52.         >
  53.           <router-link
  54.             :to="timelinesRoute"
  55.             class="menu-item"
  56.           >
  57.             <FAIcon
  58.               fixed-width
  59.               class="fa-scale-110 fa-old-padding"
  60.               icon="home"
  61.             /> {{ $t("nav.timelines") }}
  62.           </router-link>
  63.         </li>
  64.         <li
  65.           v-if="currentUser"
  66.           @click="toggleDrawer"
  67.         >
  68.           <router-link
  69.             :to="{ name: 'lists' }"
  70.             class="menu-item"
  71.           >
  72.             <FAIcon
  73.               fixed-width
  74.               class="fa-scale-110 fa-old-padding"
  75.               icon="list"
  76.             /> {{ $t("nav.lists") }}
  77.           </router-link>
  78.         </li>
  79.         <li
  80.           v-if="currentUser"
  81.           @click="toggleDrawer"
  82.         >
  83.           <router-link
  84.             :to="{ name: 'bookmarks' }"
  85.             class="menu-item"
  86.           >
  87.             <FAIcon
  88.               fixed-width
  89.               class="fa-scale-110 fa-old-padding"
  90.               icon="bookmark"
  91.             /> {{ $t("nav.bookmarks") }}
  92.           </router-link>
  93.         </li>
  94.         <li
  95.           v-if="currentUser && pleromaChatMessagesAvailable"
  96.           @click="toggleDrawer"
  97.         >
  98.           <router-link
  99.             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
  100.             style="position: relative;"
  101.             class="menu-item"
  102.           >
  103.             <FAIcon
  104.               fixed-width
  105.               class="fa-scale-110 fa-old-padding"
  106.               icon="comments"
  107.             /> {{ $t("nav.chats") }}
  108.             <span
  109.               v-if="unreadChatCount"
  110.               class="badge -notification"
  111.             >
  112.               {{ unreadChatCount }}
  113.             </span>
  114.           </router-link>
  115.         </li>
  116.       </ul>
  117.       <ul v-if="currentUser">
  118.         <li @click="toggleDrawer">
  119.           <router-link
  120.             :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
  121.             class="menu-item"
  122.           >
  123.             <FAIcon
  124.               fixed-width
  125.               class="fa-scale-110 fa-old-padding"
  126.               icon="bell"
  127.             /> {{ $t("nav.interactions") }}
  128.           </router-link>
  129.         </li>
  130.         <li
  131.           v-if="currentUser.locked"
  132.           @click="toggleDrawer"
  133.         >
  134.           <router-link
  135.             to="/friend-requests"
  136.             class="menu-item"
  137.           >
  138.             <FAIcon
  139.               fixed-width
  140.               class="fa-scale-110 fa-old-padding"
  141.               icon="user-plus"
  142.             /> {{ $t("nav.friend_requests") }}
  143.             <span
  144.               v-if="followRequestCount > 0"
  145.               class="badge -notification"
  146.             >
  147.               {{ followRequestCount }}
  148.             </span>
  149.           </router-link>
  150.         </li>
  151.         <li
  152.           v-if="shout"
  153.           @click="toggleDrawer"
  154.         >
  155.           <router-link
  156.             :to="{ name: 'shout-panel' }"
  157.             class="menu-item"
  158.           >
  159.             <FAIcon
  160.               fixed-width
  161.               class="fa-scale-110 fa-old-padding"
  162.               icon="bullhorn"
  163.             /> {{ $t("shoutbox.title") }}
  164.           </router-link>
  165.         </li>
  166.       </ul>
  167.       <ul>
  168.         <li
  169.           v-if="currentUser || !privateMode"
  170.           @click="toggleDrawer"
  171.         >
  172.           <router-link
  173.             :to="{ name: 'search' }"
  174.             class="menu-item"
  175.           >
  176.             <FAIcon
  177.               fixed-width
  178.               class="fa-scale-110 fa-old-padding"
  179.               icon="search"
  180.             /> {{ $t("nav.search") }}
  181.           </router-link>
  182.         </li>
  183.         <li
  184.           v-if="currentUser && suggestionsEnabled"
  185.           @click="toggleDrawer"
  186.         >
  187.           <router-link
  188.             :to="{ name: 'who-to-follow' }"
  189.             class="menu-item"
  190.           >
  191.             <FAIcon
  192.               fixed-width
  193.               class="fa-scale-110 fa-old-padding"
  194.               icon="user-plus"
  195.             /> {{ $t("nav.who_to_follow") }}
  196.           </router-link>
  197.         </li>
  198.         <li @click="toggleDrawer">
  199.           <button
  200.             class="menu-item"
  201.             @click="openSettingsModal"
  202.           >
  203.             <FAIcon
  204.               fixed-width
  205.               class="fa-scale-110 fa-old-padding"
  206.               icon="cog"
  207.             /> {{ $t("settings.settings") }}
  208.           </button>
  209.         </li>
  210.         <li @click="toggleDrawer">
  211.           <router-link
  212.             :to="{ name: 'about'}"
  213.             class="menu-item"
  214.           >
  215.             <FAIcon
  216.               fixed-width
  217.               class="fa-scale-110 fa-old-padding"
  218.               icon="info-circle"
  219.             /> {{ $t("nav.about") }}
  220.           </router-link>
  221.         </li>
  222.         <li
  223.           v-if="currentUser && currentUser.role === 'admin'"
  224.           @click="toggleDrawer"
  225.         >
  226.           <button
  227.             class="menu-item"
  228.             @click.stop="openAdminModal"
  229.           >
  230.             <FAIcon
  231.               fixed-width
  232.               class="fa-scale-110 fa-old-padding"
  233.               icon="tachometer-alt"
  234.             /> {{ $t("nav.administration") }}
  235.           </button>
  236.         </li>
  237.         <li
  238.           v-if="currentUser && supportsAnnouncements"
  239.           @click="toggleDrawer"
  240.         >
  241.           <router-link
  242.             :to="{ name: 'announcements' }"
  243.             class="menu-item"
  244.           >
  245.             <FAIcon
  246.               fixed-width
  247.               class="fa-scale-110 fa-old-padding"
  248.               icon="bullhorn"
  249.             /> {{ $t("nav.announcements") }}
  250.             <span
  251.               v-if="unreadAnnouncementCount"
  252.               class="badge -notification"
  253.             >
  254.               {{ unreadAnnouncementCount }}
  255.             </span>
  256.           </router-link>
  257.         </li>
  258.         <li
  259.           v-if="currentUser"
  260.           @click="toggleDrawer"
  261.         >
  262.           <router-link
  263.             :to="{ name: 'drafts' }"
  264.             class="menu-item"
  265.           >
  266.             <FAIcon
  267.               fixed-width
  268.               class="fa-scale-110 fa-old-padding"
  269.               icon="file-pen"
  270.             /> {{ $t('nav.drafts') }}
  271.             <span
  272.               v-if="draftCount"
  273.               class="badge -neutral"
  274.             >
  275.               {{ draftCount }}
  276.             </span>
  277.           </router-link>
  278.         </li>
  279.         <li
  280.           v-if="currentUser"
  281.           @click="toggleDrawer"
  282.         >
  283.           <router-link
  284.             :to="{ name: 'edit-navigation' }"
  285.             class="menu-item"
  286.           >
  287.             <FAIcon
  288.               fixed-width
  289.               class="fa-scale-110 fa-old-padding"
  290.               icon="compass"
  291.             /> {{ $t("nav.edit_nav_mobile") }}
  292.           </router-link>
  293.         </li>
  294.         <li
  295.           v-if="currentUser"
  296.           @click="toggleDrawer"
  297.         >
  298.           <button
  299.             class="menu-item"
  300.             @click="doLogout"
  301.           >
  302.             <FAIcon
  303.               fixed-width
  304.               class="fa-scale-110 fa-old-padding"
  305.               icon="sign-out-alt"
  306.             /> {{ $t("login.logout") }}
  307.           </button>
  308.         </li>
  309.       </ul>
  310.     </div>
  311.     <div
  312.       class="side-drawer-click-outside"
  313.       :class="{'side-drawer-click-outside-closed': closed}"
  314.       @click.stop.prevent="toggleDrawer"
  315.     />
  316.   </div>
  317. </template>
  319. <script src="./side_drawer.js"></script>
  321. <style lang="scss">
  322. .side-drawer-container {
  323.   position: fixed;
  324.   z-index: var(--ZI_navbar);
  325.   top: 0;
  326.   left: 0;
  327.   width: 100%;
  328.   height: 100%;
  329.   display: flex;
  330.   align-items: stretch;
  331.   transition-duration: 0s;
  332.   transition-property: transform;
  333. }
  335. .side-drawer-container-open {
  336.   transform: translate(0%);
  337. }
  339. .side-drawer-container-closed {
  340.   transition-delay: 0.35s;
  341.   transform: translate(-100%);
  342. }
  344. .side-drawer-darken {
  345.   top: 0;
  346.   left: 0;
  347.   width: 100vw;
  348.   height: 100vh;
  349.   position: fixed;
  350.   z-index: -1;
  351.   transition: 0.35s;
  352.   transition-property: background-color;
  353.   background-color: rgb(0 0 0 / 50%);
  354. }
  356. .side-drawer-darken-closed {
  357.   background-color: rgb(0 0 0 / 0%);
  358. }
  360. .side-drawer-click-outside {
  361.   flex: 1 1 100%;
  362. }
  364. .side-drawer {
  365.   overflow-x: hidden;
  366.   transition: 0.35s;
  367.   transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  368.   transition-property: transform;
  369.   margin: 0 0 0 -100px;
  370.   padding: 0 0 1em 100px;
  371.   width: 80%;
  372.   max-width: 20em;
  373.   flex: 0 0 80%;
  374.   box-shadow: var(--shadow);
  375.   background-color: var(--background);
  377.   .badge {
  378.     margin-left: 10px;
  379.   }
  380. }
  382. .side-drawer-logo-wrapper {
  383.   display: flex;
  384.   align-items: center;
  385.   padding: 0.85em;
  387.   img {
  388.     flex: none;
  389.     height: 50px;
  390.     margin-right: 0.85em;
  391.   }
  393.   span {
  394.     overflow: hidden;
  395.     text-overflow: ellipsis;
  396.     white-space: nowrap;
  397.   }
  398. }
  400. .side-drawer-click-outside-closed {
  401.   flex: 0 0 0;
  402. }
  404. .side-drawer-closed {
  405.   transform: translate(-100%);
  406. }
  408. .side-drawer-heading {
  409.   background: transparent;
  410.   flex-direction: column;
  411.   align-items: stretch;
  412.   display: flex;
  413.   padding: 0;
  414.   margin: 0;
  415. }
  417. .side-drawer ul {
  418.   list-style: none;
  419.   margin: 0;
  420.   padding: 0;
  421.   border-bottom: 1px solid;
  422.   border-color: var(--border);
  423. }
  425. .side-drawer ul:last-child {
  426.   border: 0;
  427. }
  429. .side-drawer li {
  430.   padding: 0;
  432.   a,
  433.   button {
  434.     box-sizing: border-box;
  435.     display: block;
  436.     height: 3em;
  437.     line-height: 3em;
  438.     padding: 0 0.7em;
  439.   }
  440. }
  441. </style>