oddbit · DennisAlund · May 24, 2024 · May 22, 2024 · May 22, 2024 · May 22, 2024
diff --git a/.github/workflows/firebase-hosting-merge.yml b/.github/workflows/firebase-hosting-merge.yml
@@ -3,6 +3,8 @@ on:
   push:
     branches:
       - main
+env:
+  HOSTING_ENV: ${{ github.ref == 'refs/heads/main' && vars.HOSTING_ENV_PROD || vars.HOSTING_ENV_DEV  }}
 jobs:
   code_check:
     name: Code check
@@ -19,8 +21,8 @@ jobs:
           cache-dependency-path: |
             hosting/package-lock.json
 
-      - name: Apply formatting and linting
-        run: npm ci && npm run lint:fix && npm run format
+      - name: Run code checking and formatting
+        run: npm ci && npm run codecheck
         working-directory: ./hosting
 
       - name: Ensure code is unchanged
@@ -53,6 +55,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
+      - name: Set hosting environment
+        run: echo $HOSTING_ENV > hosting/.env
+
       - name: Build application
         run: npm ci && npm run build
         working-directory: ./hosting

diff --git a/.github/workflows/firebase-hosting-pull-request.yml b/.github/workflows/firebase-hosting-pull-request.yml
@@ -4,6 +4,8 @@ permissions:
   checks: write
   contents: read
   pull-requests: write
+env:
+  HOSTING_ENV: ${{ vars.HOSTING_ENV_DEV  }}
 jobs:
   code_check:
     name: Code check
@@ -20,8 +22,8 @@ jobs:
           cache-dependency-path: |
             hosting/package-lock.json
 
-      - name: Apply formatting and linting
-        run: npm ci && npm run lint:fix && npm run format
+      - name: Run code checking and formatting
+        run: npm ci && npm run codecheck
         working-directory: ./hosting
 
       - name: Ensure code is unchanged
@@ -55,6 +57,9 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
 
+      - name: Set hosting environment
+        run: echo $HOSTING_ENV > hosting/.env
+
       - name: Build application
         run: npm ci && npm run build
         working-directory: ./hosting

diff --git a/hosting/README.md b/hosting/README.md
@@ -1,123 +1,38 @@
-# TailAdmin Next.js - Free Next.js Tailwind Admin Dashboard Template
+# Hosting
 
-TailAdmin is a free and open-source admin dashboard template built on **Next.js and Tailwind CSS** providing developers with everything they need to create a feature-rich and data-driven: back-end, dashboard, or admin panel solution for any sort of web project.
+## Configuration
 
-[![tailwind nextjs admin template](https://github.com/TailAdmin/free-nextjs-admin-dashboard/blob/main/tailadmin-nextjs.jpg)](https://nextjs-demo.tailadmin.com/)
+Make sure that you are configuring a `.env` file in the hosting folder.
 
-With TailAdmin Next.js, you get access to all the necessary dashboard UI components, elements, and pages required to build a high-quality and complete dashboard or admin panel. Whether you're building a dashboard or admin panel for a complex web application or a simple website.
-
-TailAdmin utilizes the powerful features of **Next.js 13** and common features of Next.js such as server-side rendering (SSR), static site generation (SSG), and seamless API route integration. Combined with the advancements of **React 18** and the robustness of **TypeScript**, TailAdmin is the perfect solution to help get your project up and running quickly.
-
-### [✨ Visit Website](https://tailadmin.com/)
-
-### [🚀 PRO Demo](https://nextjs-demo.tailadmin.com/)
-
-### [🚀 FREE Demo](https://nextjs-free-demo.tailadmin.com/)
-
-### TailAdmin Next.js PRO vs TailAdmin Next.js FREE Comparison 📊
-
-#### [TailAdmin Next.js PRO](https://nextjs-demo.tailadmin.com/)
-
-- 4 Unique Dashboards: Analytics, Ecommerce, Marketing, and CRM (More will be added)
-- 120+ Dashboard UI Components
-- 200+ Total UI Elements
-- 45+ HTML Files
-- All Essential Elements and Files
-- Full Figma Design Source - As Shown on Demo
-
----
-
-#### [TailAdmin Next.js FREE](https://free-nextjs-demo.tailadmin.com/)
-
-- 1 Unique Dashboard
-- 30+ Dashboard UI Components
-- 50+ Total UI Elements
-- 10+ HTML Files
-- TypeScript Support
-- Basic UI Kit Elements and Files
-- Figma Design Source - Free Sample
-
----
-
-### [⬇️ Download Now](https://tailadmin.com/download)
-
-### [⚡ Get PRO Version](https://tailadmin.com/pricing)
-
-### [📄 Documentation/Installation](https://tailadmin.com/docs)
-
-### [🖌️ TailAdmin Figma Free Sample](https://www.figma.com/community/file/1214477970819985778)
-
-### [👉 TailAdmin HTML Version](https://github.com/TailAdmin/tailadmin-free-tailwind-dashboard-template)
-
-## Installation
-
-Here are the steps you need to follow to install the dependencies.
-
-1. Download and extract the template from Next.js Templates.
-
-2. After that **cd** into the template directory then run this command to install all the dependencies
-
-```
-npm install
-```
-
-or
-
-```
-yarn install
-```
-
-3. Now run this command to start the developement server
+Take the configuration from your Firebase project web application settings.
+There is a JSON configuration that you should add to the `.env` file as
+displayed below.
 
 ```
-npm run dev
+https://console.firebase.google.com/project/<your_project>/settings/general/
 ```
 
-or
+### `hosting/.env`
 
+```dotenv
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_DATABASE_URL=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=
 ```
-yarn dev
-```
-
-## Free Admin Dashboard Template for Next.js Built-with Tailwind CSS, React 18 and TypeScript
-
-TailAdmin Next.js is a free dashboard template, which uses Tailwind CSS, is a great starting point for dashboard UI. This template uses the Next.js JavaScript framework and the easy-to-use Tailwind CSS framework. The Tailwind CSS and Next.js Dashboard Template comes with ready-made components like navigation menus, charts, tables, and forms. These components can be easily adjusted and added to any Next.js web application.
-
-TailAdmin for Next.js provides all essential Next.js + Tailwind CSS UI components that can be copied and pasted directly into your dashboard projects. The range of components includes charts, graphs, navbars, tabs, buttons, cards, tables, profiles, forms, modals, app pages, calendars, web app example templates, and more, all coded for Next.js React and styled using Tailwind CSS.
-
-If you're on the hunt for a top-quality Next.js-Tailwind Dashboard, Admin Panel Template, or UI Kit, TailAdmin is the perfect choice for you!
-
-### 📄 License
 
-TailAdmin Next.js Free is 100% free and open-source; feel free to use it with your personal and commercial projects.
+### Github actions
 
-### 💜 Support
+The `.env` file contents should be stored in a github varialbes as specified by
+the github actions deployment scripts.
 
-If you like the template, please star this repository to inspire the team to create more stuff like this and reach more users like you!
+## Get up and running
 
-## Update Logs
+Start the application locally by simply running
 
-### Version 1.3.1 - [Feb 12, 2024]
-
-#### Issues
-
-- **Issues 02:** Fix Misspelling issue [Default Layout/Layouts].
-
-#### Enhancements
-
-- **Enhancement 01:** Update style.css
-
-### Version 1.3.0 - [Feb 05, 2024]
-
-#### Enhancements
-
-- **Enhancement 01:** Update Next.js into version 14
-- **Enhancement 02:** Integrate flatpickr in [Date Picker/Form Elements]
-- **Enhancement 03:** Change color after select an option [Select Element/Form Elements].
-- **Enhancement 04:** Make it functional [Multiselect Dropdown/Form Elements].
-- **Enhancement 05:** Make best value editable [Pricing Table One/Pricing Table].
-- **Enhancement 06:** Add Default Layout Component and make App/Layout more clean and use it in every pages.
-
-### Version 0.1.0 - Initial Release - [Aug 3, 2023]
-
-- Initial release of TailAdmin Next.
+```sh
+npm run dev
+```
diff --git a/hosting/package-lock.json b/hosting/package-lock.json
diff --git a/hosting/package.json b/hosting/package.json
@@ -9,10 +9,11 @@
     "lint": "next lint",
     "lint:fix": "next lint --fix",
     "prettier:fix": "prettier --write .",
-    "format": "prettier --write 'src/**/*.{js,ts,tsx,json,css,md}'"
+    "codecheck": "npm run lint:fix && npm run prettier:fix"
   },
   "dependencies": {
     "apexcharts": "^3.45.2",
+    "dotenv": "^16.4.5",
     "firebase": "^10.12.0",
     "flatpickr": "^4.6.13",
     "jsvectormap": "^1.5.3",

diff --git a/hosting/src/components/Sidebar/SidebarExpandableMenu.tsx b/hosting/src/components/Sidebar/SidebarExpandableMenu.tsx
@@ -0,0 +1,65 @@
+import Link from "next/link";
+import {usePathname} from "next/navigation";
+import React, {useState} from "react";
+import SidebarLinkGroup from "./SidebarLinkGroup";
+import {CollapseExpandIcon} from "./icons/CollapseExpandIcon";
+
+interface ExpandableMenuProps {
+  icon: React.ReactNode;
+  title: string;
+  menuItems: Array<{href: string; title: string}>;
+  isExpanded: boolean;
+}
+
+export function SidebarExpandableMenu({icon, title, menuItems, isExpanded}: ExpandableMenuProps) {
+  const pathname = usePathname() ?? "/";
+  const [isOpen, setIsOpen] = useState(isExpanded);
+
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const isActive = menuItems.some((item) => pathname.includes(item.href));
+
+  return (
+    <SidebarLinkGroup activeCondition={isActive}>
+      {(handleClick) => (
+        <React.Fragment>
+          <Link
+            href="#"
+            className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
+              isActive && "bg-graydark dark:bg-meta-4"
+            }`}
+            onClick={(e) => {
+              e.preventDefault();
+              handleToggle();
+              handleClick();
+            }}
+          >
+            {icon}
+            {title}
+            <CollapseExpandIcon isOpen={isOpen} />
+          </Link>
+          {/* <!-- Dropdown Menu Start --> */}
+          <div className={`translate transform overflow-hidden ${!isOpen && "hidden"}`}>
+            <ul className="mb-5.5 mt-4 flex flex-col gap-2.5 pl-6">
+              {menuItems.map((item) => (
+                <li key={item.href}>
+                  <Link
+                    href={item.href}
+                    className={`group relative flex items-center gap-2.5 rounded-md px-4 font-medium text-bodydark2 duration-300 ease-in-out hover:text-white ${
+                      pathname === item.href && "text-white"
+                    }`}
+                  >
+                    {item.title}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+          {/* <!-- Dropdown Menu End --> */}
+        </React.Fragment>
+      )}
+    </SidebarLinkGroup>
+  );
+}
diff --git a/hosting/src/components/Sidebar/SidebarLinkGroup.tsx b/hosting/src/components/Sidebar/SidebarLinkGroup.tsx
@@ -6,14 +6,14 @@ interface SidebarLinkGroupProps {
   activeCondition: boolean;
 }
 
-const SidebarLinkGroup = ({children, activeCondition}: SidebarLinkGroupProps) => {
+function SidebarLinkGroup({children, activeCondition}: SidebarLinkGroupProps) {
   const [open, setOpen] = useState<boolean>(activeCondition);
 
-  const handleClick = () => {
+  function handleClick() {
     setOpen(!open);
-  };
+  }
 
   return <li>{children(handleClick, open)}</li>;
-};
+}
 
 export default SidebarLinkGroup;
diff --git a/hosting/src/components/Sidebar/SidebarMenuGroup.tsx b/hosting/src/components/Sidebar/SidebarMenuGroup.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+interface SidebarMenuGroupProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+export function SidebarMenuGroup({title, children}: SidebarMenuGroupProps) {
+  return (
+    <div>
+      <h3 className="mb-4 ml-4 text-sm font-semibold text-bodydark2">{title}</h3>
+      <ul className="mb-6 flex flex-col gap-1.5">{children}</ul>
+    </div>
+  );
+}
diff --git a/hosting/src/components/Sidebar/SidebarMenuItem.tsx b/hosting/src/components/Sidebar/SidebarMenuItem.tsx
@@ -0,0 +1,29 @@
+import Link from "next/link";
+import {usePathname} from "next/navigation";
+import React from "react";
+
+interface SidebarMenuProps {
+  href: string;
+  icon: React.ReactNode;
+  title: string;
+}
+
+export function SidebarMenuItem({href, icon, title}: SidebarMenuProps) {
+  const pathname = usePathname() ?? "/";
+
+  const isActive = pathname.includes(href);
+
+  return (
+    <li>
+      <Link
+        href={href}
+        className={`group relative flex items-center gap-2.5 rounded-sm px-4 py-2 font-medium text-bodydark1 duration-300 ease-in-out hover:bg-graydark dark:hover:bg-meta-4 ${
+          isActive && "bg-graydark dark:bg-meta-4"
+        }`}
+      >
+        {icon}
+        {title}
+      </Link>
+    </li>
+  );
+}
diff --git a/hosting/src/components/Sidebar/icons/ArrowLeftIcon.tsx b/hosting/src/components/Sidebar/icons/ArrowLeftIcon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export function ArrowLeftIcon() {
+  return (
+    <svg
+      className="fill-current"
+      width="20"
+      height="18"
+      viewBox="0 0 20 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 8.175H2.98748L9.36248 1.6875C9.69998 1.35 9.69998 0.825 9.36248 0.4875C9.02498 0.15 8.49998 0.15 8.16248 0.4875L0.399976 8.3625C0.0624756 8.7 0.0624756 9.225 0.399976 9.5625L8.16248 17.4375C8.31248 17.5875 8.53748 17.7 8.76248 17.7C8.98748 17.7 9.17498 17.625 9.36248 17.475C9.69998 17.1375 9.69998 16.6125 9.36248 16.275L3.02498 9.8625H19C19.45 9.8625 19.825 9.4875 19.825 9.0375C19.825 8.55 19.45 8.175 19 8.175Z"
+        fill=""
+      />
+    </svg>
+  );
+}