Create menus for organization pages (#17802)

* Create menus for organization pages

* Fix frontend lint

* Fix frontend lint

routers/web/org/home.go

@@ -142,6 +142,7 @@ func Home(ctx *context.Context) {
 	ctx.Data["Members"] = members
 	ctx.Data["Teams"] = ctx.Org.Teams
 	ctx.Data["DisableNewPullMirrors"] = setting.Mirror.DisableNewPull
+	ctx.Data["PageIsViewRepositories"] = true
 
 	pager := context.NewPagination(int(count), setting.UI.User.RepoPagingNum, page, 5)
 	pager.SetDefaultParams(ctx)

templates/org/header.tmpl

@@ -9,21 +9,10 @@
 						{{if .Visibility.IsLimited}}<div class="ui medium orange horizontal label">{{$.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 						{{if .Visibility.IsPrivate}}<div class="ui medium red horizontal label">{{$.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 					</span>
-					<div class="ui right">
-						<div class="ui menu">
-							<a class="{{if $.PageIsOrgMembers}}active{{end}} item" href="{{$.OrgLink}}/members">
-								{{svg "octicon-organization"}}&nbsp;{{$.i18n.Tr "org.people"}}
-								<div class="floating ui black label">{{.NumMembers}}</div>
-							</a>
-							<a class="{{if $.PageIsOrgTeams}}active{{end}} item" href="{{$.OrgLink}}/teams">
-								{{svg "octicon-people"}}&nbsp;{{$.i18n.Tr "org.teams"}}
-								<div class="floating ui black label">{{.NumTeams}}</div>
-							</a>
-						</div>
-					</div>
 				</div>
 			</div>
 		</div>
 	</div>
-	<div class="ui divider"></div>
 {{end}}
+
+{{template "org/menu" .}}

templates/org/home.tmpl

@@ -9,7 +9,6 @@
 					{{if .Org.Visibility.IsLimited}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.limited_shortname"}}</div>{{end}}
 					{{if .Org.Visibility.IsPrivate}}<div class="ui large basic horizontal label">{{.i18n.Tr "org.settings.visibility.private_shortname"}}</div>{{end}}
 				</span>
-				{{if .IsOrganizationOwner}}<a class="middle text grey" href="{{.OrgLink}}/settings">{{svg "octicon-gear" 16 "mb-3"}}</a>{{end}}
 			</div>
 			{{if $.RenderedDescription}}<p class="render-content markup">{{$.RenderedDescription|Str2html}}</p>{{end}}
 			<div class="text grey meta">
@@ -19,20 +18,11 @@
 		</div>
 	</div>
 
-	<div class="ui divider"></div>
+	{{template "org/menu" .}}
 
 	<div class="ui container">
 		<div class="ui mobile reversed stackable grid">
 			<div class="ui eleven wide column">
-				{{if .CanCreateOrgRepo}}
-					<div class="text right">
-						{{if not .DisableNewPullMirrors}}
-							<a class="ui green button" href="{{AppSubUrl}}/repo/migrate?org={{.Org.ID}}&mirror=1">{{.i18n.Tr "new_migrate"}}</a>
-						{{end}}
-						<a class="ui green button" href="{{AppSubUrl}}/repo/create?org={{.Org.ID}}">{{.i18n.Tr "new_repo"}}</a>
-					</div>
-					<div class="ui divider"></div>
-				{{end}}
 				{{template "explore/repo_search" .}}
 				{{template "explore/repo_list" .}}
 				{{template "base/paginate" .}}

templates/org/menu.tmpl

@@ -0,0 +1,29 @@
+<div class="ui tabs container">
+	<div class="ui secondary stackable pointing menu">
+		<a class="{{if .PageIsViewRepositories}}active{{end}} item" href="{{$.Org.HomeLink}}">
+			{{svg "octicon-repo"}} {{.i18n.Tr "user.repositories"}}
+		</a>
+		{{if .IsOrganizationMember}}
+			<a class="{{if $.PageIsOrgMembers}}active{{end}} item" href="{{$.OrgLink}}/members">
+				{{svg "octicon-organization"}}&nbsp;{{$.i18n.Tr "org.people"}}
+				{{if .NumMembers}}
+					<div class="ui primary label">{{.NumMembers}}</div>
+				{{end}}
+			</a>
+			<a class="{{if $.PageIsOrgTeams}}active{{end}} item" href="{{$.OrgLink}}/teams">
+				{{svg "octicon-people"}}&nbsp;{{$.i18n.Tr "org.teams"}}
+				{{if .NumTeams}}
+					<div class="ui black label">{{.NumTeams}}</div>
+				{{end}}
+			</a>
+		{{end}}
+
+		{{if .IsOrganizationOwner}}
+			<div class="right menu">
+				<a class="{{if .PageIsSettingsOptions}}active{{end}} item" href="{{.OrgLink}}/settings">
+				{{svg "octicon-tools"}} {{.i18n.Tr "repo.settings"}}
+				</a>
+			</div>
+		{{end}}
+	</div>
+</div>

web_src/less/_organization.less

@@ -16,6 +16,12 @@
     }
   }
 
+  .ui.secondary.stackable.pointing.menu {
+    flex-wrap: wrap;
+    margin-top: 5px;
+    margin-bottom: 10px;
+  }
+
   &.new.org {
     #create-page-form();