git/metabuilder
1
0
Fork 0
mirror of https://github.com/johndoe6345789/metabuilder.git synced 2026-04-24 22:04:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

update: scss,nextjs,module (8 files)

Browse Source
This commit is contained in:
Richard Ward
2025-12-30 18:42:31 +00:00
parent 5d3c79d40f
commit 0e7c857d64
8 changed files with 301 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss Normal file
View File

@@ -0,0 +1,31 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.navigationMenu {
display: flex;
gap: 0.25rem;
&.horizontal {
flex-direction: row;
align-items: center;
}
&.vertical {
flex-direction: column;
align-items: stretch;
}
}
.navigationMenuList {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.navigationMenuItem {
position: relative;
}

62
frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss Normal file
View File

@@ -0,0 +1,62 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.navigationMenuLink {
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: none;
font-weight: 500;
min-width: auto;
padding: 0.5rem 1rem;
color: var(--text-primary, inherit);
text-decoration: none;
border-radius: 4px;
transition: background-color 0.2s;
&:hover {
background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
}
&.active {
color: var(--primary-main, #1976d2);
}
}
.navigationMenuIndicator {
position: absolute;
bottom: 0;
height: 2px;
background-color: var(--primary-main, #1976d2);
transition: all 0.2s;
}
.navigationMenuViewport {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--background-paper, #fff);
border-radius: 4px;
box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
overflow: hidden;
}
.triggerStyle {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 4px;
transition: all 0.2s;
&:hover {
background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
}
&:focus {
background-color: var(--action-focus, rgba(0, 0, 0, 0.12));
}
}

19
frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss Normal file
View File

@@ -0,0 +1,19 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.navigationMenuTrigger {
text-transform: none;
font-weight: 500;
color: var(--text-primary, inherit);
&:hover {
background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
}
}
.navigationMenuContent {
margin-top: 0.5rem;
min-width: 200px;
border-radius: 4px;
box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
}

32
frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss Normal file
View File

@@ -0,0 +1,32 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.sidebarDrawer {
:global(.drawer__content) {
width: var(--sidebar-width, 280px);
}
}
.sidebarCore {
flex-shrink: 0;
width: var(--sidebar-width, 280px);
transition: width 0.2s ease-in-out;
overflow: hidden;
&.open {
width: var(--sidebar-width, 280px);
}
&.collapsed {
width: var(--sidebar-width, 64px);
}
}
.sidebarInner {
width: var(--sidebar-inner-width, 280px);
height: 100%;
background-color: var(--background-paper, #fff);
border-right: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
display: flex;
flex-direction: column;
}

24
frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss Normal file
View File

@@ -0,0 +1,24 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.sidebarSeparator {
margin: 0.5rem 0;
}
.sidebarTrigger {
// Uses IconButton styles
}
.sidebarRail {
position: absolute;
right: -4px;
top: 0;
bottom: 0;
width: 8px;
cursor: col-resize;
&:hover {
background-color: var(--primary-main, #1976d2);
opacity: 0.2;
}
}

41
frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss Normal file
View File

@@ -0,0 +1,41 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.sidebarGroup {
margin-bottom: 0.5rem;
}
.sidebarGroupHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1rem;
&.collapsible {
cursor: pointer;
&:hover {
background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
}
}
}
.sidebarGroupLabel {
font-size: 0.7rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}
.sidebarGroupLabelStandalone {
display: block;
padding: 0.5rem 1rem;
font-size: 0.7rem;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--text-secondary, rgba(0, 0, 0, 0.6));
}
.sidebarGroupList {
padding: 0;
}

26
frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss Normal file
View File

@@ -0,0 +1,26 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.sidebarHeader {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
}
.sidebarContent {
flex: 1;
overflow: auto;
padding: 0.5rem 0;
}
.sidebarFooter {
padding: 1rem;
border-top: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
}
.sidebarInset {
flex: 1;
overflow: auto;
}

66
frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss Normal file
View File

@@ -0,0 +1,66 @@
@use '@/styles/variables' as *;
@use '@/styles/mixins' as *;
.sidebarMenuList {
padding: 0;
}
.sidebarMenuListItem {
padding: 0;
}
.sidebarMenuItemWrapper {
width: 100%;
}
.sidebarMenuButton {
display: flex;
align-items: center;
width: calc(100% - 0.5rem);
margin: 0 0.5rem;
padding: 0.5rem 0.75rem;
border-radius: 4px;
text-decoration: none;
color: inherit;
background: none;
border: none;
cursor: pointer;
font-size: 0.875rem;
text-align: left;
transition: background-color 0.2s;
&:hover {
background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
}
&.active,
&:global(.list-item-button--selected) {
background-color: var(--primary-main, #1976d2);
color: var(--primary-contrast-text, #fff);
.sidebarMenuIcon {
color: var(--primary-contrast-text, #fff);
}
&:hover {
background-color: var(--primary-dark, #1565c0);
}
}
&.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
}
.sidebarMenuIcon {
min-width: 36px;
display: flex;
align-items: center;
color: inherit;
}
.sidebarMenuText {
font-size: 0.875rem;
}