Add layout updates

CarletonComputerScienceSociety · Jun 27, 2023 · c99f8f1 · c99f8f1
1 parent 105b8cb
commit c99f8f1
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 40 deletions.
diff --git a/src/components/islands/Search/Search.style.scss b/src/components/islands/Search/Search.style.scss
@@ -7,6 +7,7 @@
   display: flex;
   justify-content: space-between;
   font-size: 1.2rem;
+  border: 1px solid rgb(235, 235, 235);
 
   i {
     color: rgb(160, 160, 160);

diff --git a/src/components/resources/Navbar/Navbar.astro b/src/components/resources/Navbar/Navbar.astro
@@ -1,5 +1,7 @@
 ---
+import { Search } from "../../islands";
 import "./Navbar.style.scss";
+const { searchList } = Astro.props;
 ---
 
 <div class="resources-navbar">
@@ -9,21 +11,12 @@ import "./Navbar.style.scss";
         <img src="/images/ccss-logo-2022.png" alt="logo" />
       </a>
     </div>
-    <div class="resources-navbar__menu">
-      <!-- TODO: render nav elements from content data -->
-      <!-- <ul>
-        <li>
-          <a href="/about">About</a>
-        </li>
-        <li>
-          <a href="/events">Events</a>
-        </li>
-        <li>
-          <a href="/resources">Resources</a>
-        </li>
-      </ul> -->
+    <div class="resources-navbar__center">
+      <div class="resources-navbar__menu">
+        <Search client:load searchList={searchList} />
+      </div>
     </div>
-    <div class="resources-navbar__search">
+    <div class="resources-navbar__right">
       <!-- TODO: add search -->
       <!--<input type="text" placeholder="Search" />-->
     </div>

diff --git a/src/components/resources/Navbar/Navbar.style.scss b/src/components/resources/Navbar/Navbar.style.scss
@@ -7,7 +7,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 1rem;
+    padding: 0.75rem 0.75rem;
     background-color: white;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     width: 100vw;
@@ -37,13 +37,14 @@
     }
   }
 
-  &__search {
-    input {
-      border: 1px solid #a9a9a9;
-      padding: 0.5rem 1rem;
-      border-radius: 0.625rem;
-      outline: none;
-      min-width: 15rem;
-    }
+  &__center {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  &__right {
+    width: 15rem;
   }
 }
diff --git a/src/components/resources/Sidebar/Sidebar.style.scss b/src/components/resources/Sidebar/Sidebar.style.scss
@@ -2,21 +2,14 @@
   position: fixed;
   width: 260px;
   flex-shrink: 0;
-  background-color: rgb(255, 255, 255);
+  background-color: #fafafa;
   height: 100vh;
   overflow: auto;
   color: #000000;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1rem;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
   padding-right: 0rem;
-
-  &__logo {
-    img {
-      padding: 1rem;
-      width: 14rem;
-    }
-  }
 }
 
 .sidebar-item {

diff --git a/src/components/resources/Sidebar/Sidebar.tsx b/src/components/resources/Sidebar/Sidebar.tsx
@@ -5,11 +5,6 @@ import "./Sidebar.style.scss";
 export default function Sidebar() {
   return (
     <div className="sidebar">
-      <div className="sidebar__logo">
-        <a href="/">
-          <img src="/images/ccss-logo-2022.png" alt="logo" />
-        </a>
-      </div>
       {items.map((item, index) => (
         <SidebarItem key={index} item={item} />
       ))}

diff --git a/src/components/resources/Sidebar/SidebarItem.tsx b/src/components/resources/Sidebar/SidebarItem.tsx
@@ -18,6 +18,8 @@ export default function SidebarItem(props: SidebarItemProps) {
         </button>
       </div>
       <div className="sidebar-content">
+        {/* TODO: don't hardcode this */}
+        <div style={{ marginBottom: "0.5rem" }}></div>
         {props.item.children.map((child, index) => (
           <SidebarItem key={index} item={child} />
         ))}

diff --git a/src/layouts/Resource.astro b/src/layouts/Resource.astro
@@ -2,6 +2,7 @@
 import Base from "../layouts/Base.astro";
 import { Navbar, Sidebar } from "../components/resources";
 import "./Resource.style.scss";
+import { getCollection } from "astro:content";
 
 const { frontmatter } = Astro.props;
 const metadata = {
@@ -10,9 +11,12 @@ const metadata = {
   url: "",
   image: "/",
 };
+
+const resourcePages = await getCollection("resources");
 ---
 
 <Base {metadata}>
+  <Navbar searchList={resourcePages} />
   <div class="resources-layout__container">
     <Sidebar client:load />
     <div class="resources-layout__content">

diff --git a/src/layouts/Resource.style.scss b/src/layouts/Resource.style.scss
@@ -1,6 +1,7 @@
 .resources-layout__container {
   display: flex;
   min-height: 100%;
+  margin-top: 5.1rem;
 }
 
 .resources-layout__content {

diff --git a/src/pages/resources.astro b/src/pages/resources.astro
@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import { Navbar } from "../components/resources";
 import { TopicCard } from "../components/core";
 import { Search } from "../components/islands";
 import Base from "../layouts/Base.astro";
@@ -17,9 +16,6 @@ const resourcePages = await getCollection("resources");
 ---
 
 <Base {metadata}>
-  <Navbar />
-  <!-- TODO: remove this demo margin -->
-  <div style="margin-top:5rem"></div>
   <div class="resources-page__heading">
     <p class="resources-page__heading-title">Resources</p>
     <p class="resources-page__heading-subtitle">