diff --git a/app/javascript/gabsocial/features/ui/components/tabs_bar.js b/app/javascript/gabsocial/features/ui/components/tabs_bar.js
index 9de3a7eb..3a618946 100644
--- a/app/javascript/gabsocial/features/ui/components/tabs_bar.js
+++ b/app/javascript/gabsocial/features/ui/components/tabs_bar.js
@@ -155,6 +155,7 @@ class TabsBar extends React.PureComponent {
const classes = classNames('tabs-bar', {
'tabs-bar--collapsed': collapsed,
+ 'logged-in': !!account,
})
return (
@@ -191,6 +192,10 @@ class TabsBar extends React.PureComponent {
+
+
+
+
}
{
diff --git a/app/javascript/styles/gabsocial/components/tabs-bar.scss b/app/javascript/styles/gabsocial/components/tabs-bar.scss
index e6ad8992..c4088f16 100644
--- a/app/javascript/styles/gabsocial/components/tabs-bar.scss
+++ b/app/javascript/styles/gabsocial/components/tabs-bar.scss
@@ -9,6 +9,7 @@
top: 0;
z-index: 1000;
transition: transform 0.2s ease;
+ overflow: hidden;
// body.theme-gabsocial-light & {
// background: #fff;
@@ -17,8 +18,8 @@
&--collapsed {
@media screen and (max-width: 895px) {
- margin-top: -46px;
- transform: translateY(-46px);
+ margin-top: -50px;
+ transform: translateY(-50px);
}
}
@@ -170,20 +171,28 @@
display: flex;
}
- @media (max-width: 895px) {
- height: 92px;
+ &__search-btn {
+ display: none;
+ margin-left: auto;
+ .tabs-bar__link__icon--search {
+ display: block;
+ height: 32px;
+ width: 32px;
+ background-position: -995px 5px !important;
+ }
+
+ > span {
+ display: none;
+ }
+ }
+
+ @media (max-width: 895px) {
&__search-container,
&__button-compose {
display: none;
}
- &__container {
- max-width: 560px;
- flex-direction: column-reverse;
- padding: 0;
- }
-
&__profile {
margin: 0;
}
@@ -194,13 +203,41 @@
&--left {
margin: 0;
- width: 100%;
+ width: 80px;
}
&--right {
- padding: 6px 0 6px 20px;
- margin-left: 0;
- margin-right: auto;
+ padding: 8px 0 6px 20px;
+ }
+ }
+
+ &__link {
+ display: none !important;
+
+ &--logo {
+ display: flex !important;
+ }
+ }
+
+ &.logged-in & {
+ &__split {
+ &--left {
+ display: none !important;
+ }
+
+ &--right {
+ padding-top: 10px;
+ margin-left: 0 !important;
+ width: 100% !important;
+
+ .flex {
+ width: 100%;
+ }
+ }
+ }
+
+ &__search-btn {
+ display: block;
}
}
}