Variable User Identifier?

User31

I'm trying to set the 'Profile' link in the side navigation panel:

But if I set my (username - Adz) profile link; https://asylum.flarum.cloud/u/Adz,
this would send everyone to my profile wouldn't it?

Or would it automatically link them to their respective profiles?

User31

😂...and yes, there is already a profile link.

I have something else in mind.

clarkwinkelmann

Can you share your existing code? How are you adding that link?

If you are writing an extension, you can access the user in javascript through app.session.user. And use the app.route.user() helper to create the route path, like the native profile button.

User31

clarkwinkelmann

Nah I'm just using the 'Links' extension from the FreeFlarum selection.

User31

clarkwinkelmann
Are: app.session.user & app.route.user() codes that could be used in the Custom CSS/LESS file to achieve the desired OP result?

clarkwinkelmann

User31 I don't think that's possible then. Either you would need an additional extension that creates a new URL that redirects to a user profile, or modify the Links extension to support some replacement patterns.

What's your use case? There might be other solutions. Maybe even move the original profile link with CSS?

User31

clarkwinkelmann

Use case: well...🤔...basically, I would like to move all the various navigation bars/drop-downs & etc...elements into one singular place, ideally that being along the top navigation bar. Although at the moment—for learning purposes—I was temporarily trying to cram them all into that one mobile nav drop-down.

BassMan over @CXF has a sweet 'Top Navigation' add-on that more or less achieves what I'm trying to do.

*Can check it out here:
https://www.customizexf.com/threads/cxf-top-navigation.560/

User31

One of the many awesome aspects of Flarum, in my 'Digital Outcast' opinion, is the overall front-end simplicity for users, particularly mobile users.

Just from my pov as a highly active fora user, I abhor forums or any websites that require users click more than twice at the most to achieve any particular thing.

For an example: if I wanted to quickly jump to 'Media' from the home page, I would rather not have to;

#1) Click into the side nav/or mobile nav,

#2) Click into either 'Profile'/or 'Settings',

#3) Click the top nav...

#4)....and finally click 'My Media'.

Whereas a 'My Media' link/icon in a mobile top nav would be perfect. Same with the 'Admin' access. 😂Starts gettin' a little annoying going back & forth from the ACP to the front & back again 1000×/day—and having to click a minimum of twice from the front each time... although of course hitting the 'Back' button works as well as a single click would...but it ain't all that elegant nor reliable.

User31

Here's a slap job demonstration to...😄hopefully provide a little more insight.

(1) FULL MOBILE VIEW-(CHROME)

(2) FULL MOBILE-DESKTOP VIEW-(CHROME)

(*Personally I just can't stand side navigation junk at all...and so to me I'm seeing nothing butt wasted real estate above...)

(3) GIF OVERLAY OF 1 & 2:

*Merely my subjective opinion, but I'd prefer mobile-desktop view with a few tweaks over the standard ultra squished-in mobile view any day.

User31

/* One more example */

luceos

User31 no they are for javascript

User31

luceos
Do you reckon it's possible to achieve the OP with CSS?

clarkwinkelmann

User31 you might be able to move the native button with CSS. Anything else will require some actual code

User31

clarkwinkelmann Move?
How so?

Do you mean like moving it around the native positions? or moving to other locations? or something else?

clarkwinkelmann

User31 I mean absolute positioning or flex re-ordering.

I can't offer much guidance on CSS hacks, it seems like a sure way to have difficulties later on when you want to modify something else. For anything outside of cosmetics, the Flarum javascript API would always be my first go. It's much more powerful to move/duplicate/edit components via javascript and then use the minimal amount of CSS required to make them look as intended.

Changing how the navigation works is particularly tricky because there's already javascript hooking into the dynamic behavior. My recommendation for a custom navigation would be to completely unmount the original nav component(s) you don't want, create a completely new component and mount it in its place. This way there are no side effects to worry about and you can place the HTML in an order that can be conveniently made responsive in your custom styling.

There's only so far you will be able to customize Flarum with CSS alone.

User31

clarkwinkelmann Oddly enough that actually makes a lot of sense.

Thank you for clarifying this.