#869 apply layouts to directories via files and clean up route checks

frontend/app.vue

@@ -1,7 +1,7 @@
 <template>
   <Loading />
   <div>
-    <NuxtLayout :pageType="routeToPageType">
+    <NuxtLayout>
       <!-- Dummy target to receive click event. A click event triggers ModalCommandPalette. -->
       <div
         @click="openModal()"
@@ -15,7 +15,7 @@
         @closeModal="handleCloseModal"
         :isOpen="modalIsOpen"
       />
-      <NuxtPage @routeToName="updateRouteTo" />
+      <NuxtPage />
     </NuxtLayout>
   </div>
 </template>
@@ -67,9 +67,4 @@ whenever(ctrl_k, () => {
     doWhenever();
   }
 });
-
-const routeToPageType = ref("");
-const updateRouteTo = (route: string) => {
-  routeToPageType.value = route;
-};
 </script>

frontend/components/menu/mobile/MenuMobileNavigationDropdown.vue

@@ -82,16 +82,10 @@ import {
   isCurrentRoutePathSubpageOf,
 } from "~/utils/routeUtils";
 
-const props = defineProps<{
-  pageType?: string;
-}>();
-
 const { currentRoute } = useRouter();
 
 const routeName = computed(() => {
-  if (props.pageType) {
-    return props.pageType;
-  } else if (currentRoute.value.name) {
+  if (currentRoute.value.name) {
     return currentRoute.value.name;
   }
   return "";

frontend/components/sidebar/left/SidebarLeft.vue

@@ -32,6 +32,8 @@
           !sidebar.collapsed || sidebar.collapsedSwitch == false,
       }"
     >
+      <p>{{ routeName }}</p>
+      <p>{{ sidebarType }}</p>
       <SearchBar class="mt-1" :location="SearchBarLocation.SIDEBAR" />
       <SidebarLeftMainSectionSelectors class="mt-2" />
       <SidebarLeftIndex
@@ -61,24 +63,18 @@
 import type { Filters } from "~/types/filters";
 import { SearchBarLocation } from "~/types/location";
 import { SidebarType } from "~/types/sidebar-type";
+import { Topic } from "~/types/topics";
 import {
   currentRoutePathIncludes,
   isCurrentRoutePathSubpageOf,
 } from "~/utils/routeUtils";
 
-const props = defineProps<{
-  name?: string;
-  pageType?: string;
-}>();
-
 const sidebar = useSidebar();
 const route = useRoute();
 const { currentRoute } = useRouter();
 
 const routeName = computed(() => {
-  if (props.pageType) {
-    return props.pageType;
-  } else if (currentRoute.value.name) {
+  if (currentRoute.value.name) {
     return currentRoute.value.name;
   }
   return "";
@@ -128,6 +124,15 @@ const sidebarType = computed(() => {
 const placeholderName = route.path.split("/").at(-2)?.replaceAll("-", " ");
 const placeholderLogo = "/images/tech-from-below.svg";
 
+const topicsArray: { label: string; value: string }[] = [];
+
+for (const key in Topic) {
+  if (Object.prototype.hasOwnProperty.call(Topic, key)) {
+    const value = Topic[key as keyof typeof Topic];
+    topicsArray.push({ label: key.toLowerCase(), value });
+  }
+}
+
 const filters = {
   daysAhead: {
     sidebarType: [SidebarType.FILTER_EVENTS],
@@ -221,92 +226,7 @@ const filters = {
     name: "topic",
     style: "simple",
     expandable: true,
-    items: [
-      {
-        label: "Environment",
-        value: "environment",
-      },
-      {
-        label: "Housing",
-        value: "housing",
-      },
-      {
-        label: "Refugees",
-        value: "refugees",
-      },
-      {
-        label: "LGBTQIA+",
-        value: "lgbtqia+",
-      },
-      {
-        label: "Racial Justice",
-        value: "racial justice",
-      },
-      {
-        label: "Women's Rights",
-        value: "women's rights",
-      },
-      {
-        label: "Children's Rights",
-        value: "children's rights",
-      },
-      {
-        label: "Elder Rights",
-        value: "elder rights",
-      },
-      {
-        label: "Animal Rights",
-        value: "animal rights",
-      },
-      {
-        label: "Labor Rights",
-        value: "labor rights",
-      },
-      {
-        label: "Education",
-        value: "education",
-      },
-      {
-        label: "Democracy",
-        value: "democracy",
-      },
-      {
-        label: "Health",
-        value: "health",
-      },
-      {
-        label: "Privacy",
-        value: "privacy",
-      },
-      {
-        label: "Peace",
-        value: "peace",
-      },
-      {
-        label: "Nutrition",
-        value: "nutrition",
-      },
-      {
-        label: "Accessibility",
-        value: "accessibility",
-      },
-      {
-        label: "Transparency",
-        value: "transparency",
-      },
-      {
-        label: "Expression",
-        value: "expression",
-      },
-      {
-        label: "Emergency Relief",
-        value: "emergency relief",
-      },
-      {
-        label: "Infrastructure",
-        value: "infrastructure",
-      },
-    ],
+    items: topicsArray,
   },
 };
 

frontend/error.vue

@@ -38,7 +38,7 @@
       </div>
     </div>
   </div>
-  <Footer />
+  <FooterWebsite />
 </template>
 
 <script setup lang="ts">

frontend/i18n/en-US.json

@@ -460,9 +460,7 @@
   "pages.auth.sign-in.index.no-account": "Don't have an account?",
   "pages.auth.sign-up.index.enter-user-name": "Enter a username",
   "pages.auth.sign-up.index.have-account": "Already have an account?",
-  "pages.blog.title": "Blog Home",
   "pages.auth.index.where-to-start": "Where would you like to start?",
-  "pages.careers.title": "Careers",
   "pages.docs.get-active.header": "Discover and get involved",
   "pages.docs.get-active.modal-image-alt-text": "Mockups that show mobile organization search and web event search on a map.",
   "pages.docs.get-active.section-1-paragraph-1": "activist has the goal of making finding political events and organizations near you as easy as possible. With each event we want people to have an opportunity to get involved in the organization that's putting it on, and once in an organization we want to make it easy to find what to do next to have the biggest impact.",
@@ -509,7 +507,6 @@
   "pages.events.search.header-title": "Events search",
   "pages.events.search.subheader": "Find events to attend",
   "pages.events.team.tagline": "Event organizers",
-  "pages.finances.title": "Finances",
   "pages.groups.create.create-group-aria-label": "Finish the creation of the group and add it to the organization",
   "pages.groups.create.description-placeholder": "Please provide a description of the group so the community knows its focus and how it works with the rest of the organization",
   "pages.groups.create.group-name": "Group Name",

frontend/layouts/auth.vue

@@ -37,7 +37,7 @@
           </h1>
         </div>
       </div>
-      <slot />
+      <NuxtPage />
     </div>
   </div>
 </template>

frontend/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
   <HeaderWebsite />
-  <slot />
-  <Footer />
+  <NuxtPage />
+  <FooterWebsite />
 </template>

frontend/layouts/sidebar.vue

@@ -0,0 +1,61 @@
+<template>
+  <HeaderMobile />
+  <MenuMobileNavigationDropdown class="md:hidden" />
+  <SidebarLeft
+    @mouseover="sidebarHover = true"
+    @focus="sidebarHover = true"
+    @mouseleave="sidebarHover = false"
+    @blur="sidebarHover = false"
+    class="hidden md:block"
+  />
+  <div class="flex flex-col md:h-screen md:overflow-y-scroll">
+    <div
+      class="bg-light-layer-0 pt-8 transition-padding duration-500 dark:bg-dark-layer-0 md:pt-0"
+      :class="sidebarContentDynamicClass"
+    >
+      <NuxtPage />
+    </div>
+    <FooterWebsite
+      class="pb-24 transition-padding duration-500 md:pb-12"
+      :class="sidebarFooterDynamicClass"
+    />
+  </div>
+  <MenuMobileNavBar class="md:hidden" />
+</template>
+
+<script setup lang="ts">
+import {
+  getSidebarContentDynamicClass,
+  getSidebarFooterDynamicClass,
+} from "~/utils/sidebarUtils";
+
+const sidebar = useSidebar();
+const sidebarHover = ref(false);
+
+onMounted(() => {
+  window.addEventListener("resize", handleWindowSizeChange);
+  handleWindowSizeChange();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", handleWindowSizeChange);
+});
+
+const handleWindowSizeChange = () => {
+  if (window.innerWidth < 1280) {
+    sidebar.collapsed = true;
+    sidebar.collapsedSwitch = true;
+  }
+};
+
+const sidebarContentScrollable = useState<boolean>("sidebarContentScrollable");
+
+const sidebarFooterDynamicClass = getSidebarFooterDynamicClass(
+  sidebarHover.value
+);
+
+const sidebarContentDynamicClass = getSidebarContentDynamicClass(
+  sidebarContentScrollable.value,
+  sidebarHover.value
+);
+</script>

frontend/pages/about/activist.vue

@@ -72,9 +72,5 @@
 </template>
 
 <script script setup="ts">
-import useRouteToName from "~/composables/useRouteToName";
 import { IconMap } from "~/types/icon-map";
-
-const emit = defineEmits(["routeToName"]);
-useRouteToName(emit);
 </script>