WIP : Update Navigation

[AllanOcelot]

Navigation Rework

• Various styling tweaks and improvements to give the navigation a more polished and consistent feel. This is an hour or two of work, so I'm not precious about anything - personally I think it's a big improvement, but it needs some more polish and the code needs cleaning up before we consider merging.

Description 🗒️

• Reordered navigation
• Added new item - "Tools" for all the calc/tools to sit under
• Re styled elements ( spacing, padding, background etc )
• Moved settings and remote icon to right side
• Hover Effect for menu item ( activation ) more consistent
• Added mobile button to toggle mobile menu
• Styled menu on mobile
• Removed the 'automatic' hiding mechanism, that was hiding items if they did not fit on menu

Builds locally.

Examples 📸

Desktop

Mobile Menu Closed

Mobile Menu Open

[Razzmatazzz]

.deploy to development

[github-actions]

⚠️ Cannot proceed with deployment

• reviewDecision: REVIEW_REQUIRED

All deployments from forks must have the required reviews before they can proceed. Please ensure this PR has been reviewed and approved before trying again.

[Razzmatazzz]

.deploy to development

[github-actions]

Deployment Triggered 🚀

Razzmatazzz, started a branch deployment to development (branch: 19b7ee855d36b8ae8106d74e21907753087e8806)

You can watch the progress here 🔗

Details

{
  "type": "branch",
  "environment": {
    "name": "development",
    "url": null
  },
  "deployment": {
    "timestamp": "2025-01-22T22:44:13.725Z",
    "logs": "https://github.com/the-hideout/tarkov-dev/actions/runs/12918455745"
  },
  "git": {
    "branch": "19b7ee855d36b8ae8106d74e21907753087e8806",
    "commit": "19b7ee855d36b8ae8106d74e21907753087e8806",
    "verified": false
  },
  "context": {
    "actor": "Razzmatazzz",
    "noop": false,
    "fork": true,
    "comment": {
      "created_at": "2025-01-22T22:43:51Z",
      "updated_at": "2025-01-22T22:43:51Z",
      "body": ".deploy to development",
      "html_url": "https://github.com/the-hideout/tarkov-dev/pull/1036#issuecomment-2608419557"
    }
  },
  "parameters": {
    "raw": null,
    "parsed": null
  }
}

[github-actions]

Deployment Results ✅

Razzmatazzz successfully deployed branch 19b7ee855d36b8ae8106d74e21907753087e8806 to development

Show Results

https://51e37d57.tarkov-dev.pages.dev

Details

{
  "status": "success",
  "environment": {
    "name": "development",
    "url": null
  },
  "deployment": {
    "id": 2134906202,
    "timestamp": "2025-01-22T22:46:06.405Z",
    "logs": "https://github.com/the-hideout/tarkov-dev/actions/runs/12918455745",
    "duration": 113
  },
  "git": {
    "branch": "19b7ee855d36b8ae8106d74e21907753087e8806",
    "commit": "19b7ee855d36b8ae8106d74e21907753087e8806",
    "verified": false
  },
  "context": {
    "actor": "Razzmatazzz",
    "noop": false,
    "fork": true
  },
  "reviews": {
    "count": 1,
    "decision": "APPROVED"
  },
  "parameters": {
    "raw": null,
    "parsed": null
  }
}

[Razzmatazzz]

Deployed here for previewing: https://preview.tarkov-dev.pages.dev/settings/

One thing I notice right away is that it's not workable to have the menu collapse according to specific pixel widths because we can't be sure how much width each menu item will take up due to localization. For example, if you switch the site language to ru, some window widths drive the remote and settings buttons off the screen. This is a large part of the reason behind the current "dynamic" system of shunting menu items to the overflow menu once they become too long: it works with all localizations, regardless of how many characters each menu item ends up being.

[AllanOcelot]

Deployed here for previewing: https://preview.tarkov-dev.pages.dev/settings/

Good point,
I'll kick about some ideas. I think there's a good ground somewhere - for instance putting Achievements into the "other" menu. Or placing "Loot Teirs" into the tools section etc.

As discussed we don't really want to disrupt the menu too much, and I'm not in a rush to get this stuff merged in, so we have some good time for community feedback

[Razzmatazzz]

For sure. There are some good improvements here, and it will likely fix #791 as well. The trick is finding a good balance that doesn't stick often-used pages deep into nested menus and also works with the varying element widths inherent with all the different translations.