refactor menu

radio4000 · Apr 20, 2024 · 965f613 · 965f613
1 parent debdf93
commit 965f613
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 20 deletions.
diff --git a/src/components/r4-app-menu.js b/src/components/r4-app-menu.js
@@ -35,28 +35,25 @@ export default class R4AppMenu extends LitElement {
 				</li>
 				<li><a aria-current=${this.isCurrent('/explore')} href=${href + '/explore'}>Explore</a></li>
 				<li><a aria-current=${this.isCurrent('/map')} href=${href + '/map'}>Map</a></li>
-				${this.auth ? this.renderAuth() : this.renderNoAuth()} ${this.canAdd ? this.renderAdd() : null}
 				<li><a aria-current=${this.isCurrent('/settings')} href=${href + '/settings'}>Settings</a></li>
+				<li>${this.auth ? this.renderAuth() : this.renderNoAuth()} ${this.canAdd ? this.renderAdd() : null}</li>
 			</menu>
 		`
 	}
 	renderNoAuth() {
-		return html`
-			<li><a aria-current=${this.isCurrent('/sign/up')} href=${this.href + '/sign/up'}>Sign up</a></li>
-			<li><a aria-current=${this.isCurrent('/sign/in')} href=${this.href + '/sign/in'}>Sign in</a></li>
-		`
+		return html`<a aria-current=${this.isCurrent('/about')} href=${this.href + '/about'}>About</a>`
 	}
 	renderAuth() {
 		if (this.slug) {
-			return html`<li>
+			return html`
 				<a aria-current=${this.isCurrent(`/${this.slug}`)} href=${this.href + '/' + this.slug}>@${this.slug}</a>
-			</li>`
+			`
 		} else {
-			return html`<li><a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a></li>`
+			return html`<a aria-current=${this.isCurrent('/new')} href=${this.href + '/new'}>New radio</a>`
 		}
 	}
 	renderAdd() {
-		return html`<li><a aria-current=${this.isCurrent('/add')} href=${this.href + '/add?slug=' + this.slug}>Add</a></li>`
+		return html`<a aria-current=${this.isCurrent('/add')} href=${this.href + '/add?slug=' + this.slug}>Add</a>`
 	}
 	createRenderRoot() {
 		return this

diff --git a/src/pages/r4-page-settings.js b/src/pages/r4-page-settings.js
@@ -78,11 +78,11 @@ export default class R4PageSettings extends R4Page {
 		return html`
 			<section>
 				<h2>Account</h2>
-				<p>
-					Your are signed out.
-					<a href="${this.config.href}/sign/in">Sign in</a> to an existing user account, or
-					<a href="${this.config.href}/sign/up">sign up</a> for a new one to customize the settings.
-				</p>
+				<p>Your are signed out.</p>
+				<ul>
+					<li><a href="${this.config.href}/sign/in">Sign in</a> an existing user account</li>
+					<li><a href="${this.config.href}/sign/up">Sign up</a> to register a new user</li>
+				</ul>
 			</section>
 		`
 	}

diff --git a/src/pages/r4-page-sign.js b/src/pages/r4-page-sign.js
@@ -61,12 +61,12 @@ export default class R4PageSign extends R4Page {
 	renderMethodSelection() {
 		return html`
 			<p>To use <r4-title></r4-title>, sign into your user account.</p>
-			<r4-menu direction="row">
-				<a href=${this.config.href + '/sign'}>sign</a>
-				<a href=${this.config.href + '/sign/up'}>up</a>
-				<a href=${this.config.href + '/sign/in'}>in</a>
-				<a href=${this.config.href + '/sign/out'}>out</a>
-			</r4-menu>
+			<menu>
+				<li><a href=${this.config.href + '/sign'}>sign:</a></li>
+				<li><a href=${this.config.href + '/sign/up'}>up (new account)</a></li>
+				<li><a href=${this.config.href + '/sign/in'}>in (existing account)</a></li>
+				<li><a href=${this.config.href + '/sign/out'}>out (logout account)</a></li>
+			</menu>
 		`
 	}