Compact sidebar - icon only sidebar

[pgaskin]

I think it looks better if the sidebar had an option to only show the icons.

I have make a hacky bit of css to accomplish this below, but it is meant only to demonstrate what I am talking about. I also have a screenshot:

CSS Code

    @media only screen and (min-width: 768px) {
        #app-navigation+#app-content #controls {
            left: 44px !important;
        }
    #app-navigation {
        width: 44px !important;
    }

    #app-navigation .nav-trashbin {
        overflow: hidden !important;
    }

    #app-navigation>ul {
        overflow: visible !important;
    }

    #app-navigation>ul * {
        overflow: hidden !important;
    }

    #app-navigation li a {
        text-overflow: clip !important;
    }

    #app-navigation li:hover a {
        text-overflow: ellipsis !important;
    }

    #app-navigation li a span {
        display: none !important;
    }

    #app-navigation li:hover a span {
        display: inline !important;
    }

    #app-navigation li {
        background: #FFFFFF !important;
        width: 43px !important;
    }

    #app-navigation #quota:hover,
    #app-navigation li:hover {
        width: 200px !important;
        background: #FFFFFF !important;
        border-top: 1px solid #ebebeb !important;
        border-right: 1px solid #ebebeb !important;
        border-bottom: 1px solid #ebebeb !important;
        overflow: visible !important;
    }

    #app-settings:hover {
        width: 250px !important;
    }

    #app-settings {
        width: 44px !important;
        overflow-x: hidden !important;
        border-top: 1px solid #ebebeb !important;
    }

    #app-settings #app-settings-header {
        overflow: hidden !important;
        width: 44px !important;
    }

    #app-settings:hover #app-settings-header {
        overflow: visible !important;
        width: 250px !important;
    }

    #app-settings>#app-settings-content {
        display: none !important;
        border-top: 1px solid #ebebeb !important;
    }

    #app-settings:hover>#app-settings-content {
        display: block !important;
    }
}

Screenshot

[MorrisJobke]

@nextcloud/designers Your opinions on this ;)

Generally it looks quite good, but it makes it super hard to discover features. And we should not make it an option - either do it or not, but maintaining multiple kind of UIs is just not useful.

Also on mobile devices it's hard to know what is behind the icons without a way to hover.

[skjnldsv]

I'm okay with this! I actually like it! Enabling it on small width screen is a good idea!

@MorrisJobke On mobile, long-press is the equivalent of hovering. On android, long click a button is supposed to show a popup indicating what this button do :)

Example of long click on material app

[MorrisJobke]

@MorrisJobke On mobile, long-press is the equivalent of hovering. On android, long click a button is supposed to show a popup indicating what this button do :)

Good to know - I didn't know that and I guess it's also hard to discover on for people on mobile phones. 😉

[tcitworld]

In the settings page (and I guess it should be the same everywhere), instead of showing just the name of the section on hover, I think it should show the whole sidebar.

[pixelipo]

Good idea, however, I would go against this as long as we have 2 identical icons in the sidebar - "sharingin" and "sharingout".

Plus, it breaks "quota" element and the settings element is a bit of a UX issue - what is under the cursor moves away without visible action (right now it slides open up on click). Even if you maintained existing animation, it would not be great because there would be rollout to ➡️ then slide open ⬆️

[enoch85]

Generally it looks quite good, but it makes it super hard to discover features. And we should not make it an option - either do it or not, but maintaining multiple kind of UIs is just not useful.

I totally agree.

[pgaskin]

@MorrisJobke This would not apply to mobile devices.

[pgaskin]

@pixelipo This is just a piece of css I hacked together for an idea of what this would look like. If this is actually done, it would be completely new sidebar css, and possibly some more js.

[pgaskin]

Generally it looks quite good, but it makes it super hard to discover features. And we should not make it an option - either do it or not, but maintaining multiple kind of UIs is just not useful.

For my inspiration for this idea, see Google Analytics. It has a button to toggle the text on the side nav. This is kind of what I would be thinking about.

[jancborchardt]

Sorry, this just makes the possibly very long left navigation very much "mystery meat". Even if you know Nextcloud you will have trouble recalling which icon is which cause there are so many entries

There's also the visual conflict with the filetype icons and the favorite star icons. Combined with the app icons in the top bar it's just a sea of icons.

Also I wonder about the exact usecase. On mobile and tablet we fully hide it and expanding is quick. On desktop there's no issue.

You are very welcome to work on Nextcloud design though! :) I recommend getting started with some issues labeled "design" and "starter issue", ideally the ones which are bugs. This is a great way to get involved before tackling major interface changes which will have a big impact on users and were designed differently for a reason. ;)

[pgaskin]

@jancborchardt OK, I see your points about usability. I am not really a design person, I just thought it looked better this way. 😃

[jancborchardt]

@geek1011 sure, it’s also all about trying things out. :)