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; } } }