Merge pull request #20 from AmielCyber/update

Added Mobile Bottom Navigation

ReactRoastDotnet.Client/package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.15",
-    "@heroicons/react": "^2.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0"

ReactRoastDotnet.Client/src/App.tsx

@@ -1,15 +1,16 @@
-import NavBar from "./layout/NavBar.tsx";
 import {Outlet} from "react-router-dom";
+import TopNavBar from "./layout/TopNavBar.tsx";
+import BottomNavBar from "./layout/BottomNavBar.tsx";
 
 function App() {
+    return (
+        <>
+            <TopNavBar/>
+            <Outlet/>
+            <BottomNavBar isAuthenticated={false}/>
+        </>
 
-  return (
-      <>
-        <NavBar />
-        <Outlet />
-      </>
-
-  );
+    );
 }
 
 export default App

ReactRoastDotnet.Client/src/icons/AccountIcon.tsx

@@ -0,0 +1,9 @@
+//  Icon by https://heroicons.com
+function AccountIcon(){
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="hsl(var(--p))" viewBox="0 0 24 24" stroke="hsl(var(--p))"  strokeWidth={1.5} className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
+        </svg>
+    )
+}
+export default AccountIcon;

ReactRoastDotnet.Client/src/icons/CartIcon.tsx

@@ -1,10 +1,13 @@
 import { memo } from "react";
+
+//  Icon by https://heroicons.com
 function Icon(){
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
+            fill="hsl(var(--p))"
             viewBox="0 0 24 24"
-            className="w-6 h-6 fill-primary group-hover:scale-125 ease-in duration-300 "
+            className="h-6 w-6 group-hover:scale-125 ease-in duration-300"
         >
             <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z" />
         </svg>

ReactRoastDotnet.Client/src/icons/CoffeeIcon.tsx

@@ -1,14 +1,24 @@
 import { memo } from "react";
 
+type Props = {
+  isTopIcon: boolean;
+}
+
+function getClassNameProps(isTopIcon: boolean): string{
+  return isTopIcon? "h-6 w-6 group-hover:scale-125 ease-in duration-300" :
+      "h-6 w-6";
+}
+
 /**
  * Cart Icon to display for our button.
  * Icon by svgrepo.com https://www.svgrepo.com/svg/75540/hot-coffee-cup-with-hearts
  * @returns SVG element.
  */
-function Icon() {
+function Icon(props: Props) {
   return (
     <svg
-      className="h-6 w-6 fill-primary group-hover:scale-125 ease-in duration-300"
+        fill="hsl(var(--p))"
+        className={getClassNameProps(props.isTopIcon)}
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 25.468 25.468"
     >

ReactRoastDotnet.Client/src/icons/HomeIcon.tsx

@@ -0,0 +1,9 @@
+//  Icon by https://heroicons.com
+function HomeIcon(){
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="hsl(var(--p))" className="w-5 h-5">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z" />
+        </svg>
+    );
+}
+export default HomeIcon;

ReactRoastDotnet.Client/src/icons/SignInIcon.tsx

@@ -0,0 +1,14 @@
+function SignInIcon(){
+    return(
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            strokeWidth={1.5}
+            stroke="hsl(var(--p))"
+            className="w-6 h-6"
+            fill="none">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
+        </svg>
+    )
+}
+export default SignInIcon;

ReactRoastDotnet.Client/src/icons/SignOutIcon.tsx

@@ -0,0 +1,9 @@
+//  Icon by https://heroicons.com
+function SignOutIcon(){
+    return(
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="hsl(var(--p))" className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9" />
+        </svg>
+    )
+}
+export default SignOutIcon;

ReactRoastDotnet.Client/src/icons/SignUpIcon.tsx

@@ -0,0 +1,10 @@
+//  Icon by https://heroicons.com
+function SignUpIcon(){
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="hsl(var(--p))" className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
+        </svg>
+    )
+}
+
+export default SignUpIcon;

ReactRoastDotnet.Client/src/icons/XMarkIcon.tsx

@@ -0,0 +1,9 @@
+//  Icon by https://heroicons.com
+function XMarkIcon(){
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" fill="hsl(var(--p))" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+    );
+}
+export default XMarkIcon;

ReactRoastDotnet.Client/src/layout/BottomNavAuthLinks.tsx

@@ -0,0 +1,20 @@
+import AccountIcon from "../icons/AccountIcon.tsx";
+import SignOutIcon from "../icons/SignOutIcon.tsx";
+import BottomNavButton from "./BottomNavButton.tsx";
+
+function BottomNavAuthLinks() {
+    return (
+        <>
+            <BottomNavButton route="/account">
+                <AccountIcon/>
+                <span className="btm-nav-label">Account</span>
+            </BottomNavButton>
+            <BottomNavButton route="/account/signout">
+                <SignOutIcon/>
+                <span className="btm-nav-label">Sign Out</span>
+            </BottomNavButton>
+        </>
+    );
+}
+
+export default BottomNavAuthLinks;

ReactRoastDotnet.Client/src/layout/BottomNavBar.tsx

@@ -0,0 +1,32 @@
+import CartButton from "../cart/CartButton.tsx";
+import CoffeeIcon from "../icons/CoffeeIcon.tsx";
+import HomeIcon from "../icons/HomeIcon.tsx";
+import BottomNavGuestLinks from "./BottomNavGuestLinks.tsx";
+import BottomNavAuthLinks from "./BottomNavAuthLinks.tsx";
+import BottomNavButton from "./BottomNavButton.tsx";
+
+type Props = {
+    isAuthenticated: boolean;
+}
+
+function BottomNavBar(props: Props) {
+    return (
+        <div className="btm-nav md:hidden">
+            <BottomNavButton route="/">
+                <HomeIcon/>
+                <span className="btm-nav-label">Home</span>
+            </BottomNavButton>
+            <BottomNavButton route="menu">
+                <CoffeeIcon isTopIcon={false}/>
+                <span className="btm-nav-label">Order</span>
+            </BottomNavButton>
+            {props.isAuthenticated ? <BottomNavAuthLinks/> : <BottomNavGuestLinks/>}
+            <BottomNavButton>
+                <CartButton/>
+            </BottomNavButton>
+        </div>
+    );
+}
+
+export default BottomNavBar;
+

ReactRoastDotnet.Client/src/layout/BottomNavButton.tsx

@@ -0,0 +1,28 @@
+import {ReactNode} from "react";
+import {NavLink} from "react-router-dom";
+
+const buttonNavClasses = "active:border-primary hover:border-primary active:ring-primary active:ring-2";
+const activeNavClasses = "active text-secondary " + buttonNavClasses;
+
+type Props = {
+    children: ReactNode;
+    route?: string;
+}
+
+function BottomNavButton(props: Props) {
+    if (props.route) {
+        return (
+            <NavLink to={props.route} className={({isActive}) => isActive ? activeNavClasses : buttonNavClasses}>
+                {props.children}
+            </NavLink>
+        );
+    } else {
+        return (
+            <button className={buttonNavClasses}>
+                {props.children}
+            </button>
+        );
+    }
+}
+
+export default BottomNavButton;

ReactRoastDotnet.Client/src/layout/BottomNavGuestLinks.tsx

@@ -0,0 +1,20 @@
+import SignUpIcon from "../icons/SignUpIcon.tsx";
+import SignInIcon from "../icons/SignInIcon.tsx";
+import BottomNavButton from "./BottomNavButton.tsx";
+
+function BottomNavGuestLinks() {
+    return (
+        <>
+            <BottomNavButton route="account/create">
+                <SignUpIcon/>
+                <span className="btm-nav-label">Sign Up</span>
+            </BottomNavButton>
+            <BottomNavButton route="account/signin">
+                <SignInIcon/>
+                <span className="btm-nav-label">Sign In</span>
+            </BottomNavButton>
+        </>
+    )
+}
+
+export default BottomNavGuestLinks;

ReactRoastDotnet.Client/src/layout/Modal.tsx

@@ -1,6 +1,6 @@
 import {Dialog, Transition} from "@headlessui/react";
 import {Fragment, useRef} from "react";
-import {XMarkIcon} from "@heroicons/react/20/solid";
+import XMarkIcon from "../icons/XMarkIcon.tsx";
 
 type Props = {
     showModal: boolean;
@@ -57,4 +57,4 @@ function Modal(props: Props) {
     );
 }
 
-export default Modal;
+export default Modal;

ReactRoastDotnet.Client/src/layout/NavigationLinks.tsx

@@ -27,4 +27,4 @@ function NavigationLinks() {
     );
 }
 
-export default NavigationLinks;
+export default NavigationLinks;

ReactRoastDotnet.Client/src/layout/NavBar.tsx → ReactRoastDotnet.Client/src/layout/TopNavBar.tsx

@@ -3,14 +3,13 @@ import {NavLink} from "react-router-dom";
 import CoffeeIcon from "../icons/CoffeeIcon.tsx";
 import NavigationLinks from "./NavigationLinks.tsx";
 import CartButton from "../cart/CartButton.tsx";
-import SideBarMenu from "./SideBarMenu.tsx";
 
-function NavBar() {
+function TopNavBar() {
     return (
-        <div className="navbar bg-base-100 max-w-screen-xl mx-auto">
+        <div className="navbar bg-base-100 max-w-screen-lg mx-auto hidden md:flex">
             <div className="navbar-start ml-8">
                 <NavLink className="btn btn-ghost btn-circle normal-case text-xl gap-2 group" to="/">
-                    <CoffeeIcon/>
+                    <CoffeeIcon isTopIcon={true}/>
                 </NavLink>
             </div>
             <div className="navbar-center hidden md:flex">
@@ -20,10 +19,9 @@ function NavBar() {
             </div>
             <div className="navbar-end mr-8">
                 <CartButton/>
-                <SideBarMenu/>
             </div>
         </div>
     );
 }
 
-export default NavBar;
+export default TopNavBar;

ReactRoastDotnet.Client/src/pages/HomePage.tsx

@@ -5,8 +5,8 @@ function HomePage() {
                 <div className="max-w-md text-gray-900 dark:text-white">
                     <h1 className="mb-4 text-3xl font-extrabold md:text-5xl lg:text-6xl">
                         Welcome to{" "}
-                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">
-              React Coffee
+                        <span className="text-transparent bg-clip-text bg-gradient-to-r from-secondary to-primary">
+              React Roast Dotnet
             </span>{" "}
                     </h1>
                     <p className="py-4 text-xl">Order fresh coffee to go</p>
@@ -17,4 +17,4 @@ function HomePage() {
     );
 }
 
-export default HomePage;
+export default HomePage;

ReactRoastDotnet.Client/src/pages/LoadingPage.tsx

@@ -1,10 +1,11 @@
 type Props = {
     pageName: string;
 }
-function LoadingPage(props: Props){
+
+function LoadingPage(props: Props) {
     return (
         <h1>Loading {props.pageName} page...</h1>
     );
 }
 
-export default LoadingPage;
+export default LoadingPage;