Initial commit

Template.Shared/Components/Layout/MainLayout.razor

@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    @*<div class="sidebar">
+        <NavMenu />
+    </div>*@
+
+    <NavMenu/>
+
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+
+</div>

Template.Shared/Components/Layout/MainLayout.razor.css

@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+        .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+            text-decoration: underline;
+        }
+
+        .top-row ::deep a:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+        .top-row ::deep a, .top-row ::deep .btn-link {
+            margin-left: 0;
+        }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+        .top-row.auth ::deep a:first-child {
+            flex: 1;
+            text-align: right;
+            width: 0;
+        }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}

Template.Shared/Components/Layout/NavBar.razor

@@ -0,0 +1,40 @@
+<div class="container">
+    <nav>
+        <ul>
+            <li>
+                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <span>Home</span>
+                    <i class="ri-home-5-line"/>
+                </NavLink>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <a href="#" id="workout">
+                    <span>Workout</span>
+                    <i class="ri-empathize-line"/>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <a href="#" id="logbook">
+                    <span>Logbook</span>
+                    <i class="ri-health-book-line"></i>
+                </a>
+            </li>
+        </ul>
+        <ul>
+            <li>
+                <a href="#" id="settings">
+                    <span>Impostazioni</span>
+                    <i class="ri-settings-5-line"/>
+                </a>
+            </li>
+        </ul>
+    </nav>
+</div>
+
+@code {
+
+}

Template.Shared/Components/Layout/NavBar.razor.css

@@ -0,0 +1,81 @@
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+ul {
+    list-style-type: none;
+}
+
+.container {
+    max-width: 100%;
+    margin: 0 auto;
+    padding: 0;
+}
+
+nav {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    background-color: var(--ligther-color);
+    margin: 0;
+    display: flex;
+    border-radius: 40px 40px 0px 0px;
+    box-shadow: rgb(50 50 93 / 25%) 0 50px 100px 10px,
+    rgb(0 0 0 / 30%) 0 30px 60px -30px;
+}
+
+nav ul {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    flex: 0 0 25%;
+    justify-content: center;
+}
+
+nav :where(li a) {
+    position: relative;
+}
+
+nav ul li a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column-reverse;
+    padding: 1em;
+    line-height: 1.4;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out;
+}
+
+nav ul li a:hover {
+    color: var(--primary-color);
+}
+
+nav ul li a i {
+    font-size: 1.5rem;
+}
+
+nav ul li a span {
+    font-size: 0.9rem;
+}
+
+/* animations */
+
+nav li.active a::before, nav li.active a::after {
+    content: "";
+    position: absolute;
+    background-color: var(--primary-color);
+    z-index: -1;
+}
+
+nav li.active a::before {
+    top: 5%;
+    width: calc(100% - 0px);
+    height: 100%;
+    border-radius: 25px;
+}
+
+nav li.active a {
+    color: var(--ligther-color);
+}

Template.Shared/Components/Layout/NavMenu.razor

@@ -0,0 +1,38 @@
+<nav class="navbar navbar-expand justify-content-center">
+    <div class="container-fluid">
+        <ul class="navbar-nav nav-justified w-100 text-center">
+
+            <li class="nav-item">
+                <NavLink class="nav-link " href="workout" Match="NavLinkMatch.All">
+                    <div class="d-flex flex-column">
+                        <i class="ri-empathize-line"/>
+                        @* <span>Workout</span> *@
+                    </div>
+                </NavLink>
+            </li>
+            <li class="nav-item">
+                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <div class="d-flex flex-column">
+                        <i class="ri-home-5-line"/>
+                        @* <span>Home</span> *@
+                    </div>
+                </NavLink>
+            </li>
+            <li class="nav-item">
+                <NavLink class="nav-link" href="logbook" Match="NavLinkMatch.All">
+                    <div class="d-flex flex-column">
+                        <i class="ri-health-book-line"></i>
+                        @* <span>Log Book</span> *@
+                    </div>
+                </NavLink>
+            </li>
+            @* <li class="nav-item"> *@
+            @*     <NavLink class="nav-link d-flex flex-column" href="settings" Match="NavLinkMatch.All"> *@
+            @*         <i class="ri-settings-5-line"/> *@
+            @*         <span>Impostazioni</span> *@
+            @*     </NavLink> *@
+            @* </li> *@
+        </ul>
+    </div>
+
+</nav>

Template.Shared/Components/Layout/NavMenu.razor.css

@@ -0,0 +1,50 @@
+.navbar {
+    background-color: var(--ligther-color);
+    border-radius: 50px 50px 0 0;
+    border: #eceff2 solid 1px;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+.nav-item ::deep a {
+    color: var(--darker-color);
+    display: flex;
+    align-items: center;
+    line-height: 1.4;
+    justify-content: center;
+}
+
+.nav-item ::deep a > div {
+    width: 4.3rem;
+    height: 4.3rem;
+    border-radius: 100px;
+    justify-content: center;
+    padding-bottom: 0.1rem;
+    -webkit-transition: all .3s ease-out;
+    transition: all .3s ease-out;
+}
+
+.nav-item ::deep a.active > div {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+/*.nav-item a:hover :not(.active) {*/
+/*    background-color: rgba(255, 255, 255, 0.1);*/
+/*    color: var(--primary-color);*/
+/*}*/
+
+
+.nav-item ::deep a i {
+    font-size: 2rem;
+}
+
+.nav-item ::deep a span {
+    font-size: 0.9rem;
+}