Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

BO01 - Create a layout for the BackOffice #170

Merged
merged 13 commits into from
May 22, 2024
Merged

BO01 - Create a layout for the BackOffice #170

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
6fef367
Add Layout, Sidebar and Header Profile (in draft)
Apr 16, 2024
68507b4
Replace react component with astro component, rename feature in backo…
Apr 23, 2024
29a3c6d
Rename backoffice layout, remove layout in index
Apr 23, 2024
5937b00
Rename Backoffice in BackOffice, remove useless import
Apr 23, 2024
8f5d83e
fix: bug fix overlay
Apr 30, 2024
2ac9dba
refactor: sidebar and index
May 2, 2024
282f30c
Merge branch 'main' into BO01
May 5, 2024
cc55b53
Merge branch 'main' into BO01
May 5, 2024
ce6ac87
feat: change header and sidebar folder
May 5, 2024
738e166
feat: change header and sidebar folder again
May 5, 2024
e5f438b
feat: add icons
May 12, 2024
62832db
Merge branch 'main' into BO01
May 12, 2024
2a7d448
fix:restore main index
May 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/backoffice-layout/BackofficeLayout.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
import Sidebar from "~/backoffice-layout/Sidebar.astro";
---

<div class="flex flex-row">
<Sidebar>
<slot/>
</Sidebar>
</div>

13 changes: 13 additions & 0 deletions src/backoffice-layout/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---

/**
* Profile Stuff
* @returns
*/

---

<div class="flex flex-row justify-end">
<p>Profile Stuff</p>
</div>

36 changes: 36 additions & 0 deletions src/backoffice-layout/Sidebar.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
import Header from "~/backoffice-layout/Header.astro";
import SidebarItems from "./SidebarItems.astro";
---


<div class="drawer lg:drawer-open">
<input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
<div class="drawer-content">
<div class="flex flex-col items-center">
<div class="flex flex-row justify-between items-center w-full px-5 mt-2">
<label for="my-drawer-2" class="btn btn-primary drawer-button lg:hidden"
>Open drawer</label
valekuro marked this conversation as resolved.
Show resolved Hide resolved
>
<div class="m-0 lg:w-5/6 w-full">
<Header />
</div>
</div>
</div>
<slot />
</div>
<div class="drawer-side">
<label for="my-drawer-2" aria-label="close sidebar" class="drawer-overlay"
></label>
<SidebarItems
content={[
{ icon: "A", item: "Sidebar Item A", url: "#" },
valekuro marked this conversation as resolved.
Show resolved Hide resolved
{ 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: "#" },
]}
/>
</div>
</div>
24 changes: 24 additions & 0 deletions src/backoffice-layout/SidebarItems.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

---

<ul class="menu h-full bg-base-200 text-base-content content-stretch justify-start">
{content.map((item=><li key={item.item || item.icon}><div class="flex flex-row gap-5">
<p>{item.icon}</p>
<a href={item.url}>{item.item}</a>
</div></li>))}
</ul>
6 changes: 6 additions & 0 deletions src/pages/index.astro
View file
Open in desktop
valekuro marked this conversation as resolved.
Show resolved Hide resolved
valekuro marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please, reset this to the version that is actually on main

Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import i18next, { changeLanguage } from "i18next";

import { UserRecord, getAuth } from "firebase-admin/auth";
import { app } from "../firebase/server";
import BackofficeLayout from "~/backoffice-layout/BackofficeLayout.astro";

changeLanguage("en");

Expand Down Expand Up @@ -30,6 +31,9 @@ if (sessionCookie) {
</head>
<body>
<main role="main">
<BackofficeLayout>
<p>My page content, wrapped in a layout!</p>

<h1>Welcome to Hedwig!</h1>
<p>We are happy to see you here</p>
{user && (
Expand All @@ -38,6 +42,8 @@ if (sessionCookie) {
<button type="submit">Sign out</button>
</form>
)}
</BackofficeLayout>

</main>
</body>
</html>
Loading