Keep the navigation or sidebar when reading a direct message?

Product Support

AI-generated summary

The discussion revolves around whether to keep the navigation or sidebar when reading a direct message. Canapin initially posed the question and later found a solution to keep the sidebar visible. They shared their implementation using JavaScript and CSS code, creating a sticky sidebar for desktop and a modified version for mobile. The modification aims to improve user experience, as some users were unaware of how to return to their inbox from a private message view. Canapin also considered alternative solutions, such as adding a more prominent navigation element, similar to the one shown in a provided image.

1

Hey guys,

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

image
image1284×370 18.7 KB

When reading a private message?

image
image1009×732 32.9 KB

2

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

Desktop (sticky sidebar):

image
image1001×601 29.2 KB

Mobile:

image
image358×469 16.8 KB

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:

image
image839×690 30.4 KB

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