Skip to content

Commit

Permalink
Added more menu icons and the active page indicator.
Browse files Browse the repository at this point in the history
  • Loading branch information
@granicz
granicz committed Oct 19, 2023
1 parent b87181a commit 42df2fd
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 17 deletions.
32 changes: 25 additions & 7 deletions src/client/App.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,30 @@ module Client =
let Menu() =
// We use hashed subpages, such as /#/charting. This way each page can be refreshed.
[
"Home", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Home)
"Charting", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Charting)
"Forms", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Forms)
Home, "Dashboard", MainTemplate.TablesIcon().Doc(), "/#" + router.Link(Home)
Charting, "Charting", MainTemplate.ChartsIcon().Doc(), "/#" + router.Link(Charting)
Forms, "Forms", MainTemplate.FormsIcon().Doc(), "/#" + router.Link(Forms)
]
|> List.map (fun (title, icon, targetUrl) ->
|> List.map (fun (ep, title, icon, targetUrl) ->
MainTemplate.MenuItem()
.ActiveIndicator(
currentPage.View.Map(fun cp ->
// If the current page is active, add an active menu item indicator
if ep = cp then
Templates.MainTemplate.MenuItemActiveIndicator().Doc()
else
Doc.Empty
) |> Doc.EmbedView
)
.ExtraCssClasses(
currentPage.View.Map(fun cp ->
// If the current page is active, raise the font color
if ep = cp then
"text-gray-800 dark:text-gray-100"
else
""
)
)
.Title(title)
.Icon(icon)
.TargetUrl(targetUrl)
Expand All @@ -44,9 +62,9 @@ module Client =
let MobileMenu() =
// We use hashed subpages, such as /#/charting. This way each page can be refreshed.
[
"Home", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Home)
"Charting", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Charting)
"Forms", MainTemplate.DashboardIcon().Doc(), "/#" + router.Link(Forms)
"Dashboard", MainTemplate.TablesIcon().Doc(), "/#" + router.Link(Home)
"Charting", MainTemplate.ChartsIcon().Doc(), "/#" + router.Link(Charting)
"Forms", MainTemplate.FormsIcon().Doc(), "/#" + router.Link(Forms)
]
|> List.map (fun (title, icon, targetUrl) ->
MainTemplate.MobileMenuItem()
Expand Down
1 change: 0 additions & 1 deletion src/client/Grid.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,6 @@ module Grid =
// Render each into a table row
txns
|> Array.map (fun txn ->
printfn "%A" txn
Templates.MainTemplate.ClientTransactionRow()
.AvatarUrl(txn.To.AvatarUrl)
.Name($"{txn.To.FirstName} {txn.To.LastName}")
Expand Down
17 changes: 9 additions & 8 deletions src/client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
</a>
<ul class="mt-6" ws-hole="Menu">
<li ws-template="MenuItem" class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
<div ws-replace="ActiveIndicator"></div>
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 ${ExtraCssClasses}"
href="${TargetUrl}">
<svg ws-replace="Icon" ws-template="DashboardIcon" class="w-5 h-5"
aria-hidden="true"
Expand All @@ -46,11 +47,11 @@
</a>
</li>
<li class="relative px-6 py-3">
<span class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
<span ws-template="MenuItemActiveIndicator" class="absolute inset-y-0 left-0 w-1 bg-purple-600 rounded-tr-lg rounded-br-lg"
aria-hidden="true"></span>
<a class="inline-flex items-center w-full text-sm font-semibold text-gray-800 transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200 dark:text-gray-100"
href="forms.html">
<svg class="w-5 h-5"
<svg ws-template="FormsIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand All @@ -66,7 +67,7 @@
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
href="cards.html">
<svg class="w-5 h-5"
<svg ws-template="CardsIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand All @@ -82,7 +83,7 @@
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
href="charts.html">
<svg class="w-5 h-5"
<svg ws-template="ChartsIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand All @@ -99,7 +100,7 @@
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
href="buttons.html">
<svg class="w-5 h-5"
<svg ws-template="ButtonsIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand All @@ -115,7 +116,7 @@
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
href="modals.html">
<svg class="w-5 h-5"
<svg ws-template="ModalsIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand All @@ -131,7 +132,7 @@
<li class="relative px-6 py-3">
<a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-gray-800 dark:hover:text-gray-200"
href="tables.html">
<svg class="w-5 h-5"
<svg ws-template="TablesIcon" class="w-5 h-5"
aria-hidden="true"
fill="none"
stroke-linecap="round"
Expand Down
1 change: 0 additions & 1 deletion src/shared/Shared.fs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

open WebSharper

[<JavaScript>]
module DTO =
type Client =
{
Expand Down

0 comments on commit 42df2fd

Please sign in to comment.