forgejo/templates/base/head_navbar.tmpl
Felipe Leopoldo Sologuren Gutiérrez 2b1e47e2a2
Improve accessibility of navigation bar and footer ()
Added ARIA navigation landmark to navigation bar and aria label for both
nav bar and footer.

Contributed by @forgejo.

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-01-29 09:29:10 +08:00

218 lines
9.2 KiB
Handlebars

<div class="ui container" id="navbar" role="navigation" aria-label="{{.locale.Tr "aria.navbar"}}">
{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
{{end}}
<div class="item brand" style="justify-content: space-between;">
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a>
{{if .IsSigned}}
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.Tr "notifications"}}'>
<span class="text black">
<span class="fitted">{{svg "octicon-bell"}}</span>
<span class="ui red label mini{{if not $notificationUnreadCount}} hidden{{end}} notification_count">
{{$notificationUnreadCount}}
</span>
</span>
</a>
{{end}}
<div class="ui basic icon button mobile-only" id="navbar-expand-toggle">
<i class="sidebar icon"></i>
</div>
</div>
{{if and .IsSigned .MustChangePassword}}
{{/* No links */}}
{{else if .IsSigned}}
{{if not .UnitIssuesGlobalDisabled}}
<a class="item {{if .PageIsIssues}}active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
{{end}}
{{if not .UnitPullsGlobalDisabled}}
<a class="item {{if .PageIsPulls}}active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
{{end}}
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
{{end}}
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{else if .IsLandingPageOrganizations}}
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
{{else}}
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{end}}
{{template "custom/extra_links" .}}
{{/* TODO
<div class="item">
<div class="ui icon input">
<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
</div>
</div>
*/}}
{{if and .IsSigned .MustChangePassword}}
<div class="right stackable menu">
<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu" tabindex="-1">
<div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div>
<div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
{{svg "octicon-sign-out"}}
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
</a>
</div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu -->
</div>
{{else if .IsSigned}}
<div class="right stackable menu">
{{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui label {{if not .ActiveStopwatch}}hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
<span class="text">
<span class="fitted item">
{{svg "octicon-stopwatch"}}
<span class="red" style="position:absolute; right:-0.6em; top:-0.6em;">{{svg "octicon-dot-fill"}}</span>
</span>
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
</span>
</a>
<div class="active-stopwatch-popup tippy-target">
<div class="df ac">
<a class="stopwatch-link df ac" href="{{.ActiveStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16 "mr-3"}}
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
<span class="ui primary label stopwatch-time my-0 mx-4" data-seconds="{{.ActiveStopwatch.Seconds}}">
{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
</span>
</a>
<form class="stopwatch-commit" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon fitted tooltip"
data-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
data-position="top right"
>{{svg "octicon-square-fill"}}</button>
</form>
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon fitted tooltip"
data-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
data-position="top right"
>{{svg "octicon-trash"}}</button>
</form>
</div>
</div>
{{end}}
<a href="{{AppSubUrl}}/notifications" class="item tooltip not-mobile" data-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<span class="text">
<span class="fitted">{{svg "octicon-bell"}}</span>
<span class="ui red label {{if not $notificationUnreadCount}}hidden{{end}} notification_count">
{{$notificationUnreadCount}}
</span>
</span>
</a>
<div class="ui dropdown jump item tooltip" data-content="{{.locale.Tr "create_new"}}">
<span class="text">
<span class="fitted">{{svg "octicon-plus"}}</span>
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu">
<a class="item" href="{{AppSubUrl}}/repo/create">
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
</a>
{{if not .DisableMigrations}}
<a class="item" href="{{AppSubUrl}}/repo/migrate">
<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}}
</a>
{{end}}
{{if .SignedUser.CanCreateOrganization}}
<a class="item" href="{{AppSubUrl}}/org/create">
<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}}
</a>
{{end}}
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item tooltip" tabindex="-1" data-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu" tabindex="-1">
<div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div>
<div class="divider"></div>
<a class="item" href="{{.SignedUser.HomeLink}}">
{{svg "octicon-person"}}
{{.locale.Tr "your_profile"}}<!-- Your profile -->
</a>
{{if not .DisableStars}}
<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
{{svg "octicon-star"}}
{{.locale.Tr "your_starred"}}
</a>
{{end}}
<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
{{svg "octicon-bell"}}
{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions -->
</a>
<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
{{svg "octicon-tools"}}
{{.locale.Tr "your_settings"}}<!-- Your settings -->
</a>
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
{{svg "octicon-question"}}
{{.locale.Tr "help"}}<!-- Help -->
</a>
{{if .IsAdmin}}
<div class="divider"></div>
<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/admin">
{{svg "octicon-server"}}
{{.locale.Tr "admin_panel"}}<!-- Admin Panel -->
</a>
{{end}}
<div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
{{svg "octicon-sign-out"}}
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
</a>
</div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu -->
</div><!-- end signed user right menu -->
{{else}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
<div class="right stackable menu">
{{if .ShowRegistrationButton}}
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
{{svg "octicon-person"}} {{.locale.Tr "register"}}
</a>
{{end}}
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
</a>
</div><!-- end anonymous right menu -->
{{end}}
</div>