From 6fef367c8aae8da9767d6ae7dda6ce24710d2345 Mon Sep 17 00:00:00 2001 From: Valentina DOrazio Date: Tue, 16 Apr 2024 12:19:34 +0200 Subject: [PATCH 01/10] Add Layout, Sidebar and Header Profile (in draft) --- src/feature-header/Header.tsx | 13 ++++++++ src/feature-sidebar/ISidebar.ts | 15 ++++++++++ src/feature-sidebar/Sidebar.tsx | 44 ++++++++++++++++++++++++++++ src/feature-sidebar/SidebarItems.tsx | 16 ++++++++++ src/layouts/Layout.astro | 20 +++++++++++++ src/pages/index.astro | 5 +++- 6 files changed, 112 insertions(+), 1 deletion(-) create mode 100644 src/feature-header/Header.tsx create mode 100644 src/feature-sidebar/ISidebar.ts create mode 100644 src/feature-sidebar/Sidebar.tsx create mode 100644 src/feature-sidebar/SidebarItems.tsx create mode 100644 src/layouts/Layout.astro diff --git a/src/feature-header/Header.tsx b/src/feature-header/Header.tsx new file mode 100644 index 00000000..60dc1623 --- /dev/null +++ b/src/feature-header/Header.tsx @@ -0,0 +1,13 @@ +/** + * Profile Stuff + * @returns + */ +const Header = ()=>{ + return( +
+

Profile Stuff

+
+ ) +} + +export default Header; \ No newline at end of file diff --git a/src/feature-sidebar/ISidebar.ts b/src/feature-sidebar/ISidebar.ts new file mode 100644 index 00000000..a9d8ac10 --- /dev/null +++ b/src/feature-sidebar/ISidebar.ts @@ -0,0 +1,15 @@ +import type { ReactNode } from "react"; + +export interface ISidebar{ + children: ReactNode; +} + +export interface ISidebarItems{ + item?: string; + url?: string; + icon?:string; +} + +export interface ISidebarItemsProps{ + items:ISidebarItems[], +} \ No newline at end of file diff --git a/src/feature-sidebar/Sidebar.tsx b/src/feature-sidebar/Sidebar.tsx new file mode 100644 index 00000000..ec56bfcb --- /dev/null +++ b/src/feature-sidebar/Sidebar.tsx @@ -0,0 +1,44 @@ +import { useState } from "react"; +import type { ISidebar, ISidebarItems } from "./ISidebar"; +import SidebarItems from "./SidebarItems"; +import Header from "~/feature-header/Header"; + +/** + * Sidebar component + * @param children: is the page content + * @returns + */ +const Sidebar = ({ children }:ISidebar)=>{ + const [toggleDrawer, setToggleDrawer] = useState(false); + //TODO: sarĂ  da togliere!! + const items:ISidebarItems[] = [{icon:"A"}, {icon:"B"}, {icon:"C"}, {icon:"D"}, {icon:"E"}, {icon:"F"}]; + const menuItems:ISidebarItems[] = [{icon:"A", item:"Sidebar Item A", url:"#"}, {icon:"B", item:"Sidebar Item B", url:"#"}, {icon:"C", item:"Sidebar Item C", url:"#"}, {icon:"D", item:"Sidebar Item D", url:"#"}, {icon:"E", item:"Sidebar Item E", url:"#"}, {icon:"F", item:"Sidebar Item F", url:"#"}] + return( + <> +
+ + + +
+ +
+
+ {children} +
+
+ +
setToggleDrawer(false)}> + + +
+
+ + ) +} + + +export default Sidebar; diff --git a/src/feature-sidebar/SidebarItems.tsx b/src/feature-sidebar/SidebarItems.tsx new file mode 100644 index 00000000..995399bc --- /dev/null +++ b/src/feature-sidebar/SidebarItems.tsx @@ -0,0 +1,16 @@ +import type { ISidebarItemsProps, ISidebarItems } from "./ISidebar"; + +/** + * Sidebar list items + * @param items: elements that can be represented by a list + * @returns + */ +const SidebarItems = ({items}:ISidebarItemsProps)=>{ + return( + + ) +} + +export default SidebarItems; \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro new file mode 100644 index 00000000..f6d0fedd --- /dev/null +++ b/src/layouts/Layout.astro @@ -0,0 +1,20 @@ +--- +import Sidebar from "~/feature-sidebar/Sidebar"; + + + +//const { content } = Astro.props; +--- + + + + + + +
+ + + +
+ + \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index f2995862..955db88e 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,6 +2,7 @@ import i18next, { changeLanguage } from "i18next"; import { app } from "../firebase/server"; import { getAuth } from "firebase-admin/auth"; +import Layout from "~/layouts/Layout.astro"; changeLanguage("en"); @@ -15,7 +16,9 @@ console.log(auth);
-

Welcome to Hedwig!

+ +

My page content, wrapped in a layout!

+
From 68507b4196a63489898b6153a6383ce1735c16e9 Mon Sep 17 00:00:00 2001 From: Valentina DOrazio Date: Tue, 23 Apr 2024 22:19:26 +0200 Subject: [PATCH 02/10] Replace react component with astro component, rename feature in backoffice --- src/backoffice-header/Header.astro | 13 +++++++ src/backoffice-sidebar/Sidebar.astro | 38 ++++++++++++++++++++ src/backoffice-sidebar/SidebarItems.astro | 24 +++++++++++++ src/feature-header/Header.tsx | 13 ------- src/feature-sidebar/ISidebar.ts | 15 -------- src/feature-sidebar/Sidebar.tsx | 44 ----------------------- src/feature-sidebar/SidebarItems.tsx | 16 --------- src/layouts/Layout.astro | 3 +- 8 files changed, 77 insertions(+), 89 deletions(-) create mode 100644 src/backoffice-header/Header.astro create mode 100644 src/backoffice-sidebar/Sidebar.astro create mode 100644 src/backoffice-sidebar/SidebarItems.astro delete mode 100644 src/feature-header/Header.tsx delete mode 100644 src/feature-sidebar/ISidebar.ts delete mode 100644 src/feature-sidebar/Sidebar.tsx delete mode 100644 src/feature-sidebar/SidebarItems.tsx diff --git a/src/backoffice-header/Header.astro b/src/backoffice-header/Header.astro new file mode 100644 index 00000000..88df5cdc --- /dev/null +++ b/src/backoffice-header/Header.astro @@ -0,0 +1,13 @@ +--- + +/** + * Profile Stuff + * @returns + */ + +--- + +
+

Profile Stuff

+
+ \ No newline at end of file diff --git a/src/backoffice-sidebar/Sidebar.astro b/src/backoffice-sidebar/Sidebar.astro new file mode 100644 index 00000000..80f7160d --- /dev/null +++ b/src/backoffice-sidebar/Sidebar.astro @@ -0,0 +1,38 @@ +--- +import Header from "~/backoffice-header/Header.astro"; +import SidebarItems from "./SidebarItems.astro"; +--- + + + +
+ + + +
+ +
+
+
+
+ +
+ + + +
+
\ No newline at end of file diff --git a/src/backoffice-sidebar/SidebarItems.astro b/src/backoffice-sidebar/SidebarItems.astro new file mode 100644 index 00000000..592d26e0 --- /dev/null +++ b/src/backoffice-sidebar/SidebarItems.astro @@ -0,0 +1,24 @@ +--- + +/** + * Sidebar list items + * @prop content: elements that can be represented by a list + * @returns + */ +interface Props { + content: { + item?: string; + url?: string; + icon?:string; + }[] +} +const {content} = Astro.props; + +--- + + \ No newline at end of file diff --git a/src/feature-header/Header.tsx b/src/feature-header/Header.tsx deleted file mode 100644 index 60dc1623..00000000 --- a/src/feature-header/Header.tsx +++ /dev/null @@ -1,13 +0,0 @@ -/** - * Profile Stuff - * @returns - */ -const Header = ()=>{ - return( -
-

Profile Stuff

-
- ) -} - -export default Header; \ No newline at end of file diff --git a/src/feature-sidebar/ISidebar.ts b/src/feature-sidebar/ISidebar.ts deleted file mode 100644 index a9d8ac10..00000000 --- a/src/feature-sidebar/ISidebar.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type { ReactNode } from "react"; - -export interface ISidebar{ - children: ReactNode; -} - -export interface ISidebarItems{ - item?: string; - url?: string; - icon?:string; -} - -export interface ISidebarItemsProps{ - items:ISidebarItems[], -} \ No newline at end of file diff --git a/src/feature-sidebar/Sidebar.tsx b/src/feature-sidebar/Sidebar.tsx deleted file mode 100644 index ec56bfcb..00000000 --- a/src/feature-sidebar/Sidebar.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { useState } from "react"; -import type { ISidebar, ISidebarItems } from "./ISidebar"; -import SidebarItems from "./SidebarItems"; -import Header from "~/feature-header/Header"; - -/** - * Sidebar component - * @param children: is the page content - * @returns - */ -const Sidebar = ({ children }:ISidebar)=>{ - const [toggleDrawer, setToggleDrawer] = useState(false); - //TODO: sarĂ  da togliere!! - const items:ISidebarItems[] = [{icon:"A"}, {icon:"B"}, {icon:"C"}, {icon:"D"}, {icon:"E"}, {icon:"F"}]; - const menuItems:ISidebarItems[] = [{icon:"A", item:"Sidebar Item A", url:"#"}, {icon:"B", item:"Sidebar Item B", url:"#"}, {icon:"C", item:"Sidebar Item C", url:"#"}, {icon:"D", item:"Sidebar Item D", url:"#"}, {icon:"E", item:"Sidebar Item E", url:"#"}, {icon:"F", item:"Sidebar Item F", url:"#"}] - return( - <> -
- - - -
- -
-
- {children} -
-
- -
setToggleDrawer(false)}> - - -
-
- - ) -} - - -export default Sidebar; diff --git a/src/feature-sidebar/SidebarItems.tsx b/src/feature-sidebar/SidebarItems.tsx deleted file mode 100644 index 995399bc..00000000 --- a/src/feature-sidebar/SidebarItems.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { ISidebarItemsProps, ISidebarItems } from "./ISidebar"; - -/** - * Sidebar list items - * @param items: elements that can be represented by a list - * @returns - */ -const SidebarItems = ({items}:ISidebarItemsProps)=>{ - return( -
    - {items.map((item:ISidebarItems)=>
  • console.log('ciao')}>{item.icon}

    {item.item}
  • )} -
- ) -} - -export default SidebarItems; \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index f6d0fedd..f66b3ac6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- -import Sidebar from "~/feature-sidebar/Sidebar"; +import Sidebar from "~/backoffice-sidebar/Sidebar.astro"; + From 29a3c6db4449a3d31deb0023971ddc9b850f0028 Mon Sep 17 00:00:00 2001 From: Valentina DOrazio Date: Tue, 23 Apr 2024 22:33:05 +0200 Subject: [PATCH 03/10] Rename backoffice layout, remove layout in index --- .../BackofficeLayout.astro} | 5 ----- src/pages/index.astro | 8 ++++---- 2 files changed, 4 insertions(+), 9 deletions(-) rename src/{layouts/Layout.astro => backoffice-layout/BackofficeLayout.astro} (89%) diff --git a/src/layouts/Layout.astro b/src/backoffice-layout/BackofficeLayout.astro similarity index 89% rename from src/layouts/Layout.astro rename to src/backoffice-layout/BackofficeLayout.astro index f66b3ac6..f92fca9c 100644 --- a/src/layouts/Layout.astro +++ b/src/backoffice-layout/BackofficeLayout.astro @@ -1,10 +1,5 @@ --- import Sidebar from "~/backoffice-sidebar/Sidebar.astro"; - - - - -//const { content } = Astro.props; --- diff --git a/src/pages/index.astro b/src/pages/index.astro index 955db88e..1a71b270 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,7 +2,7 @@ import i18next, { changeLanguage } from "i18next"; import { app } from "../firebase/server"; import { getAuth } from "firebase-admin/auth"; -import Layout from "~/layouts/Layout.astro"; +import BackofficeLayout from "~/backoffice-layout/BackofficeLayout.astro"; changeLanguage("en"); @@ -13,12 +13,12 @@ console.log(auth); Hedwig + +
- -

My page content, wrapped in a layout!

-
+

Welcome to Hedwig!

From 5937b005088e9f53d078f063c47b5c4098caacc8 Mon Sep 17 00:00:00 2001 From: Valentina DOrazio Date: Tue, 23 Apr 2024 22:35:39 +0200 Subject: [PATCH 04/10] Rename Backoffice in BackOffice, remove useless import --- src/pages/index.astro | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/index.astro b/src/pages/index.astro index 1a71b270..bde0488c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,7 +2,6 @@ import i18next, { changeLanguage } from "i18next"; import { app } from "../firebase/server"; import { getAuth } from "firebase-admin/auth"; -import BackofficeLayout from "~/backoffice-layout/BackofficeLayout.astro"; changeLanguage("en"); From 8f5d83e09989bf717fe202c0e5d26d9a72f0cf87 Mon Sep 17 00:00:00 2001 From: Valentina DOrazio Date: Tue, 30 Apr 2024 18:30:55 +0200 Subject: [PATCH 05/10] fix: bug fix overlay --- src/backoffice-header/Header.astro | 2 +- src/backoffice-layout/BackofficeLayout.astro | 12 +-- src/backoffice-sidebar/Sidebar.astro | 77 ++++++++++++-------- src/backoffice-sidebar/SidebarItems.astro | 2 +- src/pages/index.astro | 13 ++-- 5 files changed, 59 insertions(+), 47 deletions(-) diff --git a/src/backoffice-header/Header.astro b/src/backoffice-header/Header.astro index 88df5cdc..d936d651 100644 --- a/src/backoffice-header/Header.astro +++ b/src/backoffice-header/Header.astro @@ -7,7 +7,7 @@ --- -
+

Profile Stuff

\ No newline at end of file diff --git a/src/backoffice-layout/BackofficeLayout.astro b/src/backoffice-layout/BackofficeLayout.astro index f92fca9c..4c0af919 100644 --- a/src/backoffice-layout/BackofficeLayout.astro +++ b/src/backoffice-layout/BackofficeLayout.astro @@ -1,16 +1,10 @@ --- import Sidebar from "~/backoffice-sidebar/Sidebar.astro"; --- - - - - - - +
- +
- - \ No newline at end of file + \ No newline at end of file diff --git a/src/backoffice-sidebar/Sidebar.astro b/src/backoffice-sidebar/Sidebar.astro index 80f7160d..b16ccc3a 100644 --- a/src/backoffice-sidebar/Sidebar.astro +++ b/src/backoffice-sidebar/Sidebar.astro @@ -3,36 +3,51 @@ import Header from "~/backoffice-header/Header.astro"; import SidebarItems from "./SidebarItems.astro"; --- - - -
- - - -
- -
-
+ +
+ +
+
+
+ +
+
+
-
- -
- - -
-
\ No newline at end of file + +
+
+ + +
+
diff --git a/src/backoffice-sidebar/SidebarItems.astro b/src/backoffice-sidebar/SidebarItems.astro index 592d26e0..8f335e01 100644 --- a/src/backoffice-sidebar/SidebarItems.astro +++ b/src/backoffice-sidebar/SidebarItems.astro @@ -16,7 +16,7 @@ const {content} = Astro.props; --- -