Keep the navigation or sidebar when reading a direct message?

Hey guys,

Is there an easy way to keep this navigation bar or the sidebar (or both…):

When reading a private message?

4 Likes

I’ve managed to have the sidebar. Thanks @Arkshine for the inspiration.

Desktop (sticky sidebar):

Mobile:

image

Javascript:

<script type="text/x-handlebars" data-template-name="/connectors/topic-above-posts/inbox_menu">
{{#if model.isPrivateMessage}}
    <section class="user-secondary-navigation">  
        <ul class="messages-nav nav-stacked action-list">    
            <li class="noGlyph">
                <a href="/u/{{currentUser.username_lower}}/messages">{{i18n "user.messages.inbox"}}</a>
            </li>
            <li class="noGlyph">
                <a href="/u/{{currentUser.username_lower}}/messages/sent">{{i18n "user.messages.sent"}}</a>
            </li>
            <li class="noGlyph"><a href="/u/{{currentUser.username_lower}}/messages/archive">{{i18n "user.messages.archive"}}</a>
            </li>
        </ul>
    </section>
{{/if}}
</script>

CSS:

.desktop-view {
    .private_message .posts-wrapper {
        display: flex;
    }
    .user-secondary-navigation {
        min-width: 150px;
    }
    .topic-above-posts-outlet.inbox_menu {
        position: -webkit-sticky;
        position: sticky;
        top: 75px;
    }
}
.mobile-view {
    .user-secondary-navigation {
        .nav-stacked {
            background: transparent;
            display: flex;
            li {
                border-bottom: none;
            }
        }
    }
}

I encountered a few users that didn’t know how to go back to their inbox from a private message view.
I noticed (very lately!) that we could click the icon here, but that’s not obvious at all:

image

I’m also considering an alternative to the sidebar, such as something like this:

I didn’t try keeping the navigation bar, though that could be interesting as well.

3 Likes